@iwsdk/core 0.3.1 → 0.4.0

package/dist/layers/xr-layer-system.d.ts

@@ -0,0 +1,296 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { Types } from '../ecs/index.js';
+/**
+ * Internal component storing per-entity runtime state for active XR layers.
+ * Attached by {@link XRLayerSystem} when an entity qualifies; removed on
+ * teardown. Keeping state in a component rather than system-side maps makes
+ * the system stateless with respect to entities, which improves HMR behavior
+ * and allows runtime MCP tools to inspect layer state.
+ *
+ * @category Layers
+ */
+export declare const XRLayerState: import("elics").Component<{
+    isQuad: {
+        type: Types.Boolean;
+        default: true;
+    };
+    mesh: {
+        type: Types.Object;
+        default: null;
+    };
+    renderTarget: {
+        type: Types.Object;
+        default: null;
+    };
+    fallbackMaterial: {
+        type: Types.Object;
+        default: null;
+    };
+    xrLayer: {
+        type: Types.Object;
+        default: null;
+    };
+    pixelWidth: {
+        type: Types.Int16;
+        default: number;
+    };
+    pixelHeight: {
+        type: Types.Int16;
+        default: number;
+    };
+    stencil: {
+        type: Types.Boolean;
+        default: false;
+    };
+    cachedTransform: {
+        type: Types.Object;
+        default: null;
+    };
+}>;
+declare const XRLayerSystem_base: import("elics").SystemConstructor<import("elics").SystemSchema, {
+    quadLayers: {
+        required: import("elics").Component<{
+            width: {
+                type: Types.Float32;
+                default: number;
+            };
+            height: {
+                type: Types.Float32;
+                default: number;
+            };
+            pixelWidth: {
+                type: Types.Int16;
+                default: number;
+            };
+            pixelHeight: {
+                type: Types.Int16;
+                default: number;
+            };
+            renderCallback: {
+                type: Types.Object;
+                default: null;
+            };
+            stencil: {
+                type: Types.Boolean;
+                default: false;
+            };
+        }>[];
+    };
+    cylinderLayers: {
+        required: import("elics").Component<{
+            radius: {
+                type: Types.Float32;
+                default: number;
+            };
+            centralAngle: {
+                type: Types.Float32;
+                default: number;
+            };
+            aspectRatio: {
+                type: Types.Float32;
+                default: number;
+            };
+            pixelWidth: {
+                type: Types.Int16;
+                default: number;
+            };
+            pixelHeight: {
+                type: Types.Int16;
+                default: number;
+            };
+            renderCallback: {
+                type: Types.Object;
+                default: null;
+            };
+            stencil: {
+                type: Types.Boolean;
+                default: false;
+            };
+        }>[];
+    };
+    activeLayers: {
+        required: import("elics").Component<{
+            isQuad: {
+                type: Types.Boolean;
+                default: true;
+            };
+            mesh: {
+                type: Types.Object;
+                default: null;
+            };
+            renderTarget: {
+                type: Types.Object;
+                default: null;
+            };
+            fallbackMaterial: {
+                type: Types.Object;
+                default: null;
+            };
+            xrLayer: {
+                type: Types.Object;
+                default: null;
+            };
+            pixelWidth: {
+                type: Types.Int16;
+                default: number;
+            };
+            pixelHeight: {
+                type: Types.Int16;
+                default: number;
+            };
+            stencil: {
+                type: Types.Boolean;
+                default: false;
+            };
+            cachedTransform: {
+                type: Types.Object;
+                default: null;
+            };
+        }>[];
+    };
+}, import("../ecs/world.js").World, import("../ecs/system.js").System<import("elics").SystemSchema, {
+    quadLayers: {
+        required: import("elics").Component<{
+            width: {
+                type: Types.Float32;
+                default: number;
+            };
+            height: {
+                type: Types.Float32;
+                default: number;
+            };
+            pixelWidth: {
+                type: Types.Int16;
+                default: number;
+            };
+            pixelHeight: {
+                type: Types.Int16;
+                default: number;
+            };
+            renderCallback: {
+                type: Types.Object;
+                default: null;
+            };
+            stencil: {
+                type: Types.Boolean;
+                default: false;
+            };
+        }>[];
+    };
+    cylinderLayers: {
+        required: import("elics").Component<{
+            radius: {
+                type: Types.Float32;
+                default: number;
+            };
+            centralAngle: {
+                type: Types.Float32;
+                default: number;
+            };
+            aspectRatio: {
+                type: Types.Float32;
+                default: number;
+            };
+            pixelWidth: {
+                type: Types.Int16;
+                default: number;
+            };
+            pixelHeight: {
+                type: Types.Int16;
+                default: number;
+            };
+            renderCallback: {
+                type: Types.Object;
+                default: null;
+            };
+            stencil: {
+                type: Types.Boolean;
+                default: false;
+            };
+        }>[];
+    };
+    activeLayers: {
+        required: import("elics").Component<{
+            isQuad: {
+                type: Types.Boolean;
+                default: true;
+            };
+            mesh: {
+                type: Types.Object;
+                default: null;
+            };
+            renderTarget: {
+                type: Types.Object;
+                default: null;
+            };
+            fallbackMaterial: {
+                type: Types.Object;
+                default: null;
+            };
+            xrLayer: {
+                type: Types.Object;
+                default: null;
+            };
+            pixelWidth: {
+                type: Types.Int16;
+                default: number;
+            };
+            pixelHeight: {
+                type: Types.Int16;
+                default: number;
+            };
+            stencil: {
+                type: Types.Boolean;
+                default: false;
+            };
+            cachedTransform: {
+                type: Types.Object;
+                default: null;
+            };
+        }>[];
+    };
+}>>;
+/**
+ * XRLayerSystem manages WebXR quad and cylinder composition layers.
+ *
+ * For each entity with an {@link XRQuadLayer} or {@link XRCylinderLayer}
+ * component, the system:
+ * - Creates a mesh (plane or cylinder) as a child of the entity's object3D
+ * - Renders layer content each frame via the component's `renderCallback`
+ * - In XR sessions with layer support, creates native XR composition layers
+ *   and switches the mesh to a punch-through material that makes the
+ *   projection layer transparent where the content layer appears
+ * - Falls back to rendering the content onto a textured mesh outside XR
+ *
+ * @category Layers
+ */
+export declare class XRLayerSystem extends XRLayerSystem_base {
+    private sessionUsesLayers;
+    init(): void;
+    update(): void;
+    private setupLayer;
+    private teardownLayer;
+    private handleSessionStart;
+    private handleSessionEnd;
+    private activateNativeLayer;
+    private deactivateNativeLayer;
+    /**
+     * Rebuild the session's render state layers array.
+     * Keeps the projection layer at index 0, then appends content layers.
+     */
+    private updateSessionLayers;
+    private renderLayers;
+    /**
+     * Update the native XR layer's transform only when the mesh has moved,
+     * avoiding per-frame XRRigidTransform allocations for static layers.
+     */
+    private syncLayerTransform;
+    private createRenderTarget;
+}
+export {};
+//# sourceMappingURL=xr-layer-system.d.ts.map

