We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS



VRFrameData コンストラクタは、 VRFrameData オブジェクトのインスタンスを作成します。


var myFrameData = new VRFrameData();



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() {        

// 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

  // 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.


  // 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);

  // 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);

  function drawGeometry() {
    // draw the view for each eye 


  // WebVR: Indicate that we are ready to present the rendered frame to the VR display

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


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


機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 なし あり



なし ? ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 なし561 2 3 4 ? ? ? ?6.0

1. Only works in an experimental version of Chrome. (Other builds won't return any devices when Navigator.getVRDisplays() is invoked.)

2. Daydream View supported in Chrome 56.

3. Google Cardboard supported in Chrome 57.

4. From version 56: this feature is behind the WebVR preference. To change preferences in Chrome, visit chrome://flags.

5. Windows support was enabled in Firefox 55.

6. macOS support was enabled in Firefox 60.



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