これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

WebVR APIVRFrameDataインタフェースは、VRシーンの1つのフレームを描画するのに必要となる全ての情報を表現します。

コンストラクタ

VRFrameData.VRFrameData()
VRFrameData オブジェクトインスタンスを作成します。

プロパティ

VRFrameData.leftProjectionMatrix 読取専用
Float32Array型の要素を持つ4行4列の行列であり、左目の描画に利用される射影を表します。
VRFrameData.leftViewMatrix 読取専用
Float32Array型の要素を持つ4行4列の行列であり、左目の描画に利用されるビュー変換を表します。
VRFrameData.pose 読取専用
現在のVRFrameData.timestampの値が示す時刻での、VRDisplayVRPoseです。
VRFrameData.rightProjectionMatrix 読取専用
Float32Array型の要素を持つ4行4列の行列であり、右目の描画に利用される射影を表します。
VRFrameData.rightViewMatrix 読取専用
Float32Array型の要素を持つ4行4列の行列であり、右目の描画に利用されるビュー変換を表します。
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.

仕様

仕様 状況 コメント
WebVR 1.1
VRDisplayEvent の定義
ドラフト 初版

ブラウザ互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
実験的
Chrome 未対応 なしEdge 完全対応 ありFirefox 完全対応 55
補足
完全対応 55
補足
補足 Windows support was enabled in Firefox 55.
完全対応 63
補足
補足 macOS support was enabled in Firefox 63.
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.
Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 6.0
VRFrameData() constructor
実験的
Chrome 未対応 なしEdge 完全対応 ありFirefox 完全対応 55
補足
完全対応 55
補足
補足 Windows support was enabled in Firefox 55.
完全対応 63
補足
補足 macOS support was enabled in Firefox 63.
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.
Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 6.0
leftProjectionMatrix
実験的
Chrome 未対応 なしEdge 完全対応 15Firefox 完全対応 55
補足
完全対応 55
補足
補足 Windows support was enabled in Firefox 55.
完全対応 63
補足
補足 macOS support was enabled in Firefox 63.
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.
Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 6.0
leftViewMatrix
実験的
Chrome 未対応 なしEdge 完全対応 15Firefox 完全対応 55
補足
完全対応 55
補足
補足 Windows support was enabled in Firefox 55.
完全対応 63
補足
補足 macOS support was enabled in Firefox 63.
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.
Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 6.0
pose
実験的
Chrome 未対応 なしEdge 完全対応 15Firefox 完全対応 55
補足
完全対応 55
補足
補足 Windows support was enabled in Firefox 55.
完全対応 63
補足
補足 macOS support was enabled in Firefox 63.
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.
Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 6.0
rightProjectionMatrix
実験的
Chrome 未対応 なしEdge 完全対応 15Firefox 完全対応 55
補足
完全対応 55
補足
補足 Windows support was enabled in Firefox 55.
完全対応 63
補足
補足 macOS support was enabled in Firefox 63.
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.
Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 6.0
rightViewMatrix
実験的
Chrome 未対応 なしEdge 完全対応 15Firefox 完全対応 55
補足
完全対応 55
補足
補足 Windows support was enabled in Firefox 55.
完全対応 63
補足
補足 macOS support was enabled in Firefox 63.
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.
Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 6.0
timestamp
実験的
Chrome 未対応 なしEdge 完全対応 15Firefox 完全対応 55
補足
完全対応 55
補足
補足 Windows support was enabled in Firefox 55.
完全対応 63
補足
補足 macOS support was enabled in Firefox 63.
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.
Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 6.0

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連項目

ドキュメントのタグと貢献者

このページの貢献者: e53e04ac
最終更新者: e53e04ac,