XRWebGLBinding: phương thức createQuadLayer()

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.

Phương thức createQuadLayer() của giao diện XRWebGLBinding trả về đối tượng XRQuadLayer, là một lớp chiếm không gian hình chữ nhật phẳng trong môi trường thực tế ảo.

Cú pháp

js
createQuadLayer(options)

Tham số

options

Đối tượng để cấu hình XRQuadLayer. Nó phải có các thuộc tính space, viewPixelHeightviewPixelWidth. init có các thuộc tính sau:

colorFormat Optional

GLenum xác định kiểu dữ liệu của dữ liệu kết cấu màu. Các giá trị có thể:

  • gl.RGB
  • gl.RGBA Ngoài ra, cho các ngữ cảnh với phần mở rộng EXT_sRGB được kích hoạt:
  • ext.SRGB_EXT
  • ext.SRGB_ALPHA_EXT Ngoài ra, cho các ngữ cảnh WebGL2RenderingContext:
  • gl.RGBA8
  • gl.RGB8
  • gl.SRGB8
  • gl.RGB8_ALPHA8 Ngoài ra, cho các ngữ cảnh với phần mở rộng WEBGL_compressed_texture_etc được kích hoạt:
  • ext.COMPRESSED_RGB8_ETC2
  • ext.COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2
  • ext.COMPRESSED_RGBA8_ETC2_EAC
  • ext.COMPRESSED_SRGB8_ETC2
  • ext.COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2
  • ext.COMPRESSED_SRGB8_ALPHA8_ETC2_EAC Ngoài ra, cho các ngữ cảnh với phần mở rộng WEBGL_compressed_texture_astc được kích hoạt:
  • Tất cả các định dạng mà phần mở rộng hỗ trợ. Giá trị mặc định là gl.RGBA.
depthFormat Optional

GLenum xác định kiểu dữ liệu của dữ liệu kết cấu độ sâu hoặc 0 cho biết lớp không nên cung cấp kết cấu độ sâu (trong trường hợp đó XRProjectionLayer.ignoreDepthValues sẽ là true). Các giá trị có thể trong các ngữ cảnh WebGLRenderingContext có phần mở rộng WEBGL_depth_texture được kích hoạt, hoặc trong các ngữ cảnh WebGL2RenderingContext (không cần phần mở rộng):

  • gl.DEPTH_COMPONENT
  • gl.DEPTH_STENCIL Ngoài ra, cho các ngữ cảnh WebGL2RenderingContext:
  • gl.DEPTH_COMPONENT24
  • gl.DEPTH24_STENCIL24 Giá trị mặc định là gl.DEPTH_COMPONENT.
height Optional

Số xác định chiều cao của lớp tính bằng mét. Giá trị mặc định là 1.0.

isStatic Optional

Giá trị boolean, nếu là true, cho biết bạn chỉ có thể vẽ vào lớp này khi needsRedrawtrue. Giá trị mặc định là false.

layout Optional

Chuỗi cho biết bố cục của lớp. Các giá trị có thể:

default

Lớp chứa tất cả các khung nhìn của phiên.

mono

Một XRSubImage duy nhất được phân bổ và hiển thị cho cả hai mắt.

stereo

Tác nhân người dùng quyết định cách phân bổ XRSubImage (một hoặc hai) và bố cục (trên/dưới hoặc trái/phải).

stereo-left-right

Một XRSubImage duy nhất được phân bổ. Mắt trái nhận vùng bên trái của kết cấu, mắt phải nhận vùng bên phải.

stereo-top-bottom

Một XRSubImage duy nhất được phân bổ. Mắt trái nhận vùng trên của kết cấu, mắt phải nhận vùng dưới. Giá trị mặc định là mono.

mipLevels Optional

Số xác định số mức mip mong muốn. Giá trị mặc định là 1.

space Bắt buộc

Đối tượng XRSpace xác định mối quan hệ không gian của lớp với môi trường vật lý của người dùng.

textureType Optional

Chuỗi xác định loại kết cấu mà lớp sẽ có. Các giá trị có thể:

texture

Các kết cấu của XRWebGLSubImage sẽ có kiểu gl.TEXTURE_2D.

texture-array

Các kết cấu của XRWebGLSubImage sẽ có kiểu gl.TEXTURE_2D_ARRAY (chỉ dành cho ngữ cảnh WebGL 2). Giá trị mặc định là texture.

transform Optional

Đối tượng XRRigidTransform xác định độ lệch và hướng tương đối với space.

viewPixelHeight Bắt buộc

Số xác định chiều cao pixel của khung nhìn lớp.

viewPixelWidth Bắt buộc

Số xác định chiều rộng pixel của khung nhìn lớp.

width Optional

Số xác định chiều rộng của lớp tính bằng mét. Giá trị mặc định là 1.0.

Giá trị trả về

Đối tượng XRQuadLayer.

Ví dụ

Tạo một XRQuadLayer

Cấu hình lớp quad bằng các thuộc tính được liệt kê ở trên trong lần gọi createQuadLayer(). Để hiển thị các lớp trên thiết bị XR, hãy thêm chúng vào trạng thái kết xuất layers bằng XRSession.updateRenderState().

js
function onXRSessionStarted(xrSession) {
  const glCanvas = document.createElement("canvas");
  const gl = glCanvas.getContext("webgl2", { xrCompatible: true });
  const xrGlBinding = new XRWebGLBinding(xrSession, gl);
  const quadLayer = xrGlBinding.createQuadLayer({
    space: xrReferenceSpace,
    viewPixelHeight: 512,
    viewPixelWidth: 512,
    transform: new XRRigidTransform({ z: -2 }),
  });
  xrSession.updateRenderState({
    layers: [quadLayer],
  });
}

Thông số kỹ thuật

Specification
WebXR Layers API Level 1
# dom-xrwebglbinding-createquadlayer

Tương thích trình duyệt

Xem thêm