XRWebGLLayer
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Giao diện XRWebGLLayer của WebXR Device API cung cấp liên kết giữa thiết bị WebXR (hoặc thiết bị XR mô phỏng trong trường hợp phiên inline) và ngữ cảnh WebGL được sử dụng để hiển thị cảnh cho thiết bị. Cụ thể, nó cung cấp quyền truy cập vào framebuffer WebGL và viewport để dễ dàng truy cập ngữ cảnh.
Mặc dù XRWebGLLayer hiện là loại lớp framebuffer duy nhất được WebGL hỗ trợ, hoàn toàn có thể các bản cập nhật trong tương lai của đặc tả WebXR có thể cho phép các loại lớp khác và các nguồn ảnh tương ứng.
Hàm khởi tạo
XRWebGLLayer()Experimental-
Tạo và trả về một đối tượng
XRWebGLLayermới để sử dụng bởiXRSessionđã chỉ định, sử dụng mộtWebGLRenderingContexthoặcWebGL2RenderingContextcụ thể làm ngữ cảnh đích.
Thuộc tính phiên bản
antialiasRead only Experimental-
Một giá trị Boolean cho biết framebuffer của ngữ cảnh WebGL có hỗ trợ khử răng cưa hay không. Loại khử răng cưa cụ thể được xác định bởi user agent.
fixedFoveationExperimental-
Một số cho biết mức độ foveation được sử dụng bởi XR compositor. Fixed Foveated Rendering (FFR) hiển thị các cạnh của texture mắt ở độ phân giải thấp hơn so với trung tâm và giảm tải GPU.
framebufferRead only Experimental-
Trả về một
WebGLFramebufferphù hợp để truyền vào phương thứcbindFrameBuffer(). framebufferWidthRead only Experimental-
Trả về chiều rộng của framebuffer
XRWebGLLayer. framebufferHeightRead only Experimental-
Trả về chiều cao của framebuffer lớp.
ignoreDepthValuesRead only Experimental-
Một Boolean cho biết liệu WebXR compositor có nên sử dụng nội dung của bộ đệm độ sâu của lớp khi ghép cảnh hay không.
Phương thức tĩnh
getNativeFramebufferScaleFactor()Experimental-
Trả về hệ số tỷ lệ có thể được dùng để thu phóng độ phân giải framebuffer WebGL được đề xuất về độ phân giải gốc của thiết bị hiển thị.
Phương thức phiên bản
getViewport()Experimental-
Trả về một đối tượng
XRViewportmới đại diện cho vị trí, chiều rộng và chiều cao mà viewport của ngữ cảnh WebGL phải được đặt để chứa vùng vẽ dành cho nội dung của view đã chỉ định trong framebuffer. Theo cách này, ví dụ, phần hiển thị góc nhìn của mắt trái và mắt phải mỗi loại được đặt vào phần đúng của framebuffer.
Ví dụ
>Liên kết lớp với ngữ cảnh WebGL
Đoạn mã này, lấy từ Drawing a frame trong ví dụ WebXR "Movement and motion" của chúng tôi, cho thấy cách XRWebGLLayer được lấy từ trạng thái hiển thị của đối tượng XRSession và sau đó được liên kết làm framebuffer WebGL hiển thị hiện tại bằng cách gọi hàm WebGL bindFrameBuffer().
let glLayer = xrSession.renderState.baseLayer;
gl.bindFrameBuffer(gl.FRAMEBUFFER, glLayer.framebuffer);
Hiển thị mọi view trong một frame
Mỗi khi GPU sẵn sàng hiển thị cảnh lên thiết bị XR, thời gian chạy XR gọi hàm bạn đã chỉ định khi gọi phương thức XRSession requestAnimationFrame() để yêu cầu hiển thị frame.
Hàm đó nhận làm đầu vào một XRFrame đóng gói dữ liệu cần thiết để hiển thị frame. Thông tin này bao gồm pose (đối tượng XRViewerPose) mô tả vị trí và hướng nhìn của người xem trong cảnh cũng như danh sách các đối tượng XRView, mỗi đối tượng đại diện cho một góc nhìn về cảnh. Trong các triển khai WebXR hiện tại, sẽ không bao giờ có nhiều hơn hai mục trong danh sách này: một mô tả vị trí và góc nhìn của mắt trái và một mô tả tương tự cho mắt phải.
let pose = xrFrame.getViewerPose(xrReferenceSpace);
if (pose) {
const glLayer = xrSession.renderState.baseLayer;
gl.bindFrameBuffer(gl.FRAMEBUFFER, glLayer.framebuffer);
for (const view of pose.views) {
const viewport = glLayer.getViewport(view);
gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
/* Render the view */
}
}
Thông số kỹ thuật
| Specification |
|---|
| WebXR Device API> # xrwebgllayer-interface> |
Tương thích trình duyệt
Xem thêm
- WebXR Device API
- Getting started with WebGL
WebGLRenderingContextvàWebGL2RenderingContext- Drawing a frame trong ví dụ WebXR "Movement and motion" của chúng tôi