WebVR API の使用

// WebVR 変数

const frameData = new VRFrameData();
let vrDisplay;
const btn = document.querySelector(".stop-start");
let normalSceneFrame;
let vrSceneFrame;

const poseStatsBtn = document.querySelector(".pose-stats");
const poseStatsSection = document.querySelector("section");
poseStatsSection.style.visibility = "hidden"; // 最初は非表示にする

const posStats = document.querySelector(".pos");
const orientStats = document.querySelector(".orient");
const linVelStats = document.querySelector(".lin-vel");
const linAccStats = document.querySelector(".lin-acc");
const angVelStats = document.querySelector(".ang-vel");
const angAccStats = document.querySelector(".ang-acc");
let poseStatsDisplayed = false;

const canvas = document.getElementById("gl-canvas");

initWebGL(canvas); // GL コンテキストを初期化する

// ここに WebGL のセットアップコードを記述する

// WebVR を使わずに通常どおりシーンを描画する。WebVR がなくてもブラウザーでシーンを見られるようにする

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
drawScene();

// WebVR: WebVR に対応しているか確認する
if (navigator.getVRDisplays) {
  console.log("WebVR 1.1 supported");
  // ...
} else {
  console.log("WebVR API not supported by this browser.");
}

// コンピューターに接続されているディスプレイを取得する
navigator.getVRDisplays().then((displays) => {
  // ディスプレイがあれば、シーンの表示に使用する
  if (displays.length > 0) {
    vrDisplay = displays[0];
    console.log("Display found");
    // ...
  }
});

// ボタンのクリック時に表示を開始する。ユーザーの操作に応じてのみ呼び出せる
btn.addEventListener("click", () => {
  if (btn.textContent === "Start VR display") {
    vrDisplay.requestPresent([{ source: canvas }]).then(() => {
      console.log("Presenting to WebVR display");
      // ...
    });
  } else {
    // ...
  }
});

vrDisplay.requestPresent([{ source: canvas }]).then(() => {
  // ...
  // キャンバスのサイズを vrDisplay のビューポートに合わせる

  const leftEye = vrDisplay.getEyeParameters("left");
  const rightEye = vrDisplay.getEyeParameters("right");

  canvas.width = Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2;
  canvas.height = Math.max(leftEye.renderHeight, rightEye.renderHeight);
  // ...
});

vrDisplay.requestPresent([{ source: canvas }]).then(() => {
  // ...
  // 通常の表示を停止し、VR 表示を開始する
  window.cancelAnimationFrame(normalSceneFrame);
  drawVRScene();
  // ...
});

vrDisplay.requestPresent([{ source: canvas }]).then(() => {
  // ...
  btn.textContent = "Exit VR display";
});

if (btn.textContent === "Start VR display") {
  // ...
} else {
  vrDisplay.exitPresent();
  console.log("Stopped presenting to WebVR display");

  btn.textContent = "Start VR display";

  // VR 表示を停止し、通常の表示を開始する
  vrDisplay.cancelAnimationFrame(vrSceneFrame);
  drawScene();
}

function drawVRScene() {
  // WebVR: アニメーションの次のフレームを要求する
  vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene);
  // ...
}

function drawVRScene() {
  // ...
  // 表示する次のフレームのデータを frameData に格納する
  vrDisplay.getFrameData(frameData);
  // ...
}

function drawVRScene() {
  // ...
  // 現在のフレームのポーズからディスプレイの位置や向きなどを取得できる

  const curFramePose = frameData.pose;
  const curPos = curFramePose.position;
  const curOrient = curFramePose.orientation;
  if (poseStatsDisplayed) {
    displayPoseStats(curFramePose);
  }
  // ...
}

function drawVRScene() {
  // ...
  // 描画を始める前にキャンバスをクリアする

  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  // ...
}

function drawVRScene() {
  // ...
  // WebVR: 下の uniformMatrix4fv メソッドに渡す投影行列とビュー行列のロケーションを作成する

  const projectionMatrixLocation = gl.getUniformLocation(
    shaderProgram,
    "projMatrix",
  );
  const viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix");
  // ...
}

function drawVRScene() {
  // ...
  // WebVR: 左目のビューをキャンバスの左半分に描画する
  gl.viewport(0, 0, canvas.width * 0.5, canvas.height);
  gl.uniformMatrix4fv(
    projectionMatrixLocation,
    false,
    frameData.leftProjectionMatrix,
  );
  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix);
  drawGeometry();
  // ...
}

