„The ultimate display would, of course, be a room within which the computer can control the existence of matter. A chair displayed in such a room would be good enough to sit in. Handcuffs displayed in such a room would be confining, and a bullet displayed in such a room would be fatal. With appropriate programming such a display could literally be the Wonderland into which Alice walked.“ —Ivan Sutherland
VR Display // If a display is available, use it to present the scene if(displays.length > 0) { vrDisplay = displays[0]; // Now we have our VRDisplay // object and can do what we want with it }
Example var frameData = new VRFrameData(); var vrDisplay; navigator.getVRDisplays().then(function (displays) { vrDisplay = displays[0]; console.log('Display found'); // Starting the presentation when the button // is clicked: It can only be called in response to a user gesture btn.addEventListener('click', function () { vrDisplay.requestPresent([{ source: canvas }]).then(function () { drawVRScene(); }); }); });
Example cont. function drawVRScene() { // WebVR: Request the next frame of the animation vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene); // Populate frameData with the data of the next frame to display vrDisplay.getFrameData(frameData); // You can get the position, orientation, etc. // of the display from the current frame's pose curFramePose is a VRPose object var curFramePose = frameData.pose; var curPos = curFramePose.position; var curOrient = curFramePose.orientation; // Here happens some WebGL Stuff! // WebVR: Indicate that we are ready to present the rendered frame to the VR display vrDisplay.submitFrame(); }
Stereoscopic Rendering in WebGL gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); var projectionMatrixLocation = gl.getUniformLocation(shaderProgram, "projMatrix"); var viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix"); // WebVR: Render the left eye‚ÀÙs view to the left half of the canvas gl.viewport(0, 0, canvas.width * 0.5, canvas.height); gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.leftProjectionMatrix); gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix); drawGeometry(); // WebVR: Render the right eye‚ÀÙs view to the right half of the canvas gl.viewport(canvas.width * 0.5, 0, canvas.width * 0.5, canvas.height); gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.rightProjectionMatrix); gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix); drawGeometry(); function drawGeometry() { // draw the view for each eye }
Import WebVR polyfill Set up camera Initialize scene Set up lights Declare and pass canvas Install VREffect Listen to window resize Create render loop Instantiate renderer Figure out responsiveness Preload assets Deal with metatags and mobile
Some use cases • Immersive reportages • 3D Handbooks/Instructions • Panorama view without stupid plugins • Marketing instrument. (Supplements in magazines) • simple Games
WebVR is amazing… … but it’s not ready (Editors Draft, Browser support) … HMD Devices are not cheap. (Except: Google Cardboard) … and has high Hardware Requirements! … and it’s a pleasure to create content! … and WebXR is getting more amazing!
casarock
tenforward
yoyakoba
taka2noda
shogo452
oracle4engineer
bcantrill
m3hiro3
matyuda
ojun9
yoshikikomoriya
hcrane
hayaosuzuki
addyosmani
quramy
jacobian
shpigford
palkan
philhawksworth
cromwellryan
marcelosomers
matthewcrist
wjessup
brettharned
caitiem20