XRMediaBinding: createCylinderLayer() method

Cú pháp

createCylinderLayer(video, options)

Tham số

video

Một HTMLVideoElement để hiển thị.

options

Một đối tượng để cấu hình XRCylinderLayer. Đối tượng có thể có các thuộc tính sau và space là bắt buộc:

aspectRatio Optional

Một số chỉ ra tỷ lệ của phần hình trụ có thể nhìn thấy. Đây là tỷ lệ chiều rộng của phần có thể nhìn thấy của hình trụ chia cho chiều cao của nó. Chiều rộng được tính bằng cách nhân radius với centralAngle.

centralAngle Optional

Một số chỉ ra góc tính bằng radian của phần hình trụ có thể nhìn thấy. Giá trị mặc định: 0.78539 (π / 4).

invertStereo Optional

Giá trị boolean chỉ định liệu vị trí tự nhiên của mỗi khung nhìn trong video có nên bị đảo ngược không. Mặc định là false.

layout Optional

Chuỗi chỉ ra bố cục của video. Các giá trị có thể:

default

Lớp hỗ trợ tất cả các khung nhìn của phiên.

mono

Một XRSubImage được phân bổ và trình bày 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). Nên sử dụng loại kết cấu texture-array cho bố cục stereo.

stereo-left-right

Một XRSubImage được phân bổ. Mắt trái nhận vùng trái của kết cấu, mắt phải nhận vùng phải. Bố cục này được thiết kế để giảm thiểu các lần vẽ cho nội dung đã ở dạng stereo.

stereo-top-bottom

Một XRSubImage đượ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. Bố cục này được thiết kế để giảm thiểu các lần vẽ cho nội dung đã ở dạng stereo. Giá trị mặc định là mono.

radius Optional

Một số chỉ ra bán kính của hình trụ. Giá trị mặc định 2.0.

space Bắt buộc

Một đố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.

transform Optional

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

Giá trị trả về

Một đối tượng XRCylinderLayer.

Ví dụ

Tạo XRCylinderLayer để hiển thị video

Tạo XRMediaBinding và sử dụng HTMLVideoElement được truyền vào createCylinderLayer(). Cấu hình lớp quad bằng cách sử dụng các tùy chọn liệt kê ở trên và trình bày lớp cho thiết bị XR bằng cách thêm nó vào trạng thái kết xuất layers trong XRSession.updateRenderState().

function onXRSessionStarted(xrSession) {
  const xrMediaBinding = new XRMediaBinding(xrSession);
  const video = document.createElement("video");
  video.src = "just-fascination.mp4";

  const videoLayer = xrMediaBinding.createCylinderLayer(video, {
    space: xrReferenceSpace,
  });

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

Thông số kỹ thuật

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

Xem thêm

• XRCylinderLayer