Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to WebGL and WebVR

1,039 views

Published on

Introduction to how to leverage WebVR API through WebGL.

Published in: Technology
  • Be the first to comment

Introduction to WebGL and WebVR

  1. 1. Introduction to WebGL & WebVR Daosheng Mu 2015.10.17
  2. 2. Last Revisions WebGL
  3. 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. 4. WebGL canvas.getContext(‘webgl’) || canvas.getContext(‘experimental-webgl’);
  5. 5. View Frustum
  6. 6. 3D Graphics API Framework WebGL Three.js Application My Game ● Rendering ● Hardware-accelerated ● 3D model loader ● Material ● Camera ● Gameplay ● Controls
  7. 7. 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 ); }
  8. 8. Demo: http://dsmu. me/ConsoleGameOnWeb/s ponza.html
  9. 9. Toolkits ● Firefox Developer Edition ● WebGLInspector ● ShaderEditor
  10. 10. Let’s program NOW! https://goo.gl/rZnHpv git clone git@github.com:daoshengmu/WebGL-TPE-Meetup.git
  11. 11. Editor’s Draft WebVR
  12. 12. Samsung Gear VR - Dec, 2014
  13. 13. Oculus Rift DK2 - July, 2014 Head-Mounted Display(HMD): Gyroscope, Accelerometer, Magnetometer Position Tracker: Near Infrared CMOS Sensor
  14. 14. 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/
  15. 15. if ( navigator.getVRDevices ) { var vrPromise = navigator.getVRDevices(); vrPromise.then(vrDeviceCallback); } gfxVROculus gfxVRCardboard GetAllHMDs() gfx::VRHMDManager
  16. 16. 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; } } }
  17. 17. VR applications need to render two views of the scene.
  18. 18. 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.
  19. 19. 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;
  20. 20. 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 ); }
  21. 21. 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(); }
  22. 22. ● 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 }); }
  23. 23. Let’s program NOW! https://goo.gl/Wtxraq git clone git@github.com:daoshengmu/WebGL-TPE-Meetup.git
  24. 24. 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
  25. 25. Thanks for your attention

×