introduction to webgl and webvr
TRANSCRIPT
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
Editor’s Draft
WebVR
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 });
}
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