function drawVRScene() {
  // ...
  // WebVR: 右目のビューをキャンバスの右半分に描画する
  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() {
  // シーンを見るための遠近感を設定する。
  // 視野角は 45 度、幅と高さの比率は 640:480 とし、
  // カメラから 0.1 から 100 単位の範囲にあるオブジェクトだけを表示する。
  perspectiveMatrix = makePerspective(45, 640.0 / 480.0, 0.1, 100.0);

  // 描画位置を単位行列にリセットし、シーンの中心を基準にする。
  loadIdentity();

  // 立方体の描画を始めたい位置まで、描画位置を少し移動する。
  mvTranslate([
    0.0 - curPos[0] * 25 + curOrient[1] * 25,
    5.0 - curPos[1] * 25 - curOrient[0] * 25,
    -15.0 - curPos[2] * 25,
  ]);

  // 現在の行列を保存し、描画前に回転させる。
  mvPushMatrix();
  mvRotate(cubeRotation, [0.25, 0, 0.25 - curOrient[2] * 0.5]);

  // 配列バッファーを立方体の頂点配列にバインドし、
  // 属性を設定して GL に渡し、立方体を描画する。
  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesBuffer);
  gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);

  // 頂点のテクスチャー座標属性を設定する。
  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
  gl.vertexAttribPointer(textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);

  // 面にマッピングするテクスチャーを指定する。
  gl.activeTexture(gl.TEXTURE0);
  gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
  gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0);

  // 立方体を描画する。
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
  setMatrixUniforms();
  gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);

  // 元の行列に戻す
  mvPopMatrix();
}

function drawVRScene() {
  // ...
  // 必要であれば、次の描画に向けて回転を更新する。
  let currentTime = new Date().getTime();
  if (lastCubeUpdateTime) {
    const delta = currentTime - lastCubeUpdateTime;

    cubeRotation += (30 * delta) / 1000.0;
  }
  lastCubeUpdateTime = currentTime;
  // ...
}

function drawVRScene() {
  // ...
  // WebVR: 描画したフレームを VR ディスプレイに表示する準備ができたことを示す
  vrDisplay.submitFrame();
}

function displayPoseStats(pose) {
  const pos = pose.position;
  const orient = pose.orientation;
  const linVel = pose.linearVelocity;
  const linAcc = pose.linearAcceleration;
  const angVel = pose.angularVelocity;
  const angAcc = pose.angularAcceleration;
  // ...
}

function displayPoseStats(pose) {
  // ...
  posStats.textContent =
    `Position: ` +
    `x ${pos[0].toFixed(3)}, ` +
    `y ${pos[1].toFixed(3)}, ` +
    `z ${pos[2].toFixed(3)}`;
  orientStats.textContent =
    `Orientation: ` +
    `x ${orient[0].toFixed(3)}, ` +
    `y ${orient[1].toFixed(3)}, ` +
    `z ${orient[2].toFixed(3)}`;
  linVelStats.textContent =
    `Linear velocity: ` +
    `x ${linVel[0].toFixed(3)}, ` +
    `y ${linVel[1].toFixed(3)}, ` +
    `z ${linVel[2].toFixed(3)}`;
  angVelStats.textContent =
    `Angular velocity: ` +
    `x ${angVel[0].toFixed(3)}, ` +
    `y ${angVel[1].toFixed(3)}, ` +
    `z ${angVel[2].toFixed(3)}`;

  if (linAcc) {
    linAccStats.textContent =
      `Linear acceleration: ` +
      `x ${linAcc[0].toFixed(3)}, ` +
      `y ${linAcc[1].toFixed(3)}, ` +
      `z ${linAcc[2].toFixed(3)}`;
  } else {
    linAccStats.textContent = "Linear acceleration not reported";
  }

  if (angAcc) {
    angAccStats.textContent =
      `Angular acceleration: ` +
      `x ${angAcc[0].toFixed(3)}, ` +
      `y ${angAcc[1].toFixed(3)}, ` +
      `z ${angAcc[2].toFixed(3)}`;
  } else {
    angAccStats.textContent = "Angular acceleration not reported";
  }
}

window.addEventListener("vrdisplaypresentchange", (e) => {
  console.log(
    `Display ${e.display.displayId} presentation has changed. Reason given: ${e.reason}.`,
  );
});