VRFrameData

Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского

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

Интерфейс VRFrameData API WebVR представляет всю информацию, необходимую для визуализации одного кадра сцены Виртуальной реальности; сконструирован с помощью VRDisplay.getFrameData ().

Конструктор

VRFrameData.VRFrameData()
Создает экземпляр объекта VRFrameData.

Свойства

VRFrameData.leftProjectionMatrix Только для чтения
Параметр Float32Array, представляющий матрицу 4x4, которая описывает проекцию, которая будет использоваться для рендеринга левого глаза.
VRFrameData.leftViewMatrix Только для чтения
Параметр Float32Array, представляющий матрицу 4x4, которая описывает преобразование вида, которое будет использоваться для визуализации для левого глаза.
VRFrameData.pose Только для чтения
Параметр VRPose VRDisplay в текущем VRFrameData.timestamp.
VRFrameData.rightProjectionMatrix Только для чтения
Параметр Float32Array, представляющий матрицу 4x4, которая описывает проекцию, которая будет использоваться для рендеринга для правого глаза.
VRFrameData.rightViewMatrix Только для чтения
Float32Array, представляющий матрицу 4x4, которая описывает преобразование вида, которое будет использоваться для визуализации для правого глаза.
VRFrameData.timestamp Только для чтения
Постоянно увеличивающееся значение отметки времени, представляющее время, когда произошло обновление кадра.

Примеры

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
  // curFramePose is a VRPose object
  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.

Спецификации

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

Совместимость браузера

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
VRFrameData
ЭкспериментальнаяУстаревшая
Chrome Нет поддержки НетEdge Нет поддержки ≤18 — 79Firefox Полная поддержка 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 — 80
Замечания Отключено
Нет поддержки 56 — 80
Замечания Отключено
Замечания 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 until version 80 (exclusive): 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
Замечания
Полная поддержка 6.0
Замечания
Замечания Google Cardboard supported in Samsung Internet 7.0.
VRFrameData() constructor
ЭкспериментальнаяУстаревшая
Chrome Нет поддержки НетEdge Нет поддержки ≤18 — 79Firefox Полная поддержка 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 — 80
Замечания Отключено
Нет поддержки 56 — 80
Замечания Отключено
Замечания 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 until version 80 (exclusive): 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
Замечания
Полная поддержка 6.0
Замечания
Замечания Google Cardboard supported in Samsung Internet 7.0.
leftProjectionMatrix
ЭкспериментальнаяУстаревшая
Chrome Нет поддержки НетEdge Нет поддержки 15 — 79Firefox Полная поддержка 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 — 80
Замечания Отключено
Нет поддержки 56 — 80
Замечания Отключено
Замечания 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 until version 80 (exclusive): 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
Замечания
Полная поддержка 6.0
Замечания
Замечания Google Cardboard supported in Samsung Internet 7.0.
leftViewMatrix
ЭкспериментальнаяУстаревшая
Chrome Нет поддержки НетEdge Нет поддержки 15 — 79Firefox Полная поддержка 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 — 80
Замечания Отключено
Нет поддержки 56 — 80
Замечания Отключено
Замечания 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 until version 80 (exclusive): 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
Замечания
Полная поддержка 6.0
Замечания
Замечания Google Cardboard supported in Samsung Internet 7.0.
pose
ЭкспериментальнаяУстаревшая
Chrome Нет поддержки НетEdge Нет поддержки 15 — 79Firefox Полная поддержка 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 — 80
Замечания Отключено
Нет поддержки 56 — 80
Замечания Отключено
Замечания 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 until version 80 (exclusive): 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
Замечания
Полная поддержка 6.0
Замечания
Замечания Google Cardboard supported in Samsung Internet 7.0.
rightProjectionMatrix
ЭкспериментальнаяУстаревшая
Chrome Нет поддержки НетEdge Нет поддержки 15 — 79Firefox Полная поддержка 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 — 80
Замечания Отключено
Нет поддержки 56 — 80
Замечания Отключено
Замечания 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 until version 80 (exclusive): 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
Замечания
Полная поддержка 6.0
Замечания
Замечания Google Cardboard supported in Samsung Internet 7.0.
rightViewMatrix
ЭкспериментальнаяУстаревшая
Chrome Нет поддержки НетEdge Нет поддержки 15 — 79Firefox Полная поддержка 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 — 80
Замечания Отключено
Нет поддержки 56 — 80
Замечания Отключено
Замечания 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 until version 80 (exclusive): 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
Замечания
Полная поддержка 6.0
Замечания
Замечания Google Cardboard supported in Samsung Internet 7.0.
timestamp
ЭкспериментальнаяУстаревшая
Chrome Нет поддержки НетEdge Нет поддержки 15 — 79Firefox Полная поддержка 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 — 80
Замечания Отключено
Нет поддержки 56 — 80
Замечания Отключено
Замечания 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 until version 80 (exclusive): 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
Замечания
Полная поддержка 6.0
Замечания
Замечания Google Cardboard supported in Samsung Internet 7.0.

Легенда

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

Дополнительно

  • WebVR API homepage
  • MozVr.com — демонстрационные материалы, материалы доступные для загрузки и другие ресурсы команды Mozilla VR team.