XRSession: phương thức updateRenderState()

Khả dụng hạn chế

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 updateRenderState() của giao diện XRSession trong WebXR API lên lịch các thay đổi được áp dụng cho trạng thái kết xuất đang hoạt động (XRRenderState) trước khi kết xuất khung hình tiếp theo.

Cú pháp

js
updateRenderState()
updateRenderState(state)

Tham số

state Optional

Một đối tượng tùy chọn để cấu hình XRRenderState. Nếu không cung cấp, cấu hình mặc định sẽ được sử dụng.

  • baseLayer Optional: Một đối tượng XRWebGLLayer mà bộ tổng hợp WebXR sẽ lấy hình ảnh từ đó. Mặc định là null. Để chỉ định các lớp khác (hoặc nhiều lớp), xem tùy chọn layers.
  • depthFar Optional: Một giá trị dấu phẩy động chỉ định khoảng cách tính bằng mét từ người xem đến mặt phẳng cắt xa, là một mặt phẳng song song với bề mặt hiển thị mà ngoài ra không có kết xuất nào khác sẽ xảy ra. Tất cả kết xuất sẽ diễn ra giữa các khoảng cách được chỉ định bởi depthNeardepthFar. Mặc định là 1000 mét (1 kilômét).
  • depthNear Optional: Một giá trị dấu phẩy động cho biết khoảng cách tính bằng mét từ người xem đến một mặt phẳng song song với bề mặt hiển thị làm mặt phẳng cắt gần. Không có phần nào của cảnh ở phía người dùng của mặt phẳng này sẽ được kết xuất. Mặc định là 0.1 mét (10 xentimét).
  • inlineVerticalFieldOfView Optional: Một giá trị dấu phẩy động cho biết trường nhìn mặc định, tính bằng radian, để sử dụng khi tính toán ma trận chiếu cho một XRSession inline. Tính toán ma trận chiếu cũng tính đến aspect ratio của canvas đầu ra. Thuộc tính này không được chỉ định cho các phiên nhập vai, do đó, giá trị là null mặc định cho các phiên nhập vai. Giá trị mặc định là π * 0.5 (một nửa giá trị của pi).
  • layers Optional: Một mảng có thứ tự của các đối tượng XRLayer chỉ định các lớp sẽ được trình bày cho thiết bị XR. Đặt layers sẽ ghi đè baseLayer nếu có, với baseLayer báo cáo null. Thứ tự của các lớp đã cho là "sau-trước". Để biết về hòa trộn alpha của các lớp, xem thuộc tính XRCompositionLayer.blendTextureSourceAlpha.

Giá trị trả về

Không có (undefined).

Ngoại lệ

InvalidStateError DOMException

Được ném trong bất kỳ tình huống nào sau đây:

  • XRSession đã kết thúc, vì vậy bạn không thể thay đổi trạng thái kết xuất của nó.
  • baseLayer được tạo bởi một XRSession khác với phiên mà updateRenderState() được gọi.
  • Tùy chọn inlineVerticalFieldOfView được đặt, nhưng phiên là nhập vai và do đó không cho phép sử dụng thuộc tính này.
NotSupportedError DOMException

Được ném trong bất kỳ tình huống nào sau đây:

  • Tùy chọn layers được sử dụng trong một phiên đã được tạo mà không có tính năng layers.
  • Cả hai tùy chọn baseLayerlayers đều được chỉ định.
TypeError

Được ném nếu tùy chọn layers chứa các bản sao trùng lặp.

Ví dụ

Thêm một baseLayer

Ví dụ này tạo một ngữ cảnh WebGL tương thích với thiết bị XR nhập vai và sau đó sử dụng nó để tạo một XRWebGLLayer. Phương thức updateRenderState() sau đó được gọi để liên kết XRWebGLLayer mới.

js
function onXRSessionStarted(xrSession) {
  let glCanvas = document.createElement("canvas");
  let gl = glCanvas.getContext("webgl", { xrCompatible: true });

  loadWebGLResources();

  xrSession.updateRenderState({
    baseLayer: new XRWebGLLayer(xrSession, gl),
  });
}

Đặt mảng layers

Để sử dụng các lớp WebXR, phiên XR cần được tạo với bộ mô tả tính năng layers (xem XRSystem.requestSession()). Sau đó, bạn có thể tạo các lớp WebXR khác nhau như

Các lớp khác, chẳng hạn như XRProjectionLayer hoặc XRWebGLLayer cũng có sẵn.

Các lớp sẽ được trình bày theo thứ tự chúng được cung cấp trong mảng layers, với các lớp được cung cấp theo thứ tự "sau-trước".

js
const xrSession = navigator.xr.requestSession("immersive-ar", {
  optionalFeatures: ["layers"],
});

function onXRSessionStarted(xrSession) {
  const glCanvas = document.createElement("canvas");
  const gl = glCanvas.getContext("webgl", { xrCompatible: true });
  const xrGlBinding = new XRWebGLBinding(xrSession, gl);
  const projectionLayer = new XRWebGLLayer(xrSession, gl);
  const quadLayer = xrGlBinding.createQuadLayer({
    pixelWidth: 1024,
    pixelHeight: 1024,
  });

  xrSession.updateRenderState({
    layers: [projectionLayer, quadLayer],
  });
}

Thông số kỹ thuật

Thông số kỹ thuật
WebXR Device API
# dom-xrsession-updaterenderstate

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

Xem thêm