This document discusses WebGL and WebVR. It provides an introduction and overview of WebGL 1.0 and 2.0, including key features and APIs. It also covers how to get VR devices and handle rendering for VR using WebVR, including handling eye parameters, view matrices, and timewarp. Code examples are provided for common VR rendering tasks. The document concludes by noting the rapid growth of VR and encourages developing with these web technologies.

1. Introduction to
WebGL & WebVR
Daosheng Mu
2015.10.17

2. Last Revisions
WebGL

3. WebGL
● WebGL 1.0
○ Closely to the OpenGL ES 2.0
API
○ 8 texture units
○ Must power of two images
○ Maximum GLSL Token Size: 256
chars
○ Not support compressed texture
○ Nesting of Structures in GLSL:
Level 1
● WebGL 2.0
○ Closely to OpenGL ES 3.0 API
○ 32 texture units
○ Supported for non-power-of-two
images.
○ Maximum GLSL Token Size:
1024 chars.
○ Support compressed texture
○ Nesting of Structures in GLSL:
Level 4

4. WebGL
canvas.getContext(‘webgl’)
|| canvas.getContext(‘experimental-webgl’);

5. View Frustum

7. 3D Graphics API
Framework
WebGL
Three.js
Application My Game
● Rendering
● Hardware-accelerated
● 3D model loader
● Material
● Camera
● Gameplay
● Controls

8. Camera control document.addEventListener(
'mousemove', onMouseMove, false );
document.addEventListener(
'mousedown', onMouseDown, false );
document.addEventListener( 'mouseup',
onMouseUp, false );
document.addEventListener( 'keydown',
onKeyDown, false );
document.addEventListener( 'keyup',
onKeyUp, false );
For example:
function onKeyDown() {
camera.translateZ( moveSpeed );
}

9. Demo:
http://dsmu.
me/ConsoleGameOnWeb/s
ponza.html

10. Toolkits
● Firefox Developer Edition
● WebGLInspector
● ShaderEditor

11. Let’s program NOW!
https://goo.gl/rZnHpv
git clone git@github.com:daoshengmu/WebGL-TPE-Meetup.git

12. Editor’s Draft
WebVR

15. Samsung Gear VR - Dec, 2014

16. Oculus Rift DK2 - July, 2014
Head-Mounted Display(HMD):
Gyroscope, Accelerometer,
Magnetometer
Position Tracker:
Near Infrared CMOS Sensor

17. MozVR - Nov. 2014
● WebVR
● Has Landed in Firefox Nightly
● Non-e10s support
● about:config
○ dom.vr.enabled;true
● https://github.com/MozVR/
● http://mozvr.com/projects/polarsea/

18. if ( navigator.getVRDevices ) {
var vrPromise = navigator.getVRDevices();
vrPromise.then(vrDeviceCallback);
}
gfxVROculus
gfxVRCardboard
GetAllHMDs()
gfx::VRHMDManager

19. function vrDeviceCallback( devices ) {
if (devices.length) {
for (var i = 0; i < devices.length; ++i) {
if (devices[i] instanceof HMDVRDevice) {
vrHMD = devices[i];
}
if (vrHMD && devices[i] instanceof PositionSensorVRDevice
&& devices[i]. hardwareUnitId == vrHMD.hardwareUnitId)
{
vrPosSensor = devices[i];
// We just want to get the first VR device.
break;
}
}
}

21. VR applications need to render two views of the scene.

22. Translation of
the left eye
FOV of the left eye FOV of the right eye
Translation of
the right eye
VR applications need to render two views of the scene.

23. var leftEyeParams = vrHMD.getEyeParameters(‘left’);
var rightEyeParams = vrHMD.getEyeParameters(‘right’);
// In meters
var leftEyeTranslation = leftEyeParams.eyeTranslation;
var rightEyeTranslation = rightEyeParams.eyeTranslation;
var leftEyeFOV = leftEyeParams.recommendedFieldOfView;
var rightEyeFOV = rightEyeParams.recommendedFieldOfView;

24. function setViewport( eyeParams ) {
var renderRect = eyeParams.renderRect;
gl.setViewport( renderRect.x, renderRect.y, renderRect.w,
renderRect.h );
}
funtion setViewMatrix( viewMtx, eyeTranslation ) {
viewMtx.translate( eyeOffset );
gl.uniformMatrix4fv( viewMatUniform, false, viewMat );
}
function setProjMatrix( eyeFov ) {
var projMtx = getProjMtxFromEyeFov( eyeFov );
gl.uniformMatrix4fv( projMatUniform, false, projMtx );
}

25. function onRequestAnimationFrame() {
if ( vrPosSensor ) {
var state = vrPosSensor. getState();
if ( state.hasOrientation ) {
camera.quaternion.set(
state.orientation.x,
state.orientation.y,
state.orientation.z,
state.orientation.w);
}
if ( state.hasPosition ) {
}
}
render( camera );
}
function render( camera ) {
// Left eye
setViewport( leftEyeParams );
setProjMatrix( leftEyeFOV );
setViewMatrix( camera.
matrixWorld, leftEyeTranslation
);
drawScene();
// Right eye
setViewport( rightEyeParams );
setProjMatrix( rightEyeFOV );
setViewMatrix( camera.
matrixWorld, rightEyeTranslation
);
drawScene();
}

26. ● Automatically displays image on HMD
● Correct pincushion distortion for your device
● Correct framerate and Timewarp! (Windows+Oculus)
● Chromatic aberration correction
function enterVRFullscreen(canvas) {
canvas.requestFullscreen({
vrDisplay: gHmd });
}

27. Let’s program NOW!
https://goo.gl/Wtxraq
git clone git@github.com:daoshengmu/WebGL-TPE-Meetup.git

28. Conclusion
50 million users
● Made in 1920
● Took 38 yrs
● Made in 1939
● Took 14 yrs
● Made in 1991
● Took 4 yrs
● Made in 2014
● Took 18 months

29. Thanks for your attention