immersive-web / webvrrocks

Your guide to Virtual Reality in the browser.

WebVR Rocks

Your guide to Virtual Reality in the browser.

WebVR Rocks!

Installation

To install the Node dependencies:

npm install

Local development

To start the local development server:

npm start

Deployment

When commits land on the master branch of this repository, this project is automatically rebuilt and deployed to the production site, served by GitHub Pages (gh-pages branch of this repository), using a Travis CI + GitHub integration.

To trigger a manual deployment of the static pages to production:

npm run deploy

License

All code and content within this source-code repository is licensed under the Creative Commons Zero v1.0 Universal license (CC0 1.0 Universal; Public Domain Dedication).

You can copy, modify, distribute and perform this work, even for commercial purposes, all without asking permission.

For more information, refer to these following links:

• a copy of the license in this source-code repository
• the human-readable summary of the full text of the legal code
• the full text of the legal code

webvrrocks's Issues

Do not make footer links `position: absolute` when sidebar overflows (scrolls)

Add `.overcommit.yml` file

À la https://github.com/brigade/delayed-scroll-restoration-polyfill/blob/master/.overcommit.yml.

Optimize pjax requests so we use fetch only the inner `<main>`

When the SPA (JS + pjax + pushState) is used, we should be able to send a different response with only the HTML for the <main id="main"> content for the requested page. And make sure the server sends a Vary: X-Requested-With response for all the .html responses if request headers contain a X-Requested-With: PJAX header or X-PJAX: true header.

Home/Introduction: Add "Get Started" and "Install" buttons

