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

package/src/engine-components/Renderer.ts

@@ -10,7 +10,7 @@ import { NEEDLE_render_objects } from "../engine/extensions/NEEDLE_render_object
 import { NEEDLE_progressive } from "../engine/extensions/NEEDLE_progressive";
 import { NEED_UPDATE_INSTANCE_KEY } from "../engine/engine_instancing";
 import { IRenderer, ISharedMaterials } from "../engine/engine_types";
-import { debug, ReflectionProbe } from "./ReflectionProbe";
+import { ReflectionProbe } from "./ReflectionProbe";
 import { setCustomVisibility } from "../engine/js-extensions/Layers";
 import { isLocalNetwork } from "../engine/engine_networking_utils";
 import { showBalloonWarning } from "../engine/debug/debug";
@@ -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");
@@ -184,7 +183,7 @@ class SharedMaterialArray implements ISharedMaterials {
         this.changed = true;
     }
 
-    private getMaterial(index: number) : Material | null {
+    private getMaterial(index: number): Material | null {
         index = this.resolveIndex(index);
         if (index < 0) return null;
         const obj = this._targets;
@@ -347,7 +346,7 @@ export class Renderer extends Behaviour implements IRenderer {
         if (debugRenderer) console.log("Renderer ", this.name, this);
         this.clearInstancingState();
 
-        if (this.probeAnchor && debug) this.probeAnchor.add(new AxesHelper(.2));
+        if (this.probeAnchor && debugRenderer) this.probeAnchor.add(new AxesHelper(.2));
 
         this._reflectionProbe = null;
 
@@ -364,11 +363,12 @@ export class Renderer extends Behaviour implements IRenderer {
                 for (let i = 0; i < this.gameObject.children.length; i++) {
                     const ch = this.gameObject.children[i];
                     // ignore nested groups or objects that have their own renderer (aka their own render order settings)
-                    if (ch.type !== "Mesh" || GameObject.getComponent(ch, Renderer)) continue;
+                    if (!this.isMeshOrSkinnedMesh(ch) || GameObject.getComponent(ch, Renderer)) continue;
                     if (this.renderOrder.length <= index) {
                         console.error("Incorrect element count", this);
                         break;
                     }
+                    // if(debugRenderer) console.log("Setting render order", ch, this.renderOrder[index])
                     ch.renderOrder = this.renderOrder[index];
                     index += 1;
                 }
@@ -419,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)
@@ -439,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
@@ -449,7 +449,7 @@ export class Renderer extends Behaviour implements IRenderer {
                 }
             }
             else {
-                if (debug) console.warn("Lightmap not found", this.sourceId, this.lightmapIndex);
+                if (debugRenderer) console.warn("Lightmap not found", this.sourceId, this.lightmapIndex);
             }
         }
 
@@ -562,7 +562,7 @@ export class Renderer extends Behaviour implements IRenderer {
         else {
             this.applySettings(this.gameObject);
         }
-        
+
         if (this.sharedMaterials.changed) {
             this.sharedMaterials.changed = false;
             this.applyLightmapping();
@@ -605,7 +605,7 @@ export class Renderer extends Behaviour implements IRenderer {
             }
         }
 
-        
+
         if (this.reflectionProbeUsage !== ReflectionProbeUsage.Off && this._reflectionProbe) {
             this._reflectionProbe.onSet(this);
         }

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/ui/PointerEvents.ts

@@ -48,6 +48,12 @@ export class PointerEventData implements IInputEventArgs {
         this.event = events;
         this.input = input;
     }
+
+    clone() {
+        const clone = new PointerEventData(this.input, this.event);
+        Object.assign(clone, this);
+        return clone;
+    }
 }
 
 export interface IPointerDownHandler {

package/src/engine-components/utils/LookAt.ts

@@ -34,8 +34,15 @@ export class LookAt extends Behaviour implements UsdzBehaviour {
         if (this.keepUpDirection)
             lookTarget.y = lookFrom.y;
         
-        if (this.copyTargetRotation)
+        if (this.copyTargetRotation) {
             setWorldQuaternion(this.gameObject, getWorldQuaternion(target));
+
+            // look at forward again so we don't get any roll
+            if (this.keepUpDirection) {
+                const forwardPoint = lookFrom.sub(this.forward);
+                this.gameObject.lookAt(forwardPoint);
+            }
+        }
         else
             this.gameObject.lookAt(lookTarget);
         

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();
                 }