XRWebGLLayer: getViewport() method
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Phương thức getViewport() của giao diện XRWebGLLayer trả về XRViewport nên được sử dụng để hiển thị XRView đã chỉ định vào lớp WebGL. Đối với các thiết bị WebXR sử dụng một framebuffer duy nhất cho cả mắt trái và mắt phải, viewport được trả về đại diện cho vùng của framebuffer mà cảnh nên được hiển thị cho mắt được đại diện bởi view.
Cú pháp
getViewport(view)
Tham số
Giá trị trả về
Một đối tượng XRViewport đại diện cho viewport sẽ giới hạn việc vẽ vào phần của lớp tương ứng với view đã chỉ định.
Ngoại lệ
InvalidStateErrorDOMException-
Được ném ra nếu
viewđã chỉ định không nằm trongXRFrameđang hoạt động hoặcXRFrameđó vàXRWebGLLayerkhông phải là một phần của cùng một phiên WebXR.
Ví dụ
Ví dụ này minh họa một phần những gì callback của hàm requestAnimationFrame() có thể trông như thế nào, sử dụng getViewport() để lấy viewport để việc vẽ có thể bị giới hạn trong vùng dành riêng cho mắt có góc nhìn hiện đang được hiển thị.
Điều này hoạt động vì tập hợp các view được trả về bởi XRViewerPose mỗi loại đại diện cho góc nhìn của một mắt về cảnh. Vì framebuffer được chia làm hai nửa, mỗi nửa cho mỗi mắt, việc đặt viewport WebGL để khớp với viewport của lớp WebXR sẽ đảm bảo rằng khi hiển thị cảnh cho pose của mắt hiện tại, nó được hiển thị vào nửa đúng của framebuffer.
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 */
}
}
}
Thông số kỹ thuật
| Specification |
|---|
| WebXR Device API # dom-xrwebgllayer-getviewport |