VRDisplay.requestAnimationFrame()

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

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

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

Синтаксис

var handle = vrDisplayInstance.requestAnimationFrame(callback);

Параметры

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();
}

Note: You can see this complete code at raw-webgl-example.

Specifications

Specification Status Comment
WebVR 1.1
Определение 'requestAnimationFrame()' в этой спецификации.
Черновик Initial definition

Browser compatibility

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
requestAnimationFrame
ЭкспериментальнаяУстаревшая
Chrome Нет поддержки НетEdge Полная поддержка 15Firefox Полная поддержка 55
Замечания
Полная поддержка 55
Замечания
Замечания Windows support was enabled in Firefox 55.
Полная поддержка 64
Замечания
Замечания macOS support was enabled in Firefox 64.
IE Нет поддержки НетOpera ? Safari ? WebView Android Нет поддержки НетChrome Android Полная поддержка 56
Замечания Отключено
Полная поддержка 56
Замечания Отключено
Замечания Only works in an experimental version of Chrome. (Other builds won't return any devices when Navigator.getVRDisplays() is invoked.)
Замечания Daydream View supported in Chrome 56.
Замечания Google Cardboard supported in Chrome 57.
Отключено From version 56: this feature is behind the WebVR preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Полная поддержка 55Opera Android ? Safari iOS ? Samsung Internet Android Полная поддержка 6.0

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Устаревшая. Не следует использовать в новых веб-сайтах
Устаревшая. Не следует использовать в новых веб-сайтах
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.

See also