Once we add JS code for detecting support (#2), we should also add an "Install" button on the home page, with a secondary "Get Started" button perhaps.

Update `ROBOTS.txt` and `meta[name="robots"]` for launch

Until the site is properly launched at https://webvr.rocks, search bots are currently set to disallow everything:

• https://github.com/WebVRRocks/webvrrocks/blob/d83d6f/layout.html#L7
• https://github.com/WebVRRocks/webvrrocks/blob/7fd7de6/ROBOTS.txt#L1-L2

make social icons more inviting

Good example:

https://www.polymer-project.org/1.0/

Add page titles (for `<title>`)

Add JS code for detecting VR headset/browser/OS/form factor

Support Nunjucks templating (instead of Handlebars) for `layout.html`

I filed jus/jus#38. If I have time, I'll try to do make a PR.

Add Code of Conduct

Guide: Exporting Thingiverse models to A-Frame

Ask Ben Nolan if we can link to (or rewrite the important bits from) https://medium.com/@bnolan/using-thingiverse-files-in-a-frame-50641ca3f721

Merge two "VR headsets" landing pages

• https://webvrrocks.surge.sh/headsets/
• https://webvrrocks.surge.sh/getting-started/headsets/

Add pjax (without jQuery) for single-page-app awesomeness + perf

https://github.com/thybag/PJAX-Standalone

Add "Servo" page in "Browsers"

And add links to it from various pages.

Consider adding company/org names to URLs of pages in `browser/`

Compare the URLs/page names of the documents in pages/ vs. headsets/.

Add footer

Code of conduct
Contributing
License
Privacy Policy
Legal Notices

Create Google Analytics ID and add JS script

Add placeholders for FOVE and PSVR headsets

Stub out license

Force HTTPS in staging + production (with server-side redirect)

Fix issue with `pjax-standalone` of resetting scroll position to top on `popState` (back/forward)

Add Directory stub

Port Airtable -> Google Sheets tables -> enable anonymous edits

Add link to suggest an edit (on GitHub) to current page

Consider starting forum à la ES Discuss

à la https://esdiscuss.org/1

Let's ask the WebVR community.

Update Web App Manifest with more content

https://github.com/WebVRRocks/webvrrocks/blob/master/manifest.json

Assets: Add a "meter stick" model

Because we work in meters in A-Frame (and Unity, etc.).

Directory: Introduce clean, pretty URLs

à la itch.io's URLs:

• https://itch.io/games/platform-windows/tag-mystery
• https://itch.io/games/input-htc-vive/platform-windows/tag-horror

Add favicon/shortcut icon

1. Create an icon (based on the logo) and place it in the img/ directory.

2. Point to it in the manifest.json and in the <head> of layout.html:

   <link rel="shortcut icon" src="img/webvr-favicon.png">

Create and replace logo with a slightly better one

Write a 5-minute guide on how to develop WebVR on Gear VR

Interesting tidbit from WebVR Slack #helps-and-bugs:

cozcinar [10:52 AM]
Hi All, does anyone has any idea how can I use gearVR touch button with the webvr-polyfills ?
Thanks

seanmcbeth [10:53 AM]
you add touchstart, touchmove, and touchend handlers on the canvas.

Would be good to have an easy post of how to go from zero to a WebVR experience on Gear VR (even if it's premature), with live-reloading and what not.

Use an open-source typeface for wordmark in the logo

I'm using Akzidenz-Grotesk, but IMO we should use an open-source font for an open Web standard. I'm liking these so far:

• Nimbus Sans L Bold
• Roboto Black Italic
• Tex Gyre Heros Bold Italic
• Liberation Sans Bold

Add predictive requesting using Service Worker

Add avatars to contributing section for people who help out

Help recognize and highlight individual contributions to rocks.

ie:
https://www.consul.io/community.html (people section)
https://www.packer.io/community/ (people section)
https://www.terraform.io/community.html
https://teamweek.com/about.html

brought up in #35

Decide on (and document) Slack chat room name

• https://webvr.slack.com/messages/webvr-rocks
• https://webvr.slack.com/messages/webvrrocks
• https://webvr.slack.com/messages/rocks

Thoughts?

Ensure accessibility (`aria-` attributes, WCAG, Section 508, etc.) is up to snuff

https://www.w3.org/WAI/GL/wiki/Using_ARIA_landmarks_to_identify_regions_of_a_page, etc.

Stub out privacy policy

Create chat.webvrr.rocks redirects

Using slacknow (slackin) for webvr.slack.com.

Use more helpful text for navigational links

I like how Surge does their Help pages with the nice sidebar of common tasks/questions (FAQ-style).

At least at desktop widths, we should consider doing a similar treatment. I think there could be a sweet balance between information overload and having people get frustrated/lost/having to resort to Google searching.

Add Contributing section

Add Blog section

I like the general layout of http://fabbula.com/, perhaps with less scrolling though. Use more horizontal than vertical space.

Enable community remixing of WebVR logo (and create a list of alternative WebVR logos in the wild)

I like the idea of having a pattern to start and people can riff off of it à la the JS logo + its registry of alternative logos in the wild:

Document Unity export options

There is official WebVR Player export support coming soon from Unity. Let's document (but with a disclaimer, not particularly advocating for) exporting from Unity, if people choose to do that (and they do).

Introductory blog post:

• https://hacks.mozilla.org/2016/05/exporting-an-indie-unity-game-to-webvr/

Collection of information from @if1live:

• http://unitylist.com/r/5bx/unity-scene-web-exporter
• http://libsora.so/unity-scene-web-exporter/
• https://github.com/if1live/unity-scene-web-exporter

Identify key community forums that should fall under code of conduct

WebVR mailing list
WebVR Slack channels
WebVR rocks Github repositories

What about:
What would be the official WebVR org?
A-Frame?
Stack Overflow?

Add site feedback mechanisms

Perhaps à la https://github.com/WebVRRocks/webvrrocks/blob/master/OUTLINE.md#feedback

Document Oculus Rift instructions

Make nav responsive on mobile

Ideally, we show only the important content. Perhaps even a <select> with the nav items on might work fine on mobile (iOS and Android, at least, style <select> drop-down menus very nicely).

I hate using hamburger menus for primary navigation, but if someone must, try using this third-party vanilla JS+CSS component.

Guide: Create a simple A-Frame scene from Blender models found on Sketchfab

Write a 5-minute guide of how to find a Blender model from [Sketchfab](https://sketchfab.com/] and export to a basic A-Frame scene outlining these steps:

1. Find a "downloadable" model on Sketchfab that comes in a Blender format (e.g., this Oculus Rift CV1 seems like a good start). (Link to where find other Blender models and free, downloadable models on SketchFab).
2. Show a video (you can use QuickTime Player on macOS to record) of how to unzip/extract the .zip files (on Windows and/or macOS).
3. Show how to download and install Blender.
4. Launch Blender and import the raw Blender file.
5. Export the Blender file to an appropriate format (likely OBJ/MTL or COLLADA).
6. Show how to drop the create a scene locally w/ a simple local dev server (using Prepos, Mongoose, python -m HTTPServer/python3 -m http.server, jus, http-server, etc.).
7. (Optional): Show how to deploy to a simple web host such as Neocities.

---

Inspiration:

• https://github.com/ngokevin/aframe-blender-projects
• https://medium.com/@bnolan/using-thingiverse-files-in-a-frame-50641ca3f721#.9gxpb0xjo
• https://surge.sh/help/getting-started-with-surge

Related issues:

• #49 - Guide: Exporting Thingiverse Models to A-Frame

Add Service Worker (with pass-through cache) for optimal perf/reliability

• https://github.com/321C4/aframe-link-demo/blob/master/index.html#L11
• https://github.com/321C4/aframe-link-demo/blob/master/sw-load.js
• https://github.com/321C4/aframe-link-demo/blob/master/sw.js
• https://github.com/cvan/sherpy

Enhancement: Consider upstreaming a patch to sherpy that wraps jus + the Service Worker hash-change magic to make things clean and maintainable.

Flesh out Getting Started page

I really like how Surge's Getting Started guide walks people through.

And Surge's Tour is a great example of a possible "Overview" page. (Or we could merge the two.)

Here's an example of a possible alternative approach to "Getting Started": https://get.slack.help/hc/en-us/categories/202622877-Slack-Guides

Bullets broken