Download as PDF, PPTX
![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;
}
}
}](https://cdn.statically.io/img/image.slidesharecdn.com/introductiontowebglwebvr-151017085005-lva1-app6892/75/Introduction-to-WebGL-and-WebVR-19-2048.jpg)
Uploaded byDaosheng Mu
Introduction to WebGL and WebVR
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.
Introduction to WebGL and WebVR
- 1. Introduction to WebGL &WebVR Daosheng Mu 2015.10.17
- 2.
- 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.
- 5.
- 7. 3D Graphics API Framework WebGL Three.js ApplicationMy 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.
- 10. Toolkits ● Firefox DeveloperEdition ● WebGLInspector ● ShaderEditor
- 11. Let’s program NOW! https://goo.gl/rZnHpv gitclone git@github.com:daoshengmu/WebGL-TPE-Meetup.git
- 12.
- 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 needto render two views of the scene.
- 22. Translation of the lefteye 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 displaysimage 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 gitclone 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 yourattention