XRWebGLLayer：getViewport() 方法
XRWebGLLayer 介面的 **getViewport()** 方法返回一個 XRViewport 物件，該物件應被用於將指定的 XRView 渲染到 WebGL 圖層中。對於使用單個幀緩衝器來渲染左右眼畫面的 WebXR 裝置，返回的視口代表了場景應該被渲染到幀緩衝器中的哪個區域（對應於 view 表示的眼睛）。
語法
js
getViewport(view)
引數
返回值
一個 XRViewport 物件，表示一個視口，它將繪製限制在圖層中對應於指定 view 的部分。
異常
InvalidStateErrorDOMException-
如果指定的
view不在活動的XRFrame中，或者該XRFrame和XRWebGLLayer不屬於同一個WebXR session，則會丟擲此錯誤。
示例
此示例部分展示了 requestAnimationFrame() 函式的回撥可能的樣子，使用 getViewport() 獲取視口，以便將繪製限制在為當前正在渲染的眼睛的視角預留的區域內。
這樣做是因為 XRViewerPose 返回的檢視集中的每個檢視都代表了眼睛對場景的一個視角。由於幀緩衝器被分成兩半，一半用於左眼，一半用於右眼，因此將 WebGL 視口設定為與 WebXR 圖層的視口匹配，可以確保在渲染當前眼睛姿勢的場景時，它被渲染到幀緩衝器的正確一半。
js
function drawFrame(time, frame) {
const session = frame.session;
const pose = frame.getViewerPose(mainReferenceSpace);
if (pose) {
const glLayer = session.renderState.baseLayer;
gl.bindFramebuffer(gl.FRAMEBUFFER, glLayer.framebuffer);
gl.clearColor(0, 0, 0, 1.0);
gl.clearDepth(1.0);
gl.clear(gl.COLOR_BUFFER_BIT, gl.DEPTH_COLOR_BIT);
for (const view of pose.views) {
const viewport = glLayer.getViewport(view);
gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
/* Render the scene now */
}
}
}
規範
| 規範 |
|---|
| WebXR Device API # dom-xrwebgllayer-getviewport |
瀏覽器相容性
載入中…