例項屬性
height只讀-
視口的高度（以畫素為單位）。
width只讀-
視口的寬度（以畫素為單位）。
x只讀-
從目標圖形表面（通常是
XRWebGLLayer）的 origin 到視口左邊緣的偏移量（以畫素為單位）。 y只讀-
從視口的 origin 到視口底部的偏移量；WebGL 的座標系將 (0, 0) 放置在表面的左下角。
用法說明
當前，唯一可用的表面型別是 XRWebGLLayer。對於其他表面型別，座標系的精確方向可能會有所不同，但在 WebGL 中，origin (0, 0) 位於表面的左下角。因此，XRViewport 中指定的這些值定義了一個矩形，其左下角位於 (x, y)，並向左延伸 width 畫素，向上延伸 height 畫素。
這些值可以直接傳遞給 WebGLRenderingContext.viewport() 方法。
js
const xrViewport = xrWebGLLayer.getViewport(xrView);
gl.viewport(xrViewport.x, xrViewport.y, xrViewport.width, xrViewport.height);
示例
此示例使用 requestAnimationFrame() 設定一個動畫幀回撥。初始設定後，它會遍歷檢視器姿勢中的每個檢視，並根據 XRWebGLLayer 配置視口。
js
xrSession.requestAnimationFrame((time, xrFrame) => {
const viewerPose = xrFrame.getViewerPose(xrReferenceSpace);
gl.bindFramebuffer(xrWebGLLayer.framebuffer);
for (const xrView of viewerPose.views) {
const xrViewport = xrWebGLLayer.getViewport(xrView);
gl.viewport(
xrViewport.x,
xrViewport.y,
xrViewport.width,
xrViewport.height,
);
// Now we can use WebGL to draw into a viewport matching
// the viewer's needs
}
});
規範
| 規範 |
|---|
| WebXR Device API # xrviewport-interface |
瀏覽器相容性
載入中…