@needle-tools/engine 3.4.0-alpha → 3.5.1-alpha

package/src/engine/engine_types.ts

@@ -1,5 +1,5 @@
 import { RenderTexture } from "./engine_texture";
-import { Camera, Color, Material, Object3D, Vector3, Quaternion, Ray, Scene, Renderer, WebGLRenderer } from "three";
+import { Camera, Color, Material, Object3D, Vector3, Quaternion, Ray, Scene, Renderer, WebGLRenderer, Mesh } from "three";
 import { RGBAColor } from "../engine-components/js-extensions/RGBAColor";
 import { CollisionDetectionMode, PhysicsMaterial, RigidbodyConstraints } from "./engine_physics.types";
 import { CircularBuffer } from "./engine_utils";
@@ -20,7 +20,6 @@ export interface UIDProvider {
     generateUUID(): string;
 }
 
-
 export declare type CoroutineData = {
     comp: IComponent,
     main: Generator,
@@ -31,9 +30,17 @@ export interface ITime {
     get time(): number;
 }
 
+export interface IInput {
+    convertScreenspaceToRaycastSpace(vec: Vec2): void;
+}
+
+export interface IPhysics {
+    engine?: IPhysicsEngine;
+}
+
 export interface IContext {
     alias?: string | null;
-    hash?:string;
+    hash?: string;
 
     scene: Scene;
     renderer: WebGLRenderer;
@@ -42,6 +49,8 @@ export interface IContext {
     domElement: HTMLElement;
 
     time: ITime;
+    input: IInput;
+    physics: IPhysics;
 
     scripts: IComponent[];
     scripts_pausedChanged: IComponent[];
@@ -343,4 +352,57 @@ export class Collision {
     //     }
     //     return this._point;
     // }
-}
+}
+
+export type RaycastResult = null | { point: Vector3, collider: ICollider, normal?: Vector3 };
+
+export class SphereOverlapResult {
+    object: Object3D;
+    collider: ICollider;
+    constructor(object: Object3D, collider: ICollider) {
+        this.object = object;
+        this.collider = collider;
+    }
+}
+
+
+export interface IPhysicsEngine {
+    initialize(ctx: IContext): Promise<boolean>;
+    step(dt: number): void;
+    postStep();
+    get isUpdating(): boolean;
+    /** clear all possibly cached data (e.g. mesh data when creating scaled mesh colliders) */
+    clearCaches();
+
+    // raycasting
+    /** fast raycast without getting the normal vector */
+    raycast(origin: Vec2 | Vec3, direction: Vec3 | undefined, maxDistance: number, solid: boolean): RaycastResult;
+    /** raycast that also gets the normal vector. If you don't need it use raycast() */
+    raycastAndGetNormal(origin: Vec2 | Vec3, direction: Vec3 | undefined, maxDistance: number, solid: boolean) : RaycastResult;
+    sphereOverlap(point: Vector3, radius: number): Array<SphereOverlapResult>;
+
+    // Collider methods
+    addSphereCollider(collider: ICollider, center: Vector3, radius: number);
+    addBoxCollider(collider: ICollider, center: Vector3, size: Vector3);
+    addCapsuleCollider(collider: ICollider, center: Vector3, radius: number, height: number);
+    addMeshCollider(collider: ICollider, mesh: Mesh, convex: boolean, scale: Vector3);
+
+    // Rigidbody methods
+    wakeup(rb: IRigidbody);
+    updateProperties(rb: IRigidbody);
+    resetForces(rb: IRigidbody, wakeup: boolean);
+    resetTorques(rb: IRigidbody, wakeup: boolean);
+    addForce(rb: IRigidbody, vec: Vec3, wakeup: boolean);
+    applyImpulse(rb: IRigidbody, vec: Vec3, wakeup: boolean);
+    getLinearVelocity(rb: IRigidbody): Vec3 | null;
+    getAngularVelocity(rb: IRigidbody): Vec3 | null;
+    setAngularVelocity(rb: IRigidbody, vec: Vec3, wakeup: boolean);
+    setLinearVelocity(rb: IRigidbody, vec: Vec3, wakeup: boolean);
+
+    updateBody(comp: ICollider | IRigidbody, translation: boolean, rotation: boolean);
+    removeBody(body: IComponent);
+
+    // Joints
+    addFixedJoint(body1: IRigidbody, body2: IRigidbody)
+    addHingeJoint(body1: IRigidbody, body2: IRigidbody, anchor: Vec3, axis: Vec3)
+}

package/src/engine-components/Collider.ts

@@ -40,7 +40,7 @@ export class Collider extends Behaviour implements ICollider {
     }
 
     onDisable() {
-        this.context.physics.removeBody(this);
+        this.context.physics.engine?.removeBody(this);
     }
 
 }
@@ -55,7 +55,7 @@ export class SphereCollider extends Collider {
 
     onEnable() {
         super.onEnable();
-        this.context.physics.addSphereCollider(this, this.center, this.radius);
+        this.context.physics.engine?.addSphereCollider(this, this.center, this.radius);
     }
 }
 
@@ -68,7 +68,7 @@ export class BoxCollider extends Collider {
 
     onEnable() {
         super.onEnable();
-        this.context.physics.addBoxCollider(this, this.center, this.size);
+        this.context.physics.engine?.addBoxCollider(this, this.center, this.size);
     }
 }
 
@@ -90,7 +90,7 @@ export class MeshCollider extends Collider {
             }
         }
         if (this.sharedMesh?.isMesh) {
-            this.context.physics.addMeshCollider(this, this.sharedMesh, this.convex, getWorldScale(this.gameObject));
+            this.context.physics.engine?.addMeshCollider(this, this.sharedMesh, this.convex, getWorldScale(this.gameObject));
         }
         else {
             const group = this.sharedMesh as any as Group;
@@ -99,7 +99,7 @@ export class MeshCollider extends Collider {
                 for (const ch in group.children) {
                     const child = group.children[ch] as Mesh;
                     if (child.isMesh) {
-                        this.context.physics.addMeshCollider(this, child, this.convex, getWorldScale(this.gameObject));
+                        this.context.physics.engine?.addMeshCollider(this, child, this.convex, getWorldScale(this.gameObject));
                     }
                 }
             }
@@ -119,7 +119,7 @@ export class CapsuleCollider extends Collider {
 
     onEnable() {
         super.onEnable();
-        this.context.physics.addCapsuleCollider(this, this.center, this.height, this.radius);
+        this.context.physics.engine?.addCapsuleCollider(this, this.center, this.height, this.radius);
     }
 
 }

package/src/engine-components/Joints.ts

@@ -32,7 +32,7 @@ export abstract class Joint extends Behaviour {
 export class FixedJoint extends Joint {
 
     protected createJoint(self: Rigidbody, other: Rigidbody) {
-        this.context.physics.addFixedJoint(self, other);
+        this.context.physics.engine?.addFixedJoint(self, other);
     }
 }
 
@@ -46,7 +46,7 @@ export class HingeJoint extends Joint {
 
     protected createJoint(self: Rigidbody, other: Rigidbody) {
         if (this.axis && this.anchor)
-            this.context.physics.addHingeJoint(self, other, this.anchor, this.axis);
+            this.context.physics.engine?.addHingeJoint(self, other, this.anchor, this.axis);
     }
 
 }

package/src/engine-components/ReflectionProbe.ts

@@ -129,17 +129,28 @@ export class ReflectionProbe extends Behaviour {
         // otherwise some renderers outside of the probe will be affected or vice versa
         for (let i = 0; i < _rend.sharedMaterials.length; i++) {
             const material = _rend.sharedMaterials[i];
-            if (!material) continue;
-            if (material["envMap"] === undefined) continue;
-            if (material["envMap"] === this.texture) {
+            if (!material) {
                 continue;
             }
+            if (material["envMap"] === undefined) {
+                continue;
+            }
+
             let cached = rendererCache[i];
 
             // make sure we have the currently assigned material cached (and an up to date clone of that)
             // TODO: this is causing problems with progressive textures sometimes (depending on the order) when the version changes and we re-create materials over and over. We might want to just set the material envmap instead of making a clone
-            if (!cached || cached.material !== material || cached.copy.version !== material.version) {
-                if(debug) console.log("Cloning material", material.name, material.version);
+            let isCachedInstance = material === cached?.copy;
+            let hasChanged = !cached || cached.material.uuid !== material.uuid || cached.copy.version !== material.version;
+            if (!isCachedInstance && hasChanged) {
+                if (debug) {
+                    let reason = "";
+                    if (!cached) reason = "not cached";
+                    else if (cached.material !== material) reason = "reference changed; cached instance?: " + isCachedInstance;
+                    else if (cached.copy.version !== material.version) reason = "version changed";
+                    console.warn("Cloning material", material.name, material.version, "Reason:", reason, "\n", material.uuid, "\n", cached?.copy.uuid, "\n", _rend.name);
+                }
+
                 const clone = material.clone();
                 clone.version = material.version;
 
@@ -158,8 +169,7 @@ export class ReflectionProbe extends Behaviour {
                 clone[$reflectionProbeKey] = this;
                 clone[$originalMaterial] = material;
 
-                if (debug)
-                    console.log("Set reflection", _rend.name, _rend.guid);
+                if (debug) console.log("Set reflection", _rend.name, _rend.guid);
             }
 
             /** this is the material that we copied and that has the reflection probe */

package/src/engine-components/Renderer.ts

@@ -605,15 +605,15 @@ export class Renderer extends Behaviour implements IRenderer {
             }
         }
 
-    }
+        
+        if (this.reflectionProbeUsage !== ReflectionProbeUsage.Off && this._reflectionProbe) {
+            this._reflectionProbe.onSet(this);
+        }
 
+    }
     onBeforeRenderThree(_renderer, _scene, _camera, _geometry, material, _group) {
 
         this.loadProgressiveTextures(material);
-        // TODO: we might want to just set the material.envMap for one material during rendering instead of cloning the material
-        if (this.reflectionProbeUsage !== ReflectionProbeUsage.Off && this._reflectionProbe) {
-            this._reflectionProbe.onSet(this);
-        }
 
         if (material.envMapIntensity !== undefined) {
             const factor = this.hasLightmap ? Math.PI : 1;

package/src/engine-components/RendererLightmap.ts

@@ -1,7 +1,7 @@
 import { Behaviour, GameObject } from "./Component";
 import * as THREE from "three";
 import { Texture } from "three";
-import { Context, OnBeforeRenderCallback } from "../engine/engine_setup";
+import { Context, OnRenderCallback } from "../engine/engine_setup";
 
 // 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

package/src/engine-components/RigidBody.ts

@@ -89,7 +89,7 @@ class TransformWatch {
             this.position = {};
             // this.position = this.obj.position.clone();
             this._positionWatch.subscribeWrite((val, prop) => {
-                if (this.context.physics.isUpdating || this.mute) return;
+                if (this.context.physics.engine?.isUpdating || this.mute) return;
                 const prev = this.position![prop];
                 if (Math.abs(prev - val) < .00001) return;
                 this.position![prop] = val;
@@ -103,7 +103,7 @@ class TransformWatch {
             this.quaternion = {};
             // this.quaternion = this.obj.quaternion.clone();
             this._rotationWatch.subscribeWrite((val, prop) => {
-                if (this.context.physics.isUpdating || this.mute) return;
+                if (this.context.physics.engine?.isUpdating || this.mute) return;
                 const prev = this.quaternion![prop];
                 if (Math.abs(prev - val) < .00001) return;
                 this.quaternion![prop] = val;
@@ -245,11 +245,11 @@ export class Rigidbody extends Behaviour implements IRigidbody {
 
     onDisable() {
         this._watch?.stop();
-        this.context.physics.removeBody(this);
+        this.context.physics.engine?.removeBody(this);
     }
 
     onDestroy(): void {
-        this.context.physics.removeBody(this);
+        this.context.physics.engine?.removeBody(this);
     }
 
     onValidate() {
@@ -261,12 +261,12 @@ export class Rigidbody extends Behaviour implements IRigidbody {
         while (true) {
             if (this._propertiesChanged) {
                 this._propertiesChanged = false;
-                this.context.physics.updateProperties(this);
+                this.context.physics.engine?.updateProperties(this);
             }
             if (this._watch?.isDirty) {
                 this._watch.mute = true;
                 this._watch.applyValues();
-                this.context.physics.updateBody(this, this._watch.positionChanged, this._watch.rotationChanged);
+                this.context.physics.engine?.updateBody(this, this._watch.positionChanged, this._watch.rotationChanged);
                 this._watch.reset();
             }
             else this._watch?.syncValues();
@@ -275,10 +275,6 @@ export class Rigidbody extends Behaviour implements IRigidbody {
         }
     }
 
-    private get body() {
-        return this.context.physics.internal_getRigidbody(this);
-    }
-
     public teleport(pt: { x: number, y: number, z: number }, localspace: boolean = true) {
         this._watch?.reset(true);
         if (localspace) this.gameObject.position.set(pt.x, pt.y, pt.z);
@@ -288,11 +284,11 @@ export class Rigidbody extends Behaviour implements IRigidbody {
     }
 
     public resetForces() {
-        this.body?.resetForces(true);
+        this.context.physics.engine?.resetForces(this, true);
     }
 
     public resetTorques() {
-        this.body?.resetTorques(true);
+        this.context.physics.engine?.resetTorques(this, true);
     }
 
     public resetVelocities() {
@@ -306,24 +302,24 @@ export class Rigidbody extends Behaviour implements IRigidbody {
     }
 
     public wakeUp() {
-        this.body?.wakeUp();
+        this.context.physics.engine?.wakeup(this);
     }
 
     public applyForce(vec: Vector3, _rel?: THREE.Vector3) {
-        this.body?.addForce(vec, true);
+        this.context.physics.engine?.addForce(this, vec, true);
     }
 
     public applyImpulse(vec: Vector3) {
-        this.body?.applyImpulse(vec, true);
+        this.context.physics.engine?.applyImpulse(this, vec, true);
     }
 
     public setForce(x: number, y: number, z: number) {
-        this.body?.resetForces(true);
-        this.body?.addForce({ x, y, z }, true);
+        this.context.physics.engine?.resetForces(this, true);
+        this.context.physics.engine?.addForce(this, { x, y, z }, true);
     }
 
     public getVelocity(): Vector3 {
-        const vel = this.body?.linvel();
+        const vel = this.context.physics.engine?.getLinearVelocity(this);
         if (!vel) return this._currentVelocity.set(0, 0, 0);
         this._currentVelocity.x = vel.x;
         this._currentVelocity.y = vel.y;
@@ -334,25 +330,25 @@ export class Rigidbody extends Behaviour implements IRigidbody {
     public setVelocity(x: number | Vector3, y?: number, z?: number) {
         if (x instanceof Vector3) {
             const vec = x;
-            this.body?.setLinvel(vec, true);
+            this.context.physics.engine?.setLinearVelocity(this,vec, true);
             return;
         }
         if (y === undefined || z === undefined) return;
-        this.body?.setLinvel({ x: x, y: y, z: z }, true);
+        this.context.physics.engine?.setLinearVelocity(this, { x: x, y: y, z: z }, true);
     }
 
     public setAngularVelocity(x: number | Vector3, y?: number, z?: number) {
         if (x instanceof Vector3) {
             const vec = x;
-            this.body?.setAngvel(vec, true);
+            this.context.physics.engine?.setAngularVelocity(this, vec, true);
             return;
         }
         if (y === undefined || z === undefined) return;
-        this.body?.setAngvel({ x: x, y: y, z: z }, true);
+        this.context.physics.engine?.setAngularVelocity(this, { x: x, y: y, z: z }, true);
     }
 
     public getAngularVelocity(): Vector3 {
-        const vel = this.body?.angvel();
+        const vel = this.context.physics.engine?.getAngularVelocity(this);
         if (!vel) return this._currentVelocity.set(0, 0, 0);
         this._currentVelocity.x = vel.x;
         this._currentVelocity.y = vel.y;
@@ -381,13 +377,10 @@ export class Rigidbody extends Behaviour implements IRigidbody {
 
 
     private captureVelocity() {
-        if (this.body) {
-            const wp = getWorldPosition(this.gameObject);
-            Rigidbody.tempPosition.copy(wp);
-            const vel = wp.sub(this._lastPosition);
-            this._lastPosition.copy(Rigidbody.tempPosition);
-            this._smoothedVelocity.lerp(vel, this.context.time.deltaTime / .1);
-            // this._smoothedVelocity.set(0, 1 / this.context.time.deltaTime, 0);
-        }
+        const wp = getWorldPosition(this.gameObject);
+        Rigidbody.tempPosition.copy(wp);
+        const vel = wp.sub(this._lastPosition);
+        this._lastPosition.copy(Rigidbody.tempPosition);
+        this._smoothedVelocity.lerp(vel, this.context.time.deltaTime / .1);
     }
 }

package/src/engine-components/export/usdz/ThreeUSDZExporter.ts

@@ -17,6 +17,8 @@ import {
 	Camera,
 	Color,
 	MeshStandardMaterial,
+	sRGBEncoding,
+	MeshPhysicalMaterial,
 } from 'three';
 import * as fflate from 'three/examples/jsm/libs/fflate.module.js';
 
@@ -400,13 +402,7 @@ class USDZExporter {
 
 	async parse( scene, options: USDZExporterOptions = new USDZExporterOptions() ) {
 
-		options = Object.assign( {
-			ar: {
-				anchoring: { type: 'plane' },
-				planeAnchoring: { alignment: 'horizontal' }
-			},
-			extensions: []
-		}, options );
+		options = Object.assign( new USDZExporterOptions(), options );
 
 		this.sceneAnchoringOptions = options;
 		// @ts-ignore
@@ -598,7 +594,7 @@ function parseDocument( context: USDZExporterContext ) {
 
 	writer.appendLine( `token preliminary:anchoring:type = "${context.exporter.sceneAnchoringOptions.ar.anchoring.type}"` );
 	if (context.exporter.sceneAnchoringOptions.ar.anchoring.type === 'plane')
-		writer.appendLine( `token preliminary:planeAnchoring:alignment = "${context.exporter.sceneAnchoringOptions.ar.planeAnchoring.alignment}"` );
+		writer.appendLine( `token preliminary:planeAnchoring:alignment = "${context.exporter.sceneAnchoringOptions.planeAnchoring.alignment}"` );
 	// bit hacky as we don't have a callback here yet. Relies on the fact that the image is named identical in the ImageTracking extension.
 	if (context.exporter.sceneAnchoringOptions.ar.anchoring.type === 'image')
 		writer.appendLine( `rel preliminary:imageAnchoring:referenceImage = </${context.document.name}/Scenes/Scene/AnchoringReferenceImage>` );
@@ -679,21 +675,38 @@ function copyTexture( texture ) {
 
 	const geometry = new PlaneGeometry( 2, 2, 1, 1 );
 	const material = new ShaderMaterial( {
-		uniforms: { blitTexture: new Uniform( texture ) },
-		vertexShader: `
-			varying vec2 vUv;
-			void main(){
-				vUv = uv;
-				gl_Position = vec4(position.xy * 1.0,0.,.999999);
-			}`,
-		fragmentShader: `
-			uniform sampler2D blitTexture; 
-			varying vec2 vUv;
-			void main(){ 
-				gl_FragColor = vec4(vUv.xy, 0, 1);
-				gl_FragColor = texture2D( blitTexture, vUv);
-			}`
-	} );
+		uniforms: {
+			blitTexture: new Uniform( texture ),
+		},
+		defines: {
+			IS_SRGB: texture.encoding == sRGBEncoding,
+		},
+        vertexShader: `
+            varying vec2 vUv;
+            void main(){
+                vUv = uv;
+				vUv.y = 1. - vUv.y;
+                gl_Position = vec4(position.xy * 1.0,0.,.999999);
+            }`,
+        fragmentShader: `
+            uniform sampler2D blitTexture; 
+            varying vec2 vUv;
+
+            // took from threejs 05fc79cd52b79e8c3e8dec1e7dca72c5c39983a4
+            vec4 conv_LinearTosRGB( in vec4 value ) {
+                return vec4( mix( pow( value.rgb, vec3( 0.41666 ) ) * 1.055 - vec3( 0.055 ), value.rgb * 12.92, vec3( lessThanEqual( value.rgb, vec3( 0.0031308 ) ) ) ), value.a );
+            }
+
+            void main(){ 
+                gl_FragColor = vec4(vUv.xy, 0, 1);
+                
+                #ifdef IS_SRGB
+                gl_FragColor = conv_LinearTosRGB( texture2D( blitTexture, vUv) );
+                #else
+                gl_FragColor = texture2D( blitTexture, vUv);
+                #endif
+            }`
+    } );
 
 	const mesh = new Mesh( geometry, material );
 	mesh.frustumCulled = false;
@@ -705,7 +718,9 @@ function copyTexture( texture ) {
 	renderer.clear();
 	renderer.render( scene, cam );
 
-	return new Texture( renderer.domElement );
+	const tex = new Texture( renderer.domElement );
+	tex.encoding = texture.encoding;
+	return tex;
 
 }
 
@@ -825,7 +840,10 @@ export function buildXform( model, writer, context ) {
 	}
 
 	if ( geometry )
-		writer.beginBlock( `def Xform "${name}" (prepend references = @./geometries/Geometry_${geometry.id}.usd@</Geometry>)` );
+		writer.beginBlock( `def Xform "${name}" (
+			prepend references = @./geometries/Geometry_${geometry.id}.usd@</Geometry>
+			prepend apiSchemas = ["MaterialBindingAPI"]
+		)` );
 	else if ( camera )
 		writer.beginBlock( `def Camera "${name}"` );
 	else
@@ -929,11 +947,11 @@ function buildMesh( geometry ) {
         )
         point3f[] points = [${buildVector3Array( attributes.position, count )}]
         ${attributes.uv ?
-		`float2[] primvars:st = [${buildVector2Array( attributes.uv, count )}] (
+		`texCoord2f[] primvars:st = [${buildVector2Array( attributes.uv, count )}] (
             interpolation = "vertex"
         )` : '' }
 		${attributes.uv2 ?
-		`float2[] primvars:st2 = [${buildVector2Array( attributes.uv2, count )}] (
+		`texCoord2f[] primvars:st2 = [${buildVector2Array( attributes.uv2, count )}] (
             interpolation = "vertex"
         )` : '' }
         uniform token subdivisionScheme = "none"
@@ -1051,7 +1069,7 @@ ${array.join( '' )}
 
 }
 
-function buildMaterial( material, textures ) {
+function buildMaterial( material: MeshStandardMaterial, textures ) {
 
 	// https://graphics.pixar.com/usd/docs/UsdPreviewSurface-Proposal.html
 
@@ -1090,6 +1108,10 @@ function buildMaterial( material, textures ) {
 		const textureTransformInput = `</Materials/Material_${material.id}/${uvReader}.outputs:result>`;
 		const textureTransformOutput = `</Materials/Material_${material.id}/Transform2d_${mapType}.outputs:result>`;
 
+		const needsTextureScale = mapType !== 'normal' && (color && (color.r !== 1 || color.g !== 1 || color.b !== 1 || opacity !== 1)) || false;
+		const needsNormalScaleAndBias = mapType === 'normal';
+		const normalScaleValueString = (material.normalScale ? material.normalScale.x * 2 : 2).toFixed( PRECISION );
+
 		return `
         ${needsTextureTransform ? `def Shader "Transform2d_${mapType}" (
             sdrMetadata = {
@@ -1108,8 +1130,15 @@ function buildMaterial( material, textures ) {
         {
             uniform token info:id = "UsdUVTexture"
             asset inputs:file = @textures/Texture_${id}.${isRGBA ? 'png' : 'jpg'}@
+			token inputs:sourceColorSpace = "${ texture.colorSpace === 'srgb' ? 'sRGB' : 'raw' }"
             float2 inputs:st.connect = ${needsTextureTransform ? textureTransformOutput : textureTransformInput}
+			${needsTextureScale ? `
 			float4 inputs:scale = (${color ? color.r + ', ' + color.g + ', ' + color.b : '1, 1, 1'}, ${opacity ? opacity : '1'})
+			` : `` }
+			${needsNormalScaleAndBias ? `
+			float4 inputs:scale = (${normalScaleValueString}, ${normalScaleValueString}, ${normalScaleValueString}, 1)
+			float4 inputs:bias = (-1, -1, -1, 0)
+			` : `` }
             token inputs:wrapS = "${wrapS}"
             token inputs:wrapT = "${wrapT}"
             float outputs:r
@@ -1221,7 +1250,7 @@ function buildMaterial( material, textures ) {
 
 	}
 
-	if ( material.isMeshPhysicalMaterial ) {
+	if ( material instanceof MeshPhysicalMaterial ) {
 
 		inputs.push( `${pad}float inputs:clearcoat = ${material.clearcoat}` );
 		inputs.push( `${pad}float inputs:clearcoatRoughness = ${material.clearcoatRoughness}` );

package/src/engine-components/export/usdz/extensions/behavior/BehaviourComponents.ts

@@ -6,11 +6,11 @@ import { IPointerClickHandler } from "../../../../ui/PointerEvents";
 import { RegisteredAnimationInfo, UsdzAnimation } from "../Animation";
 import { getWorldPosition, getWorldQuaternion, getWorldScale, setWorldPosition, setWorldQuaternion, setWorldScale } from "../../../../../engine/engine_three_utils";
 
-import { Object3D, Material, Vector3, Quaternion } from "three";
+import { Object3D, Material, Vector3, Quaternion, AnimationAction } from "three";
 import { USDObject } from "../../ThreeUSDZExporter";
 
 import { BehaviorExtension, UsdzBehaviour } from "./Behaviour";
-import { ActionBuilder, ActionModel, BehaviorModel, MotionType, Space, TriggerBuilder } from "./BehavioursBuilder";
+import { ActionBuilder, ActionModel, BehaviorModel, IBehaviorElement, MotionType, Space, TriggerBuilder } from "./BehavioursBuilder";
 
 export class ChangeTransformOnClick extends Behaviour implements IPointerClickHandler, UsdzBehaviour {
 
@@ -417,6 +417,12 @@ export class PlayAnimationOnClick extends Behaviour implements IPointerClickHand
 
     @serializable()
     stateName?: string;
+    
+    @serializable()
+    stateNameAfterPlaying?: string;
+
+    @serializable()
+    loopAfterPlaying: boolean = false;
 
     onPointerClick() {
         if (!this.target) return;
@@ -425,22 +431,53 @@ export class PlayAnimationOnClick extends Behaviour implements IPointerClickHand
     }
 
     private selfModel: any;
-    private registeredAnimationModel: any;
-    private registeredAnimation?: RegisteredAnimationInfo;
+
+    private stateAnimationModel: any;
+    private stateAnimation?: RegisteredAnimationInfo;
+
+    private stateAfterPlayingAnimationModel: any;
+    private stateAfterPlayingAnimation?: RegisteredAnimationInfo;
 
     createBehaviours(_ext, model, _context) {
         if (model.uuid === this.gameObject.uuid)
             this.selfModel = model;
     }
 
+    private static animationActions: ActionModel[] = [];
+
+    onAfterHierarchy() {
+        PlayAnimationOnClick.animationActions = [];
+    }
+
     afterCreateDocument(ext, context) {
-        if (!this.registeredAnimation || !this.registeredAnimationModel) return;
+        if (!this.stateAnimation || !this.stateAnimationModel) return;
         const document = context.document;
         document.traverse(model => {
-            if (model.uuid === this.target?.uuid && this.registeredAnimation) {
+            // TODO we should probably check if a startAnimationAction already exists, and not have duplicates of identical ones;
+            // looks like otherwise we're getting some animation overlap that doesn't look good.
+            if (model.uuid === this.target?.uuid && this.stateAnimation) {
+                const sequence: IBehaviorElement[] = [];
+                let startAction = PlayAnimationOnClick.animationActions.find(a => a.affectedObjects == model && a.start == this.stateAnimation!.start && a.duration == this.stateAnimation!.duration);
+                if (!startAction) {
+                    startAction = ActionBuilder.startAnimationAction(model, this.stateAnimation.start, this.stateAnimation.duration) as ActionModel;
+                    PlayAnimationOnClick.animationActions.push(startAction);
+                }
+                sequence.push(startAction);
+
+                if (this.stateAfterPlayingAnimation && this.stateAfterPlayingAnimationModel) {
+                    let endAction = PlayAnimationOnClick.animationActions.find(a => a.affectedObjects == model && a.start == this.stateAfterPlayingAnimation!.start && a.duration == this.stateAfterPlayingAnimation!.duration);
+                    if (!endAction) {
+                        endAction = ActionBuilder.startAnimationAction(model, this.stateAfterPlayingAnimation.start, this.stateAfterPlayingAnimation.duration) as ActionModel;
+                        PlayAnimationOnClick.animationActions.push(endAction);
+                    }
+                    const idleAnim = ActionBuilder.sequence(endAction);
+                    if (this.loopAfterPlaying)
+                        idleAnim.makeLooping();
+                    sequence.push(idleAnim);
+                }
                 const playAnimationOnTap = new BehaviorModel("tap " + this.name + " for " + this.stateName + " on " + this.target?.name,
                     TriggerBuilder.tapTrigger(this.selfModel),
-                    ActionBuilder.startAnimationAction(model, this.registeredAnimation.start, this.registeredAnimation.duration)
+                    ActionBuilder.sequence(...sequence)
                 );
                 ext.addBehavior(playAnimationOnTap);
             }
@@ -449,9 +486,14 @@ export class PlayAnimationOnClick extends Behaviour implements IPointerClickHand
 
     createAnimation(ext, model, _context) {
         if (this.target && this.animator) {
+            
             const state = this.animator?.runtimeAnimatorController?.findState(this.stateName);
-            this.registeredAnimationModel = model;
-            this.registeredAnimation = ext.registerAnimation(this.target, state?.motion.clip);
+            this.stateAnimationModel = model;
+            this.stateAnimation = ext.registerAnimation(this.target, state?.motion.clip);
+
+            const stateAfter = this.animator?.runtimeAnimatorController?.findState(this.stateNameAfterPlaying);
+            this.stateAfterPlayingAnimationModel = model;
+            this.stateAfterPlayingAnimation = ext.registerAnimation(this.target, stateAfter?.motion.clip);
         }
     }