VRDisplay.requestAnimationFrame()

Экспериментальная возможность: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Метод requestAnimationFrame() интерфейса VRDisplay является специфичной реализацией метода Window.requestAnimationFrame и принимает в качестве аргумента колбэк-функцию. Эта функция будет вызвана, когда объект типа VRDisplay будет готов отобразить новый кадр сцены:

Если в этот момент объект типа VRDisplay не находится в процессе отображения сцены, то вызов этой функции эквивалентен вызову Window.requestAnimationFrame.
Если объект типа VRDisplay находится в состоянии отображения сцены, вызов колбэк-функции происходит с собственной частотой обновления устройства, представленного этим объектом.

Синтаксис

var handle = vrDisplayInstance.requestAnimationFrame(callback);

Параметры

callback: Колбэк-функция, которая будет вызвана когда объект типа VRDisplay будет готов отобразить новый кадр сцены.

Возвращаемое значение

A long representing the handle of the requestAnimationFrame() call. This can then be passed to a VRDisplay.cancelAnimationFrame() call to unregister the callback.

Examples

var frameData = new VRFrameData();
var vrDisplay;
navigator.getVRDisplays().then(function(displays) {
 vrDisplay = displays[0];
 console.log('Display found');
 // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
 btn.addEventListener('click', function() {
 vrDisplay.requestPresent([{ source: canvas }]).then(function() {
 drawVRScene();
 });
 });
});
// WebVR: Draw the scene for the WebVR display.
function drawVRScene() {
 // WebVR: Request the next frame of the animation
 vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene);
 // Populate frameData with the data of the next frame to display
 vrDisplay.getFrameData(frameData);
 // You can get the position, orientation, etc. of the display from the current frame's pose
 var curFramePose = frameData.pose;
 var curPos = curFramePose.position;
 var curOrient = curFramePose.orientation;
 // Clear the canvas before we start drawing on it.
 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 // WebVR: Create the required projection and view matrix locations needed
 // for passing into the uniformMatrix4fv methods below
 var projectionMatrixLocation = gl.getUniformLocation(shaderProgram, "projMatrix");
 var viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix");
 // WebVR: Render the left eye’s view to the left half of the canvas
 gl.viewport(0, 0, canvas.width * 0.5, canvas.height);
 gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.leftProjectionMatrix);
 gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix);
 drawGeometry();
 // WebVR: Render the right eye’s view to the right half of the canvas
 gl.viewport(canvas.width * 0.5, 0, canvas.width * 0.5, canvas.height);
 gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.rightProjectionMatrix);
 gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix);
 drawGeometry();
 function drawGeometry() {
 // draw the view for each eye
 }
 ...
 // WebVR: Indicate that we are ready to present the rendered frame to the VR display
 vrDisplay.submitFrame();
}

Примечание: You can see this complete code at raw-webgl-example.