WebGL enables developers to create rich, console-quality experiences that render in real time on mobile devices and desktop browsers. Almost universal browser and device support makes it a perfect approach for web developers wanting to create incredible VR experiences. Here, we show you how to get started with WebVR. At the bottom of this article, you'll find some helpful resources to further your knowledge.
01. Enable WebVR flag in Chrome
WebVR is still an experimental technology and requires HTTPS to run on your server. It won’t run on mobile devices without a polyfill.github.com/immersive-web/webvr-polyfill. However, you can run content locally in Chrome for testing and building. Be sure to enable the Chrome WebVR flag. Type chrome://flags/enable-webvr into your URL browser, and then click enable to activate it. You may need to restart Chrome as well.
02. Install the WebVR API Emulation plugin
In order to test locally on your desktop and avoid the need for a device, there is a great plugin that you can use on Chrome by clicktorelease. The plugin will emulate a VR headset for you and allow you to move and rotate the headset virtually (get it here).
03. Open device toolbar in developer tools
To emulate a mobile device or headset, it works best to use the device emulation in Chrome tools. Open the developer tools in Chrome, and toggle on the device toolbar to see mobile view, rotate to landscape and select favourite phone emulation.
04. Create a basic HTML file
05. Include three.js classes
Include a link to the three.js library in the head of your file – either hosted externally, or download it from the three.js repository. You’ll also need the new WebVR class and BoxLineGeometry class for this tutorial. You can find the library and supporting classes here. Note: the code in this tutorial has been tested on the latest release of three.js v99.
06. Add global variables
Between the script tags for the code, add the following global variables to globally access the camera, scene, renders, objects and raycaster. Also add a HIT variable to keep track of objects that are intersected by the gaze of the camera. This will demonstrate how to know what a user is looking at in VR.
07. Create a 3D scene
You’re going to add a basic 3D scene, which will be the container for your objects. The scene is the stage that will render with the camera. All 3D presentations will have a scene or stage of some form. What is in that stage and in view of the camera is what the user will see. Add the following code to add a scene:
08. Add a perspective camera
Next, you need to add a camera. You’ll use the perspective camera, meant for 3D scenes. The first attribute is the field of view of the camera. The second is the aspect ratio (width/height). Then you can indicate the near clipping plane and the far clipping plane distances, which define what is to be visible to the camera.
09. Add a renderer and canvas element
The renderer handles the drawing of the objects in your scene that are visible to the camera. Set the antialias property to true to get smooth edges on the object. The renderer creates a domElement, which is actually an HTML <canvas> element. You can then append to the body. Note the use of the new VR-enabled flag of the renderer.
10. Add camera crosshair
To help users orient to the camera's point of focus, it is good practice to add a crosshair or targeting icon in front of the camera. You can add it directly to the camera object so it’s always where it should be.
11. Create a VR room object (optional)
Next, create a simple room object. This is nice to give the user a sense of orientation in the VR world. It creates a simple room box with lines to indicate the walls, floor and ceiling.
12. Add lights to the scene
To light the scene, we’ll use a simple hemisphere light and a directional light. It’ll give a nice ambient visibility and some realistic shading from a uniform light source as well.
13. Create some objects
You’re going to fill the room with objects next. Apply them randomly around the room. You will also set the rotation and scale randomly for variety. You can add a little bit more code in the next step, where it says create orbit attributes to enable some custom orbit paths.
14. Add orbit attributes to objects
To enable some nice random orbiting motion, and to keep the objects from ‘escaping the room’ we’ll assign some initial angle data (in radians) and a distance. It enables a simple way to animate the objects in the render loop after.
15. Add a window resize handler
As we test our WebVR app, we’ll be resizing the screen, moving it around, and so on. It’s a good idea to have a handler that adjusts the dimensions of the render area and updates things to keep it filling the screen properly and looking nice.
16. Create the WebVR button
Three.js’ new WebVR class includes a WebVR button, which handles toggling in and out of VR mode for us. It also handles if the device doesn’t support VR mode. You can include it with this simple code:
17. Start the VR animation loop
Typically, you’d be using the requestAnimationFrame to handle the render loop, but in VR you have to use a different loop handler to ensure everything is ready to render and that you avoid latency and render issues. Instead, use the new setAnimationLoop and pass in your render function.
18. Create the render function
Next, create a render function. If you didn’t want to animate your objects or test for the camera/crosshair intersecting with objects, you could just use the following code:
19. Test for intersections
To enable testing for objects intersecting the ray traced from the camera into Z space, add the following code to your render loop where you commented it in the last step:
20. Animate objects along orbits
Next, you can animate your objects along their orbit paths using this code:
21. Render the WebVR scene
Finally, you can render out your scene using the usably render functions. If you haven’t added this line already, do it now. Once you’ve added this, you can test it all out and should see a WebVR scene rendering in your browser. You can also check it out on your mobile device or VR headset.
Getting started in WebVR can be overwhelming. We’ve assembled some examples of sites using WebVR and resources to help you get rolling.
You probably already know this site because of its amazing gallery of assets, but it also has a WebVR mode that enables you to navigate in VR.
This is a rock-solid framework for AR and VR. It handles the pains of fallbacks and device support for you, including enabling you to render in your browser for testing. It even abstracts away creation of common 3D objects.
Since WebVR is an emerging technology it is a good idea to keep up with the latest developments. You need to know which devices are supported and under what conditions. This site will help you stay up to date. There's a page dedicated to examples, too.
from Creative Bloq http://www.creativebloq.com/how-to/get-started-with-webvr