@needle-tools/engine 3.4.0-alpha → 3.5.0-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/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,9 @@ import {
 	Camera,
 	Color,
 	MeshStandardMaterial,
+	LinearEncoding,
+	sRGBEncoding,
+	MeshPhysicalMaterial,
 } from 'three';
 import * as fflate from 'three/examples/jsm/libs/fflate.module.js';
 
@@ -400,13 +403,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 +595,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 +676,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 +719,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 +841,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 +948,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 +1070,7 @@ ${array.join( '' )}
 
 }
 
-function buildMaterial( material, textures ) {
+function buildMaterial( material: MeshStandardMaterial, textures ) {
 
 	// https://graphics.pixar.com/usd/docs/UsdPreviewSurface-Proposal.html
 
@@ -1090,6 +1109,13 @@ function buildMaterial( material, textures ) {
 		const textureTransformInput = `</Materials/Material_${material.id}/${uvReader}.outputs:result>`;
 		const textureTransformOutput = `</Materials/Material_${material.id}/Transform2d_${mapType}.outputs:result>`;
 
+		const rawTextureExtra = `(
+			colorSpace = "Raw"
+		)`;
+		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 = {
@@ -1107,9 +1133,15 @@ function buildMaterial( material, textures ) {
 		def Shader "Texture_${texture.id}_${mapType}"
         {
             uniform token info:id = "UsdUVTexture"
-            asset inputs:file = @textures/Texture_${id}.${isRGBA ? 'png' : 'jpg'}@
+            asset inputs:file = @textures/Texture_${id}.${isRGBA ? 'png' : 'jpg'}@ ${mapType === 'normal' ? rawTextureExtra : ''}
             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 +1253,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);
         }
     }
 

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

@@ -191,7 +191,8 @@ export class RectTransform extends BaseUIComponent implements IRectTransform, IR
 
         const uiobject = this.shadowComponent;
         if (!uiobject) return;
-        this._parentRectTransform = GameObject.getComponentInParent(this.gameObject.parent!, RectTransform) as RectTransform;
+        if (!this.gameObject.parent) return;
+        this._parentRectTransform = GameObject.getComponentInParent(this.gameObject.parent, RectTransform) as RectTransform;
 
         this._transformNeedsUpdate = false;
         this.lastMatrix.copy(this.gameObject.matrix);
@@ -228,7 +229,7 @@ export class RectTransform extends BaseUIComponent implements IRectTransform, IR
         else {
             // We have to rotate the canvas when it's in worldspace
             const canvas = this.Root as any as ICanvas;
-            if (!canvas.screenspace) uiobject.rotation.y = Math.PI;
+            if (canvas && !canvas.screenspace) uiobject.rotation.y = Math.PI;
         }
 
         // iterate other components on this object that might need to know about the transform change