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.

EventTarget XRLayer XRWebGLLayer

Hàm khởi tạo

XRWebGLLayer() Experimental

Tạo và trả về một đối tượng XRWebGLLayer mới để sử dụng bởi XRSession đã chỉ định, sử dụng một WebGLRenderingContext hoặc WebGL2RenderingContext cụ thể làm ngữ cảnh đích.

Thuộc tính phiên bản

antialias Read 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.

fixedFoveation Experimental

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.

framebuffer Read only Experimental

Trả về một WebGLFramebuffer phù hợp để truyền vào phương thức bindFrameBuffer().

framebufferWidth Read only Experimental

Trả về chiều rộng của framebuffer XRWebGLLayer.

framebufferHeight Read only Experimental

Trả về chiều cao của framebuffer lớp.

ignoreDepthValues Read 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 XRViewport mớ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().

js
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.

js
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