@needle-tools/engine 3.7.7-beta → 3.8.0-alpha

package/src/engine-components/Camera.ts

@@ -8,7 +8,7 @@ import { showBalloonMessage } from "../engine/debug/debug";
 import { getWorldPosition, Graphics } from "../engine/engine_three_utils";
 import { Gizmos } from "../engine/engine_gizmos";
 
-import { EquirectangularReflectionMapping, OrthographicCamera, PerspectiveCamera, Ray, sRGBEncoding, Vector3 } from "three";
+import { EquirectangularReflectionMapping, OrthographicCamera, PerspectiveCamera, Ray, SRGBColorSpace, sRGBEncoding, Vector3 } from "three";
 import { OrbitControls } from "./OrbitControls";
 import { RenderTexture } from "../engine/engine_texture";
 
@@ -261,7 +261,7 @@ export class Camera extends Behaviour implements ICamera {
         else
             cam = this.gameObject.children[0] as THREE.PerspectiveCamera | THREE.OrthographicCamera | null;
         if (cam && cam.isCamera) {
-            if (cam.type === "PerspectiveCamera") {
+            if (cam instanceof PerspectiveCamera) {
                 if (this._fov)
                     cam.fov = this._fov;
                 cam.near = this._nearClipPlane;
@@ -391,7 +391,7 @@ class CameraSkybox {
         else if (this.context.scene.background !== this._skybox) {
             if (debug)
                 console.log("Set skybox", this._camera, this._skybox);
-            this._skybox.encoding = sRGBEncoding;
+            this._skybox.colorSpace = SRGBColorSpace;
             this._skybox.mapping = EquirectangularReflectionMapping;
             this.context.scene.background = this._skybox;
         }

package/src/engine-components/GroundProjection.ts

@@ -1,5 +1,5 @@
 import { Behaviour, GameObject } from "./Component";
-import { GroundProjectedEnv as GroundProjection } from 'three/examples/jsm/objects/GroundProjectedEnv.js';
+import { GroundProjectedSkybox as GroundProjection } from 'three/examples/jsm/objects/GroundProjectedSkybox.js';
 import { serializable } from "../engine/engine_serialization_decorator";
 import { Watch as Watch } from "../engine/engine_utils";
 import { Texture } from "three";

package/src/engine-components/Light.ts

@@ -173,6 +173,7 @@ export class Light extends Behaviour implements ILight {
             }
             this.light.intensity = val * factor;
         }
+        if (debug) console.log("Set light intensity to " + this._intensity, val, this)
     }
     get intensity(): number { return this._intensity; }
     private _intensity: number = -1;
@@ -180,7 +181,7 @@ export class Light extends Behaviour implements ILight {
     @serializable()
     get shadowDistance(): number {
         const light = this.light;
-        if (light) {
+        if (light?.shadow) {
             const cam = light.shadow.camera as OrthographicCamera;
             return cam.far;
         }
@@ -189,7 +190,7 @@ export class Light extends Behaviour implements ILight {
     set shadowDistance(val: number) {
         this._shadowDistance = val;
         const light = this.light;
-        if (light) {
+        if (light?.shadow) {
             const cam = light.shadow.camera as OrthographicCamera;
             cam.far = val;
             cam.updateProjectionMatrix();
@@ -203,7 +204,7 @@ export class Light extends Behaviour implements ILight {
     @serializable()
     get shadowResolution(): number {
         const light = this.light;
-        if (light) {
+        if (light?.shadow) {
             return light.shadow.mapSize.x;
         }
         return -1;
@@ -212,7 +213,7 @@ export class Light extends Behaviour implements ILight {
         if (val === this._shadowResolution) return;
         this._shadowResolution = val;
         const light = this.light;
-        if (light) {
+        if (light?.shadow) {
             light.shadow.mapSize.set(val, val);
             light.shadow.needsUpdate = true;
         }
@@ -256,12 +257,13 @@ export class Light extends Behaviour implements ILight {
     }
 
     onEnable(): void {
-        if(debug) console.log("ENABLE LIGHT", this.name);
+        if (debug) console.log("ENABLE LIGHT", this.name);
         this.createLight();
         if (this.isBaked) return;
         else if (this.light) {
             this.light.visible = true;
             this.light.intensity = this._intensity;
+            if (debug) console.log("Set light intensity to " + this.light.intensity, this.name)
             if (this.selfIsLight) {
                 // nothing to do
             }
@@ -275,7 +277,7 @@ export class Light extends Behaviour implements ILight {
     }
 
     onDisable() {
-        if(debug) console.log("DISABLE LIGHT", this.name);
+        if (debug) console.log("DISABLE LIGHT", this.name);
         if (this.light) {
             if (this.selfIsLight)
                 this.light.intensity = 0;
@@ -376,61 +378,63 @@ export class Light extends Behaviour implements ILight {
             }
             else this.light.castShadow = false;
 
-            // shadow intensity is currently not a thing: https://github.com/mrdoob/three.js/pull/14087
-            if (this._shadowResolution !== undefined && this._shadowResolution > 4) {
-                this.light.shadow.mapSize.width = this._shadowResolution;
-                this.light.shadow.mapSize.height = this._shadowResolution;
-            }
-            else {
-                this.light.shadow.mapSize.width = 2048;
-                this.light.shadow.mapSize.height = 2048;
-            }
-            // this.light.shadow.needsUpdate = true;
-            // console.log(this.light.shadow.mapSize);
-            // return;
-
-            if (debug)
-                console.log("Override shadow bias?", this._overrideShadowBiasSettings, this.shadowBias, this.shadowNormalBias);
-
-            this.light.shadow.bias = this.shadowBias;
-            this.light.shadow.normalBias = this.shadowNormalBias;
-
-            this.updateShadowSoftHard();
+            if (this.light.shadow) {
+                // shadow intensity is currently not a thing: https://github.com/mrdoob/three.js/pull/14087
+                if (this._shadowResolution !== undefined && this._shadowResolution > 4) {
+                    this.light.shadow.mapSize.width = this._shadowResolution;
+                    this.light.shadow.mapSize.height = this._shadowResolution;
+                }
+                else {
+                    this.light.shadow.mapSize.width = 2048;
+                    this.light.shadow.mapSize.height = 2048;
+                }
+                // this.light.shadow.needsUpdate = true;
+                // console.log(this.light.shadow.mapSize);
+                // return;
+
+                if (debug)
+                    console.log("Override shadow bias?", this._overrideShadowBiasSettings, this.shadowBias, this.shadowNormalBias);
+
+                this.light.shadow.bias = this.shadowBias;
+                this.light.shadow.normalBias = this.shadowNormalBias;
+
+                this.updateShadowSoftHard();
+
+                const cam = this.light.shadow.camera as THREE.OrthographicCamera;
+                cam.near = this.shadowNearPlane;
+                // use shadow distance that was set explictly (if any)
+                if (this._shadowDistance !== undefined && typeof this._shadowDistance === "number")
+                    cam.far = this._shadowDistance;
+                else // otherwise fallback to object scale and max distance
+                    cam.far = shadowMaxDistance * Math.abs(this.gameObject.scale.z);
+
+                // width and height
+                this.gameObject.scale.set(1, 1, 1);
+                if (this.shadowWidth !== undefined) {
+                    cam.left = -this.shadowWidth / 2;
+                    cam.right = this.shadowWidth / 2;
+                }
+                else {
+                    const sx = this.gameObject.scale.x;
+                    cam.left *= sx;
+                    cam.right *= sx;
+                }
+                if (this.shadowHeight !== undefined) {
+                    cam.top = this.shadowHeight / 2;
+                    cam.bottom = -this.shadowHeight / 2;
+                }
+                else {
+                    const sy = this.gameObject.scale.y;
+                    cam.top *= sy;
+                    cam.bottom *= sy;
+                }
+                this.light.shadow.needsUpdate = true;
 
-            const cam = this.light.shadow.camera as THREE.OrthographicCamera;
-            cam.near = this.shadowNearPlane;
-            // use shadow distance that was set explictly (if any)
-            if (this._shadowDistance !== undefined && typeof this._shadowDistance === "number")
-                cam.far = this._shadowDistance;
-            else // otherwise fallback to object scale and max distance
-                cam.far = shadowMaxDistance * Math.abs(this.gameObject.scale.z);
-
-            // width and height
-            this.gameObject.scale.set(1, 1, 1);
-            if (this.shadowWidth !== undefined) {
-                cam.left = -this.shadowWidth / 2;
-                cam.right = this.shadowWidth / 2;
-            }
-            else {
-                const sx = this.gameObject.scale.x;
-                cam.left *= sx;
-                cam.right *= sx;
-            }
-            if (this.shadowHeight !== undefined) {
-                cam.top = this.shadowHeight / 2;
-                cam.bottom = -this.shadowHeight / 2;
-            }
-            else {
-                const sy = this.gameObject.scale.y;
-                cam.top *= sy;
-                cam.bottom *= sy;
+                if (debug)
+                    this.context.scene.add(new THREE.CameraHelper(cam));
             }
 
 
-            this.light.shadow.needsUpdate = true;
-            if (debug)
-                this.context.scene.add(new THREE.CameraHelper(cam));
-
 
             if (this.isBaked) {
                 this.light.removeFromParent();
@@ -457,6 +461,7 @@ export class Light extends Behaviour implements ILight {
 
     private updateShadowSoftHard() {
         if (!this.light) return;
+        if (!this.light.shadow) return;
         if (this.shadows === LightShadows.Soft) {
             // const radius = this.light.shadow.mapSize.width / 1024 * 5;
             // const samples = Mathf.clamp(Math.round(radius), 2, 10);

package/src/engine-components/OrbitControls.ts

@@ -272,10 +272,10 @@ export class OrbitControls extends Behaviour implements ICameraController {
         if (!freeCam && this.lookAtConstraint?.locked) this.setFromTargetPosition(0, this.lookAtConstraint01);
 
 
-        if (this._controls && !this.context.isInXR) {
+        if (this._controls) {
             if (this.debugLog)
                 this._controls.domElement = this.context.renderer.domElement;
-            this._controls.enabled = !this._shouldDisable && this._camera === this.context.mainCameraComponent;
+            this._controls.enabled = !this._shouldDisable && this._camera === this.context.mainCameraComponent && !this.context.isInXR;
             this._controls.enableDamping = this.enableDamping;
             this._controls.keys = this.enableKeys ? defaultKeys : disabledKeys;
             this._controls.autoRotate = this.autoRotate;
@@ -283,7 +283,8 @@ export class OrbitControls extends Behaviour implements ICameraController {
             this._controls.enableZoom = this.enableZoom;
             this._controls.dampingFactor = this.dampingFactor;
             this._controls.enablePan = this.enablePan;
-            this._controls.update();
+            if (!this.context.isInXR)
+                this._controls.update();
         }
     }
 

package/src/engine-components/ParticleSystem.ts

@@ -69,7 +69,21 @@ export class ParticleSystemRenderer extends Behaviour {
         return res;
     }
 
+    private static _havePatchedQuarkShaders = false;
+
     getMaterial(trailEnabled: boolean = false) {
+
+        if (!ParticleSystemRenderer._havePatchedQuarkShaders) {
+            ParticleSystemRenderer._havePatchedQuarkShaders = true;
+            
+            // HACK patch three.quarks fo three152+, see https://github.com/Alchemist0823/three.quarks/issues/56#issuecomment-1560825038
+            const _rebuild = TrailBatch.prototype.rebuildMaterial;
+            TrailBatch.prototype.rebuildMaterial = function () {
+                _rebuild.call(this);
+                this.material.defines.MAP_UV = "uv";
+            }
+        }
+
         const material = (trailEnabled === true && this.trailMaterial) ? this.trailMaterial : this.particleMaterial;
 
         // progressive load on start

package/src/engine-components/ReflectionProbe.ts

@@ -1,5 +1,5 @@
 import { Behaviour } from "./Component";
-import { Box3, Color, EquirectangularReflectionMapping, LinearEncoding, LineBasicMaterial, Material, MeshStandardMaterial, Object3D, SrcAlphaFactor, sRGBEncoding, Texture, Vector3, WebGLCubeRenderTarget, WebGLRenderTarget } from "three";
+import { Box3, Color, EquirectangularReflectionMapping, LinearEncoding, LineBasicMaterial, Material, MeshStandardMaterial, Object3D, SrcAlphaFactor, SRGBColorSpace, sRGBEncoding, Texture, Vector3, WebGLCubeRenderTarget, WebGLRenderTarget } from "three";
 import { serializable } from "../engine/engine_serialization";
 import { Context } from "../engine/engine_setup";
 import { getWorldPosition, getWorldScale } from "../engine/engine_three_utils";
@@ -54,7 +54,7 @@ export class ReflectionProbe extends Behaviour {
         this._texture = tex;
         if (tex) {
             tex.mapping = EquirectangularReflectionMapping;
-            tex.encoding = sRGBEncoding;
+            tex.colorSpace = SRGBColorSpace;
             tex.needsUpdate = true;
         }
     }
@@ -89,7 +89,7 @@ export class ReflectionProbe extends Behaviour {
 
         if (this.texture) {
             this.texture.mapping = EquirectangularReflectionMapping;
-            this.texture.encoding = sRGBEncoding;
+            this.texture.colorSpace = SRGBColorSpace;
             this.texture.needsUpdate = true;
         }
     }

package/src/engine-components/Renderer.ts

@@ -20,7 +20,6 @@ export { InstancingUtil } from "../engine/engine_instancing";
 
 const debugRenderer = getParam("debugrenderer");
 const suppressInstancing = getParam("noInstancing");
-const debugLightmap = getParam("debuglightmaps") ? true : false;
 const debugInstancing = getParam("debuginstancing");
 const debugProgressiveLoading = getParam("debugprogressive");
 const suppressProgressiveLoading = getParam("noprogressive");
@@ -420,7 +419,7 @@ export class Renderer extends Behaviour implements IRenderer {
                             this._lightmaps.push(rm);
                         }
                         const rm = this._lightmaps[0];
-                        rm.init(this.lightmapIndex, this.lightmapScaleOffset, tex, debugLightmap);
+                        rm.init(this.lightmapIndex, this.lightmapScaleOffset, tex);
                     }
                     else {
                         if (mat)
@@ -440,7 +439,7 @@ export class Renderer extends Behaviour implements IRenderer {
                             }
                             else
                                 rm = this._lightmaps[i];
-                            rm.init(this.lightmapIndex, this.lightmapScaleOffset, tex, debugLightmap);
+                            rm.init(this.lightmapIndex, this.lightmapScaleOffset, tex);
                             // onBeforeRender is not called when the renderer is on a group
                             // this is an issue we probably also need to handle for custom shaders
                             // and need a better solution, but for now this fixes lightmaps for multimaterial objects

package/src/engine-components/RendererLightmap.ts

@@ -1,7 +1,9 @@
 import { Behaviour, GameObject } from "./Component";
-import * as THREE from "three";
-import { Texture } from "three";
+import { Material, Mesh, ShaderMaterial, Texture, Vector4 } from "three";
 import { Context, OnRenderCallback } from "../engine/engine_setup";
+import { getParam } from "../engine/engine_utils";
+
+const debug = getParam("debuglightmaps");
 
 // this component is automatically added by the Renderer if the object has lightmap uvs AND we have a lightmap
 // for multimaterial objects GLTF exports a "Group" with the renderer component
@@ -19,20 +21,20 @@ export class RendererLightmap {
     }
 
     lightmapIndex: number = -1;
-    lightmapScaleOffset: THREE.Vector4 = new THREE.Vector4(1, 1, 0, 0);
+    lightmapScaleOffset: THREE.Vector4 = new Vector4(1, 1, 0, 0);
 
     private context: Context;
     private gameObject: GameObject;
-    private lightmapTexture: THREE.Texture | null = null;
-    private lightmapScaleOffsetUniform = { value: new THREE.Vector4(1, 1, 0, 0) };
-    private lightmapUniform: { value: THREE.Texture | null } = { value: null };
+    private lightmapTexture: Texture | null = null;
+    private lightmapScaleOffsetUniform = { value: new Vector4(1, 1, 0, 0) };
+    private lightmapUniform: { value: Texture | null } = { value: null };
 
     constructor(gameObject: GameObject, context: Context) {
         this.gameObject = gameObject;
         this.context = context;
     }
 
-    init(lightmapIndex: number, lightmapScaleOffset: THREE.Vector4, lightmapTexture: THREE.Texture, debug: boolean = false) {
+    init(lightmapIndex: number, lightmapScaleOffset: Vector4, lightmapTexture: Texture) {
         console.assert(this.gameObject !== undefined && this.gameObject !== null, "Missing gameobject", this);
 
         this.lightmapIndex = lightmapIndex;
@@ -40,8 +42,7 @@ export class RendererLightmap {
         this.lightmapScaleOffset = lightmapScaleOffset;
         this.lightmapTexture = lightmapTexture;
 
-        const debugLightmaps = debug;
-        if (debugLightmaps) this.setLightmapDebugMaterial();
+        if (debug) this.setLightmapDebugMaterial();
         this.applyLightmap();
     }
 
@@ -68,15 +69,16 @@ export class RendererLightmap {
 
         console.assert(this.gameObject.type === "Mesh", "Lightmap only works on meshes", this);
 
-        const mesh = this.gameObject as unknown as THREE.Mesh;
+        const mesh = this.gameObject as unknown as Mesh;
         // TODO: ensure uv2 exists
-        if (!mesh.geometry.getAttribute("uv2"))
-            mesh.geometry.setAttribute("uv2", mesh.geometry.getAttribute("uv"));
+        if (!mesh.geometry.getAttribute("uv1"))
+            mesh.geometry.setAttribute("uv1", mesh.geometry.getAttribute("uv"));
 
-        const mat = this.gameObject["material"].clone();
+        const mat: Material = this.gameObject["material"].clone();
         this.gameObject["material"] = mat;
 
         this.gameObject["material"].onBeforeCompile = (shader, _) => {
+            shader.lightMapUv = "uv1";
             shader.uniforms.lightmap = this.lightmapUniform;
             shader.uniforms.lightmapScaleOffset = this.lightmapScaleOffsetUniform;
         };
@@ -107,13 +109,12 @@ export class RendererLightmap {
     private setLightmapDebugMaterial() {
 
         // debug lightmaps
-        this.gameObject["material"] = new THREE.ShaderMaterial({
+        this.gameObject["material"] = new ShaderMaterial({
             vertexShader: `
-                attribute vec2 uv2;
-                varying vec2 vUv2;
+                varying vec2 vUv1;
                 void main()
                 {
-                    vUv2 = uv2;
+                    vUv1 = uv1;
                     gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
                 }
                 `,
@@ -121,7 +122,7 @@ export class RendererLightmap {
                 uniform sampler2D lightmap;
                 uniform float lightMapIntensity;
                 uniform vec4 lightmapScaleOffset;
-                varying vec2 vUv2;
+                varying vec2 vUv1;
 
                 // took from threejs 05fc79cd52b79e8c3e8dec1e7dca72c5c39983a4
                 vec4 conv_sRGBToLinear( in vec4 value ) {
@@ -129,7 +130,7 @@ export class RendererLightmap {
                 }
 
                 void main() {
-                    vec2 lUv = vUv2.xy * lightmapScaleOffset.xy + vec2(lightmapScaleOffset.z, (1. - (lightmapScaleOffset.y + lightmapScaleOffset.w)));
+                    vec2 lUv = vUv1.xy * lightmapScaleOffset.xy + vec2(lightmapScaleOffset.z, (1. - (lightmapScaleOffset.y + lightmapScaleOffset.w)));
                     
                     vec4 lightMapTexel = texture2D( lightmap, lUv);
                     // The range of RGBM lightmaps goes from 0 to 34.49 (5^2.2) in linear space, and from 0 to 5 in gamma space.
@@ -138,7 +139,7 @@ export class RendererLightmap {
                     //lightMapTexel = conv_sRGBToLinear(lightMapTexel);
                     // lightMapTexel.rgb = vec3(1.);
 
-                    // gl_FragColor = vec4(vUv2.xy, 0, 1);
+                    // gl_FragColor = vec4(vUv1.xy, 0, 1);
                     gl_FragColor = lightMapTexel;
                 }
                 `,

package/src/engine-components/ui/BaseUIComponent.ts

@@ -6,8 +6,11 @@ import { showGizmos } from '../../engine/engine_default_parameters';
 import { AxesHelper, Object3D } from 'three';
 import { ICanvas, IGraphic } from './Interfaces';
 import { ShadowCastingMode } from '../Renderer';
+import { getParam } from '../../engine/engine_utils';
 export const includesDir = "./include";
 
+const debug = getParam("debugshadowcomponents");
+
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy
 
 
@@ -128,6 +131,8 @@ export class BaseUIComponent extends Behaviour {
         // otherwise it will fail when object are enabled at runtime
         if (needsUpdate)
             ThreeMeshUI.update();
+
+        if(debug) console.log(this.shadowComponent)
     }
 
 

package/src/engine-components/ui/Canvas.ts

@@ -190,6 +190,7 @@ export class Canvas extends UIRootComponent implements ICanvas {
     }
 
     onBeforeRenderRoutine = () => {
+        if(this.context.isInVR) return;
         this.previousParent = this.gameObject.parent;
         // console.log(this.previousParent?.name + "/" + this.gameObject.name);
 
@@ -208,6 +209,7 @@ export class Canvas extends UIRootComponent implements ICanvas {
     }
 
     onAfterRenderRoutine = () => {
+        if(this.context.isInVR) return;
         if ((this.screenspace || this.renderOnTop) && this.previousParent && this.context.mainCamera) {
             if (this.screenspace) {
                 const camObj = this.context.mainCamera;
@@ -215,7 +217,10 @@ export class Canvas extends UIRootComponent implements ICanvas {
             } else {
                 this.previousParent.add(this.gameObject);
             }
+            const prevAutoClearDepth = this.context.renderer.autoClear;
+            const prevAutoClearColor = this.context.renderer.autoClearColor;
             this.context.renderer.autoClear = false;
+            this.context.renderer.autoClearColor = false;
             this.context.renderer.clearDepth();
             this.onUpdateRenderMode(true);
             this.handleLayoutUpdates();
@@ -223,7 +228,8 @@ export class Canvas extends UIRootComponent implements ICanvas {
             // this.handleLayoutUpdates();
             EventSystem.ensureUpdateMeshUI(ThreeMeshUI, this.context);
             this.context.renderer.render(this.gameObject, this.context.mainCamera);
-            this.context.renderer.autoClear = true;
+            this.context.renderer.autoClear = prevAutoClearDepth;
+            this.context.renderer.autoClearColor = prevAutoClearColor;
             this.previousParent.add(this.gameObject);
         }
         this._lastMatrixWorld?.copy(this.gameObject.matrixWorld);

package/src/engine-components/webxr/WebARCameraBackground.ts

@@ -3,7 +3,6 @@ import { serializable } from "../../engine/engine_serialization_decorator";
 import { RGBAColor } from "../js-extensions/RGBAColor"
 import { WebXR } from "./WebXR";
 import { 
-    Camera as ThreeCamera, 
     Scene, 
     Texture, 
     Mesh, MeshBasicMaterial, 
@@ -11,7 +10,8 @@ import {
     PlaneGeometry, 
     ShaderLib, 
     ShaderMaterial,
-    DoubleSide
+    DoubleSide,
+    PerspectiveCamera
 } from "three";
 
 export class WebARCameraBackground extends Behaviour {
@@ -53,7 +53,7 @@ export class WebARCameraBackground extends Behaviour {
         const geometry = new PlaneGeometry();
         const scene = new Scene();
         scene.add(new Mesh(geometry, material));
-        const camera = new ThreeCamera();
+        const camera = new PerspectiveCamera();
     
         return function forceTextureInitialization(renderer, texture) {
           material.map = texture;

package/src/engine-components/webxr/WebXR.ts

@@ -1,4 +1,4 @@
-import { ArrayCamera, Color, Euler, EventDispatcher, Group, Matrix4, Mesh, MeshBasicMaterial, Object3D, Quaternion, RingGeometry, Texture, Vector3 } from 'three';
+import { ArrayCamera, Color, Euler, EventDispatcher, Group, Matrix4, Mesh, MeshBasicMaterial, Object3D, Quaternion, RingGeometry, Texture, Vector3, WebXRArrayCamera } from 'three';
 import { ARButton } from '../../include/three/ARButton.js';
 import { VRButton } from '../../include/three/VRButton.js';
 
@@ -393,7 +393,7 @@ export class WebXR extends Behaviour {
     private _originalXRRigRotation: Quaternion = new Quaternion();
 
     private onEnterXR(session: XRSession, frame: XRFrame) {
-        console.log("[XR] session begin", session);
+        console.log("[XR] session begin", session, frame);
         WebXR._isInXr = true;
 
         this.ensureRig();
@@ -414,16 +414,16 @@ export class WebXR extends Behaviour {
         // we set layers to sync raycasting and have a similar behaviour to unity
         const xr = this.context.renderer.xr;
         if (this.context.mainCamera) {
-            //@ts-ignore
-            const cam = xr.getCamera(this.context.mainCamera) as ArrayCamera;
+            const cam = xr.getCamera() as WebXRArrayCamera;
+            if(debugWebXR) console.log("WebXRCamera", cam);
             const cull = this.context.mainCameraComponent?.cullingMask;
-            if(cull !== undefined){
+            if(cam && cull !== undefined){
                 for (const c of cam.cameras) {
                     c.layers.mask = cull;
                 }
                 cam.layers.mask = cull;
             }
-            else {
+            else if (cam) {
                 for (const c of cam.cameras) {
                     c.layers.enableAll();
                 }