Introduction to WebGL & WebVR

Daosheng Mu2015.10.17

Last Revisions

WebGL

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

WebGL

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

View Frustum

3D Graphics API

Framework

WebGL

Three.js

Application My Game

● Rendering● Hardware-accelerated

● 3D model loader● Material● Camera

● Gameplay● Controls

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 );

}

Demo:

http://dsmu.me/ConsoleGameOnWeb/sponza.html

Toolkits

● Firefox Developer Edition● WebGLInspector● ShaderEditor

Let’s program NOW!

https://goo.gl/rZnHpvgit clone git@github.com:daoshengmu/WebGL-TPE-Meetup.git

Editor’s Draft

WebVR

Samsung Gear VR - Dec, 2014

Oculus Rift DK2 - July, 2014

Head-Mounted Display(HMD): Gyroscope, Accelerometer, Magnetometer

Position Tracker: Near Infrared CMOS Sensor

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/

if ( navigator.getVRDevices ) { var vrPromise = navigator.getVRDevices(); vrPromise.then(vrDeviceCallback);}

gfxVROculus

gfxVRCardboardGetAllHMDs()

gfx::VRHMDManager

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; } } }

VR applications need to render two views of the scene.

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.

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

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 );

}

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 eyesetViewport( leftEyeParams );

setProjMatrix( leftEyeFOV );

setViewMatrix( camera.

matrixWorld, leftEyeTranslation

);

drawScene();

// Right eyesetViewport( rightEyeParams );

setProjMatrix( rightEyeFOV );

setViewMatrix( camera.

matrixWorld, rightEyeTranslation

);

drawScene();

}

● 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 });

}

Let’s program NOW!

https://goo.gl/Wtxraqgit clone git@github.com:daoshengmu/WebGL-TPE-Meetup.git

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

Thanks for your attention