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 |
浏览器兼容性
加载中…