VRDisplay:getFrameData() 方法
已棄用:此特性不再推薦。雖然某些瀏覽器可能仍然支援它,但它可能已經從相關的網路標準中刪除,可能正在刪除過程中,或者可能僅為相容性目的而保留。請避免使用它,如果可能,請更新現有程式碼;請參閱本頁底部的相容性表格以指導您的決策。請注意,此特性可能隨時停止工作。
非標準:此特性未標準化。我們不建議在生產環境中使用非標準特性,因為它們瀏覽器支援有限,並且可能會更改或被移除。但是,在沒有標準選項的特定情況下,它們可以是合適的替代方案。
getFrameData() 方法屬於 VRDisplay 介面,它接受一個 VRFrameData 物件,並用渲染當前幀所需的資訊填充它。
注意:此方法是舊版 WebVR API 的一部分。它已被 WebXR Device API 取代。
這包括當前幀的 VRPose 以及檢視和投影矩陣。
語法
js
getFrameData(frameData)
引數
frameData-
您希望填充的
VRFrameData物件。
返回值
一個布林值 —— 如果 VRFrameData 物件已成功填充,則返回 true,否則返回 false。
示例
js
const frameData = new VRFrameData();
let vrDisplay;
navigator.getVRDisplays().then((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", () => {
vrDisplay.requestPresent([{ source: canvas }]).then(() => {
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
const curFramePose = frameData.pose;
const curPos = curFramePose.position;
const 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
const projectionMatrixLocation = gl.getUniformLocation(
shaderProgram,
"projMatrix",
);
const 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();
}
注意:您可以在 raw-webgl-example 中檢視此完整程式碼。
規範
此方法是舊版 WebVR API 的一部分,已被 WebXR Device API 取代。它不再是標準化的方向。
在所有瀏覽器都實現新的 WebXR API 之前,建議依靠 A-Frame、Babylon.js 或 Three.js 等框架,或 polyfill 來開發可在所有瀏覽器上執行的 WebXR 應用程式。有關更多資訊,請閱讀 Meta 的從 WebVR 移植到 WebXR 指南。
瀏覽器相容性
載入中…