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