package/dist/layers/xr-layer-system.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"xr-layer-system.d.ts","sourceRoot":"","sources":["../../src/layers/xr-layer-system.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAyC,KAAK,EAAE,MAAM,iBAAiB,CAAC;AA2C/E;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAcxB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEF;;;;;;;;;;;;;GAaG;AACH,qBAAa,aAAc,SAAQ,kBAIjC;IACA,OAAO,CAAC,iBAAiB,CAAS;IAElC,IAAI;IAyBJ,MAAM;IAWN,OAAO,CAAC,UAAU;IAwElB,OAAO,CAAC,aAAa;IAkCrB,OAAO,CAAC,kBAAkB;IAoB1B,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,mBAAmB;IAmF3B,OAAO,CAAC,qBAAqB;IAqC7B;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IAwB3B,OAAO,CAAC,YAAY;IAiEpB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IA6B1B,OAAO,CAAC,kBAAkB;CAwB3B"}

package/dist/layers/xr-layer-system.js

@@ -0,0 +1,378 @@
+import { createSystem } from '../ecs/system.js';
+import '../ecs/world.js';
+import { createComponent, Types } from 'elics';
+import '../ecs/entity.js';
+import '../ecs/component-registry.js';
+import '../runtime/three.js';
+import { XRCylinderLayer } from './xr-cylinder-layer.js';
+import { XRQuadLayer } from './xr-quad-layer.js';
+import { Vector3, Quaternion, Color, PlaneGeometry, CylinderGeometry, MeshBasicMaterial, Mesh, FrontSide, BackSide, CustomBlending, AddEquation, ZeroFactor, SRGBColorSpace, WebGLRenderTarget, DepthTexture, UnsignedByteType, RGBAFormat, UnsignedInt248Type, UnsignedIntType, DepthStencilFormat, DepthFormat } from 'three';
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const _position = new Vector3();
+const _quaternion = new Quaternion();
+const _clearColor = new Color();
+function toRigidTransform(pos, quat) {
+    return new XRRigidTransform({ x: pos.x, y: pos.y, z: pos.z }, { x: quat.x, y: quat.y, z: quat.z, w: quat.w });
+}
+/**
+ * Internal component storing per-entity runtime state for active XR layers.
+ * Attached by {@link XRLayerSystem} when an entity qualifies; removed on
+ * teardown. Keeping state in a component rather than system-side maps makes
+ * the system stateless with respect to entities, which improves HMR behavior
+ * and allows runtime MCP tools to inspect layer state.
+ *
+ * @category Layers
+ */
+const XRLayerState = createComponent('XRLayerState', {
+    isQuad: { type: Types.Boolean, default: true },
+    mesh: { type: Types.Object, default: null },
+    renderTarget: { type: Types.Object, default: null },
+    fallbackMaterial: { type: Types.Object, default: null },
+    xrLayer: { type: Types.Object, default: null },
+    pixelWidth: { type: Types.Int16, default: 0 },
+    pixelHeight: { type: Types.Int16, default: 0 },
+    stencil: { type: Types.Boolean, default: false },
+    cachedTransform: { type: Types.Object, default: null },
+}, 'Internal state for active XR layer entities');
+/**
+ * XRLayerSystem manages WebXR quad and cylinder composition layers.
+ *
+ * For each entity with an {@link XRQuadLayer} or {@link XRCylinderLayer}
+ * component, the system:
+ * - Creates a mesh (plane or cylinder) as a child of the entity's object3D
+ * - Renders layer content each frame via the component's `renderCallback`
+ * - In XR sessions with layer support, creates native XR composition layers
+ *   and switches the mesh to a punch-through material that makes the
+ *   projection layer transparent where the content layer appears
+ * - Falls back to rendering the content onto a textured mesh outside XR
+ *
+ * @category Layers
+ */
+class XRLayerSystem extends createSystem({
+    quadLayers: { required: [XRQuadLayer] },
+    cylinderLayers: { required: [XRCylinderLayer] },
+    activeLayers: { required: [XRLayerState] },
+}) {
+    constructor() {
+        super(...arguments);
+        this.sessionUsesLayers = false;
+    }
+    init() {
+        const onSessionStart = () => this.handleSessionStart();
+        const onSessionEnd = () => this.handleSessionEnd();
+        this.xrManager.addEventListener('sessionstart', onSessionStart);
+        this.xrManager.addEventListener('sessionend', onSessionEnd);
+        this.cleanupFuncs.push(() => this.xrManager.removeEventListener('sessionstart', onSessionStart), () => this.xrManager.removeEventListener('sessionend', onSessionEnd));
+        this.queries.quadLayers.subscribe('qualify', (entity) => this.setupLayer(entity, 'quad'));
+        this.queries.quadLayers.subscribe('disqualify', (entity) => this.teardownLayer(entity));
+        this.queries.cylinderLayers.subscribe('qualify', (entity) => this.setupLayer(entity, 'cylinder'));
+        this.queries.cylinderLayers.subscribe('disqualify', (entity) => this.teardownLayer(entity));
+    }
+    update() {
+        if (this.queries.activeLayers.entities.size === 0) {
+            return;
+        }
+        this.renderLayers();
+    }
+    // ---------------------------------------------------------------------------
+    // Layer setup / teardown
+    // ---------------------------------------------------------------------------
+    setupLayer(entity, type) {
+        var _a;
+        const isQuad = type === 'quad';
+        const component = isQuad ? XRQuadLayer : XRCylinderLayer;
+        const pixelWidth = entity.getValue(component, 'pixelWidth');
+        const pixelHeight = entity.getValue(component, 'pixelHeight');
+        const stencil = entity.getValue(component, 'stencil');
+        let geometry;
+        let side;
+        if (isQuad) {
+            const width = entity.getValue(XRQuadLayer, 'width');
+            const height = entity.getValue(XRQuadLayer, 'height');
+            geometry = new PlaneGeometry(width, height);
+            side = FrontSide;
+        }
+        else {
+            const radius = entity.getValue(XRCylinderLayer, 'radius');
+            const centralAngle = entity.getValue(XRCylinderLayer, 'centralAngle');
+            const aspectRatio = entity.getValue(XRCylinderLayer, 'aspectRatio');
+            geometry = new CylinderGeometry(radius, radius, (radius * centralAngle) / aspectRatio, 64, 64, true, Math.PI - centralAngle / 2, centralAngle);
+            side = BackSide;
+        }
+        const renderTarget = this.createRenderTarget(pixelWidth, pixelHeight, stencil);
+        const fallbackMaterial = new MeshBasicMaterial({
+            color: 0xffffff,
+            side,
+            transparent: true,
+        });
+        fallbackMaterial.map = renderTarget.texture;
+        fallbackMaterial.map.offset.y = 1;
+        fallbackMaterial.map.repeat.y = -1;
+        const mesh = new Mesh(geometry, fallbackMaterial);
+        (_a = entity.object3D) === null || _a === void 0 ? void 0 : _a.add(mesh);
+        entity.addComponent(XRLayerState, {
+            isQuad,
+            mesh,
+            renderTarget,
+            fallbackMaterial,
+            pixelWidth,
+            pixelHeight,
+            stencil,
+        });
+        if (this.sessionUsesLayers) {
+            this.activateNativeLayer(entity);
+            this.updateSessionLayers();
+        }
+    }
+    teardownLayer(entity) {
+        const mesh = XRLayerState.data.mesh[entity.index];
+        if (!mesh) {
+            return;
+        }
+        const fallbackMaterial = XRLayerState.data.fallbackMaterial[entity.index];
+        const renderTarget = XRLayerState.data.renderTarget[entity.index];
+        const xrLayer = XRLayerState.data.xrLayer[entity.index];
+        if (xrLayer && this.sessionUsesLayers) {
+            entity.setValue(XRLayerState, 'xrLayer', null);
+            this.updateSessionLayers();
+        }
+        mesh.geometry.dispose();
+        fallbackMaterial.dispose();
+        if (mesh.material !== fallbackMaterial) {
+            mesh.material.dispose();
+        }
+        renderTarget.dispose();
+        mesh.removeFromParent();
+        entity.removeComponent(XRLayerState);
+    }
+    // ---------------------------------------------------------------------------
+    // XR session lifecycle
+    // ---------------------------------------------------------------------------
+    handleSessionStart() {
+        var _a;
+        const session = this.xrManager.getSession();
+        const layers = (_a = session === null || session === void 0 ? void 0 : session.renderState) === null || _a === void 0 ? void 0 : _a.layers;
+        // Need both a layers array AND a projection layer at index 0.
+        // The IWER emulator exposes an empty layers array which is truthy
+        // but has no projection layer -- treat that as "no layers support".
+        if (!(layers === null || layers === void 0 ? void 0 : layers.length)) {
+            this.sessionUsesLayers = false;
+            return;
+        }
+        this.sessionUsesLayers = true;
+        for (const entity of this.queries.activeLayers.entities) {
+            this.activateNativeLayer(entity);
+        }
+        this.updateSessionLayers();
+    }
+    handleSessionEnd() {
+        for (const entity of this.queries.activeLayers.entities) {
+            this.deactivateNativeLayer(entity);
+        }
+        this.sessionUsesLayers = false;
+    }
+    // ---------------------------------------------------------------------------
+    // Native layer management
+    // ---------------------------------------------------------------------------
+    activateNativeLayer(entity) {
+        const binding = this.xrManager.getBinding();
+        const session = this.xrManager.getSession();
+        if (!binding || !session) {
+            return;
+        }
+        const isQuad = !!XRLayerState.data.isQuad[entity.index];
+        const mesh = XRLayerState.data.mesh[entity.index];
+        const pixelWidth = XRLayerState.data.pixelWidth[entity.index];
+        const pixelHeight = XRLayerState.data.pixelHeight[entity.index];
+        const renderTarget = XRLayerState.data.renderTarget[entity.index];
+        const refSpace = this.xrManager.getReferenceSpace();
+        mesh.updateMatrixWorld(true);
+        mesh.getWorldPosition(_position);
+        mesh.getWorldQuaternion(_quaternion);
+        const transform = toRigidTransform(_position, _quaternion);
+        let xrLayer;
+        if (isQuad) {
+            const width = entity.getValue(XRQuadLayer, 'width');
+            const height = entity.getValue(XRQuadLayer, 'height');
+            xrLayer = binding.createQuadLayer({
+                transform,
+                width: width / 2,
+                height: height / 2,
+                space: refSpace,
+                viewPixelWidth: pixelWidth,
+                viewPixelHeight: pixelHeight,
+                clearOnAccess: false,
+            });
+        }
+        else {
+            const radius = entity.getValue(XRCylinderLayer, 'radius');
+            const centralAngle = entity.getValue(XRCylinderLayer, 'centralAngle');
+            const aspectRatio = entity.getValue(XRCylinderLayer, 'aspectRatio');
+            xrLayer = binding.createCylinderLayer({
+                transform,
+                radius,
+                centralAngle,
+                aspectRatio,
+                space: refSpace,
+                viewPixelWidth: pixelWidth,
+                viewPixelHeight: pixelHeight,
+                clearOnAccess: false,
+            });
+        }
+        entity.setValue(XRLayerState, 'xrLayer', xrLayer);
+        // Switch to punch-through material so the projection layer is
+        // transparent where this content layer appears.
+        const side = isQuad ? FrontSide : BackSide;
+        const punchMaterial = new MeshBasicMaterial({ color: 0xffffff, side });
+        punchMaterial.blending = CustomBlending;
+        punchMaterial.blendEquation = AddEquation;
+        punchMaterial.blendSrc = ZeroFactor;
+        punchMaterial.blendDst = ZeroFactor;
+        mesh.material = punchMaterial;
+        // Mark render target for external-texture usage and set colorSpace so
+        // that WebGLPrograms can derive the correct output encoding (super-three
+        // reads renderTarget.texture.colorSpace when isXRRenderTarget is true).
+        renderTarget.isXRRenderTarget = true;
+        renderTarget.texture.colorSpace = SRGBColorSpace;
+        entity.setValue(XRLayerState, 'cachedTransform', {
+            position: _position.clone(),
+            quaternion: _quaternion.clone(),
+        });
+    }
+    deactivateNativeLayer(entity) {
+        const mesh = XRLayerState.data.mesh[entity.index];
+        const fallbackMaterial = XRLayerState.data.fallbackMaterial[entity.index];
+        const pixelWidth = XRLayerState.data.pixelWidth[entity.index];
+        const pixelHeight = XRLayerState.data.pixelHeight[entity.index];
+        const stencil = !!XRLayerState.data.stencil[entity.index];
+        // Dispose punch-through material
+        if (mesh.material !== fallbackMaterial) {
+            mesh.material.dispose();
+        }
+        // Recreate render target so stale __hasExternalTextures state is cleared
+        const oldRenderTarget = XRLayerState.data.renderTarget[entity.index];
+        oldRenderTarget.dispose();
+        const newRenderTarget = this.createRenderTarget(pixelWidth, pixelHeight, stencil);
+        entity.setValue(XRLayerState, 'renderTarget', newRenderTarget);
+        // Restore fallback material with the fresh render target texture
+        fallbackMaterial.map = newRenderTarget.texture;
+        fallbackMaterial.map.offset.y = 1;
+        fallbackMaterial.map.repeat.y = -1;
+        mesh.material = fallbackMaterial;
+        entity.setValue(XRLayerState, 'xrLayer', null);
+        entity.setValue(XRLayerState, 'cachedTransform', null);
+    }
+    /**
+     * Rebuild the session's render state layers array.
+     * Keeps the projection layer at index 0, then appends content layers.
+     */
+    updateSessionLayers() {
+        const session = this.xrManager.getSession();
+        if (!(session === null || session === void 0 ? void 0 : session.renderState.layers)) {
+            return;
+        }
+        // Projection layer is always the first entry
+        const projLayer = session.renderState.layers[0];
+        const layers = projLayer ? [projLayer] : [];
+        for (const entity of this.queries.activeLayers.entities) {
+            const xrLayer = XRLayerState.data.xrLayer[entity.index];
+            if (xrLayer) {
+                layers.push(xrLayer);
+            }
+        }
+        session.updateRenderState({ layers });
+    }
+    // ---------------------------------------------------------------------------
+    // Per-frame rendering
+    // ---------------------------------------------------------------------------
+    renderLayers() {
+        const renderer = this.renderer;
+        const savedRenderTarget = renderer.getRenderTarget();
+        // Disable XR so renderer.render() uses the layer's own camera
+        // instead of the headset-tracked XR cameras.
+        const savedXrEnabled = renderer.xr.enabled;
+        renderer.xr.enabled = false;
+        // Save clear color so we can clear layers to transparent
+        renderer.getClearColor(_clearColor);
+        const savedClearAlpha = renderer.getClearAlpha();
+        renderer.setClearColor(0x000000, 0);
+        for (const entity of this.queries.activeLayers.entities) {
+            const isQuad = !!XRLayerState.data.isQuad[entity.index];
+            const component = isQuad ? XRQuadLayer : XRCylinderLayer;
+            const callback = entity.getValue(component, 'renderCallback');
+            if (!callback) {
+                continue;
+            }
+            const xrLayer = XRLayerState.data.xrLayer[entity.index];
+            const mesh = XRLayerState.data.mesh[entity.index];
+            const renderTarget = XRLayerState.data.renderTarget[entity.index];
+            if (this.sessionUsesLayers && xrLayer) {
+                // XR path: sync native layer transform and render to its texture
+                const binding = this.xrManager.getBinding();
+                const frame = this.xrFrame;
+                if (!binding || !frame) {
+                    continue;
+                }
+                this.syncLayerTransform(xrLayer, mesh, entity);
+                const subImage = binding.getSubImage(xrLayer, frame);
+                renderer.setRenderTargetTextures(renderTarget, subImage.colorTexture, undefined);
+                renderer.setRenderTarget(renderTarget);
+            }
+            else {
+                // Fallback path: render to the internal render target
+                renderer.setRenderTarget(renderTarget);
+            }
+            callback();
+        }
+        // Restore renderer state
+        renderer.setClearColor(_clearColor, savedClearAlpha);
+        renderer.xr.enabled = savedXrEnabled;
+        renderer.setRenderTarget(savedRenderTarget);
+    }
+    // ---------------------------------------------------------------------------
+    // Helpers
+    // ---------------------------------------------------------------------------
+    /**
+     * Update the native XR layer's transform only when the mesh has moved,
+     * avoiding per-frame XRRigidTransform allocations for static layers.
+     */
+    syncLayerTransform(xrLayer, mesh, entity) {
+        mesh.updateMatrixWorld(true);
+        mesh.getWorldPosition(_position);
+        mesh.getWorldQuaternion(_quaternion);
+        const cached = XRLayerState.data.cachedTransform[entity.index];
+        if ((cached === null || cached === void 0 ? void 0 : cached.position.equals(_position)) &&
+            cached.quaternion.equals(_quaternion)) {
+            return;
+        }
+        xrLayer.transform = toRigidTransform(_position, _quaternion);
+        if (cached) {
+            cached.position.copy(_position);
+            cached.quaternion.copy(_quaternion);
+        }
+        else {
+            entity.setValue(XRLayerState, 'cachedTransform', {
+                position: _position.clone(),
+                quaternion: _quaternion.clone(),
+            });
+        }
+    }
+    createRenderTarget(width, height, stencil) {
+        return new WebGLRenderTarget(width, height, {
+            format: RGBAFormat,
+            type: UnsignedByteType,
+            depthTexture: new DepthTexture(width, height, stencil ? UnsignedInt248Type : UnsignedIntType, undefined, undefined, undefined, undefined, undefined, undefined, stencil ? DepthStencilFormat : DepthFormat),
+            samples: 4,
+            stencilBuffer: stencil,
+        });
+    }
+}
+
+export { XRLayerState, XRLayerSystem };
+//# sourceMappingURL=xr-layer-system.js.map