feat(general): add physics + improve build

simonedevit · simonedevit · commit f2e4b7895598 · 2025-03-10T21:39:29.000+01:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,6 +37,9 @@
         "tsc-files": "^1.1.4",
         "typescript": "^5.4.5"
     },
+    "overrides": {
+        "react-native": "0.76.5"
+    },
     "engines": {
         "node": "^22.11.0",
         "npm": "^10.9.0"
diff --git a/packages/common/index.ts b/packages/common/index.ts
@@ -151,24 +151,25 @@ export enum BabylonPackages {
 // specific properties of a single component
 export const AdditionalProps: Record<string, string> = {
     webXRCamera: ` & WebXRCameraProps`,
+    mesh: ` & MeshProps`,
 };
 
 // specific properties for a category of components
-export function getAdditionalProps(jsxElementName: string, Class: any){
-    if (jsxElementName in AdditionalProps){
+export function getAdditionalProps(jsxElementName: string, Class: any) {
+    if (jsxElementName in AdditionalProps) {
         return AdditionalProps[jsxElementName];
     }
     //@ts-ignore - build phase - Property 'Material' does not exist on type 'typeof import("... node_modules/@babylonjs/core/index", { with: { "resolution-mode": "import" } })'.
-    if (Class.prototype instanceof BabylonCore.Material){
+    if (Class.prototype instanceof BabylonCore.Material) {
         return ` & MaterialProps`;
     }
     //@ts-ignore - build phase - Property 'BaseTexture' does not exist on type 'typeof import("... node_modules/@babylonjs/core/index", { with: { "resolution-mode": "import" } })'.
-    if (Class.prototype instanceof BabylonCore.BaseTexture){
+    if (Class.prototype instanceof BabylonCore.BaseTexture) {
         return ` & TextureProps`;
     }
     //@ts-ignore - build phase - Property 'Camera' does not exist on type 'typeof import("... node_modules/@babylonjs/core/index", { with: { "resolution-mode": "import" } })'.
-    if (Class.prototype instanceof BabylonCore.Camera){
+    if (Class.prototype instanceof BabylonCore.Camera) {
         return ` & CameraProps`;
     }
     return '';
-}
+}
diff --git a/packages/library/package.json b/packages/library/package.json
@@ -35,7 +35,6 @@
     "peerDependencies": {
         "@babylonjs/core": "^7.40.2 ",
         "@babylonjs/gui": "^7.40.2 ",
-        "@babylonjs/havok": "^1.3.7",
         "@babylonjs/react-native": "^1.8.6",
         "@types/react": "^18.2.0",
         "@types/react-dom": "^18.3.1",
diff --git a/packages/library/src/_generated/babylon.core.constructors.ts b/packages/library/src/_generated/babylon.core.constructors.ts
diff --git a/packages/library/src/_generated/babylon.core.declarations.ts b/packages/library/src/_generated/babylon.core.declarations.ts
diff --git a/packages/library/src/components/hosts/CameraHost.ts b/packages/library/src/components/hosts/CameraHost.ts
@@ -18,7 +18,7 @@ export class CameraHost {
                         (webXRCamera as ComponentInstance<any>)[key] = value;
                     });
 
-                    // use metadata to store children in reconciler
+                    // use metadata to store children in renderer
                     if (!webXRCamera.metadata) {
                         webXRCamera.metadata = {
                             babylonPackage: BabylonPackages.CORE,
diff --git a/packages/library/src/components/hosts/GuiHost.ts b/packages/library/src/components/hosts/GuiHost.ts
@@ -81,7 +81,7 @@ export class GuiHost {
                 }
             });
 
-        // use metadata to store children in reconciler
+        // use metadata to store children in renderer
         if (!element.metadata) {
             element.metadata = {
                 babylonPackage: BabylonPackages.GUI,
diff --git a/packages/library/src/components/hosts/Host.test.tsx b/packages/library/src/components/hosts/Host.test.tsx
@@ -77,6 +77,21 @@ describe('Hosts tests', () => {
         expect(material).toBeNull();
     });
 
+    test('should dispose the parent and his children', async () => {
+        const boxName = 'box';
+        const boxChildrenName = `${boxName}-children`;
+        const { scene, unmount } = render(
+            <box name={boxName}>
+                <box name={boxChildrenName} />
+            </box>,
+        );
+        unmount();
+        const box = scene.getMeshById(boxName) as Mesh;
+        const boxChildren = scene.getMeshById(boxChildrenName) as Mesh;
+        expect(box).toBeNull();
+        expect(boxChildren).toBeNull();
+    });
+
     test('should invoke onCreate when the box has been created', async () => {
         const handleCreate = jest.fn();
         const boxName = 'box';
diff --git a/packages/library/src/components/hosts/Host.ts b/packages/library/src/components/hosts/Host.ts
@@ -7,7 +7,7 @@ import '../../index';
 import coreConstructors from '../../_generated/babylon.core.constructors';
 import { CoreHostProps } from '@props';
 
-const excludedProps = ['children', 'onCreate', 'assignTo', 'cloneFrom', 'instanceFrom', 'propertiesFrom', 'physicsAggregate'];
+const excludedProps = ['children', 'onCreate', 'assignTo', 'cloneFrom', 'instanceFrom', 'propertiesFrom'];
 
 export class Host {
     static createInstance(type: string, isBuilder: boolean, Class: any, props: CoreHostProps, rootContainer: RootContainer, cloneFn?: Function) {
@@ -48,7 +48,7 @@ export class Host {
             });
         }
 
-        // use metadata to store children in reconciler
+        // use metadata to store children in renderer
         if (!element.metadata) {
             element.metadata = {
                 babylonPackage: BabylonPackages.CORE,
diff --git a/packages/library/src/components/hosts/MeshHost.ts b/packages/library/src/components/hosts/MeshHost.ts
@@ -1,6 +1,6 @@
 import { ComponentInstance, RootContainer, UpdatePayload } from '@types';
 import { Host } from './Host';
-import { ActionEvent, ActionManager, ExecuteCodeAction, HighlightLayer, Mesh, PhysicsAggregate, Scene } from '@babylonjs/core';
+import { ActionEvent, ActionManager, ExecuteCodeAction, HighlightLayer, Mesh, Scene } from '@babylonjs/core';
 import { Triggerable, MeshTriggers, MeshProps, CoreHostProps } from '@props';
 
 function handleEvents(props: CoreHostProps<MeshProps>, scene: Scene) {
@@ -34,7 +34,7 @@ export class MeshHost {
     static createInstance(type: string, isBuilder: boolean, Class: any, props: CoreHostProps<MeshProps>, rootContainer: RootContainer) {
         let cloneFn = undefined;
         const scene = rootContainer.scene;
-        const { name, cloneFrom, instanceFrom, physicsAggregate } = props;
+        const { name, cloneFrom, instanceFrom } = props;
         const meshId = cloneFrom || instanceFrom;
         if (meshId) {
             cloneFn = () => {
@@ -50,9 +50,6 @@ export class MeshHost {
             };
         }
         const element = Host.createInstance(type, isBuilder, Class, props, rootContainer, cloneFn);
-        if (physicsAggregate) {
-            element.metadata.physicsAggregate = new PhysicsAggregate(element, physicsAggregate.type, physicsAggregate._options);
-        }
         element.actionManager = handleEvents(props, scene);
         element.handlers = {
             addChild: MeshHost.addChild,
@@ -74,10 +71,6 @@ export class MeshHost {
     }
 
     static removeChild(parentInstance: ComponentInstance, child: AugmentedMesh): void {
-        //FIXME: child.metadata is null. Does Babylon set it somewhere? Check it with new physic system (v2)
-        if (child.metadata && child.metadata.physicsAggregate) {
-            child.metadata.physicsAggregate.dispose();
-        }
         // you don't need, automatically done by Babylon.js when you dispose a mesh
         /*if (parentInstance instanceof HighlightLayer){
             parentInstance.removeMesh(child);
diff --git a/packages/library/src/core/Scene.tsx b/packages/library/src/core/Scene.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useRef } from 'react';
-import { Scene as BabylonScene, SceneOptions, WebXRDefaultExperienceOptions, HavokPlugin, Vector3, Nullable, Camera, Engine } from '@babylonjs/core';
+import { Scene as BabylonScene, SceneOptions, WebXRDefaultExperienceOptions, Nullable, Camera, Engine, Vector3 } from '@babylonjs/core';
 import { GUI3DManager } from '@babylonjs/gui';
-import HavokPhysics from '@babylonjs/havok';
 import { SceneContext, Store, createBabylonStore } from './store';
 import { RootContainer, type EngineContext } from '@types';
 import Reactylon from '../reconciler';
@@ -19,7 +18,7 @@ type SceneProps = React.PropsWithChildren<{
     xrDefaultExperienceOptions?: WebXRDefaultExperienceOptions;
     physicsOptions?: {
         gravity?: Parameters<BabylonScene['enablePhysics']>[0];
-        plugin?: Parameters<BabylonScene['enablePhysics']>[1];
+        plugin: Parameters<BabylonScene['enablePhysics']>[1];
     };
     /**
      * @internal
@@ -55,22 +54,10 @@ export const Scene: React.FC<SceneProps> = ({ children, sceneOptions, onSceneRea
                     gui3DManager: isGui3DManager ? new GUI3DManager(scene) : undefined,
                 };
                 onSceneReady?.(scene);
-
                 // enable physics
                 if (physicsOptions) {
-                    scene.enablePhysics(
-                        physicsOptions?.gravity || new Vector3(0, -9.8, 0),
-                        physicsOptions?.plugin ||
-                            new HavokPlugin(
-                                true,
-                                await HavokPhysics({
-                                    // TODO: serve .wasm file from your own server
-                                    locateFile: file => {
-                                        return `https://preview.babylonjs.com/havok/${file}`;
-                                    },
-                                }),
-                            ),
-                    );
+                    const { gravity, plugin } = physicsOptions;
+                    scene.enablePhysics(gravity || new Vector3(0, -9.8, 0), plugin);
                 }
                 let xrExperience = null;
                 // enable xr experience
@@ -120,7 +107,7 @@ export const Scene: React.FC<SceneProps> = ({ children, sceneOptions, onSceneRea
                 }
 
                 /* --------------------------------------------------------------------------------------- */
-                /* RECONCILER
+                /* RENDERER
                 ------------------------------------------------------------------------------------------ */
                 store.current = createBabylonStore({
                     engine,
diff --git a/packages/library/src/index.tsx b/packages/library/src/index.tsx
@@ -6,6 +6,7 @@ declare global {
     namespace JSX {
         // CORE
         interface IntrinsicElements extends CoreJSXElements {
+            physicsAggregate: Omit<CoreJSXElements['physicsAggregate'], 'transformNode'>; // omit transformNode because it will be automatically injected
             // add here other custom JSX elements
         }
         // GUI
@@ -17,4 +18,4 @@ declare global {
 
 export * from './core';
 export { default as Reactylon } from './reconciler';
-export { BabylonElements } from './types/props';
+export { BabylonElements } from './types/props';
diff --git a/packages/library/src/reconciler.ts b/packages/library/src/reconciler.ts
@@ -4,7 +4,7 @@ import * as BabylonCore from '@babylonjs/core';
 import * as BabylonGui from '@babylonjs/gui';
 import lodash from 'lodash';
 import { Logger, ReversedCollidingComponents, capitalizeFirstLetter, BabylonPackages } from '@dvmstudios/reactylon-common';
-import { type ComponentInstance, type UpdatePayload, type RootContainer, type EngineContext } from '@types';
+import { type ComponentInstance, type UpdatePayload, type RootContainer, type EngineContext, ComponentInstanceDependent } from '@types';
 import { Host, MaterialHost, TextureHost, MeshHost, AdvancedDynamicTextureHost, GuiHost, LightHost, CameraHost /*, TransformNodeHost*/ } from './components/hosts';
 import ObjectUtils from '@utils/ObjectUtils';
 import { BabylonElementsRetrievalMap, TransformKeysMap } from '@constants';
@@ -55,7 +55,24 @@ function addChild(parentInstance: ComponentInstance, child: ComponentInstance) {
     }
 }
 
-function shouldDisposeMaterialsAndTextures(child: unknown) {
+function removeChild(parentInstance: ComponentInstance, child: ComponentInstance) {
+    Logger.group('removeChild', [
+        [`parentInstance: ${parentInstance.name}`, parentInstance],
+        [`child: ${child.name}`, child],
+    ]);
+    // remove recursively children
+    if (child.metadata?.children) {
+        child.metadata.children.forEach((c: ComponentInstance) => removeChild(child, c));
+    }
+    const index = parentInstance.metadata.children.findIndex(item => item.uniqueId === child.uniqueId);
+    parentInstance.metadata.children.splice(index, 1);
+    child.handlers?.removeChild?.(parentInstance, child);
+    //const disposeMaterialsAndTextures = shouldDisposeMaterialsAndTextures(child);
+    //child.dispose?.(false, disposeMaterialsAndTextures);
+    child.dispose?.();
+}
+
+/* function shouldDisposeMaterialsAndTextures(child: unknown) {
     if (child instanceof BabylonCore.AbstractMesh) {
         // no material (i.e. "default material")
         if (!child.material) {
@@ -72,7 +89,7 @@ function shouldDisposeMaterialsAndTextures(child: unknown) {
         }
     }
     return true;
-}
+} */
 
 // check methods execution's order: "reconciler.png" and https://blog.atulr.com/react-custom-renderer-2/)
 const reconciler = ReactReconciler<
@@ -122,7 +139,7 @@ const reconciler = ReactReconciler<
                 isBuilder = true;
             } else {
                 // MeshBuilder.ExtrudePolygon
-                if (ResolvedBabylonElement === 'ExtrudePolygon') {
+                if (ResolvedBabylonElement === 'ExtrudePolygon' || ResolvedBabylonElement === 'Mesh') {
                     isBuilder = true;
                 }
                 //@ts-ignore
@@ -144,7 +161,14 @@ const reconciler = ReactReconciler<
                     createInstanceFn = LightHost.createInstance;
                 } else if (Class.prototype instanceof BabylonCore.Camera) {
                     createInstanceFn = CameraHost.createInstance;
-                } /* else if (Class.name === BabylonCore.TransformNode.name) {
+                } else if (Class.name === BabylonCore.PhysicsAggregate.name) {
+                    return {
+                        isParentDependent: true,
+                        // @ts-ignore
+                        createInstanceFn: (transformNode: BabylonCore.TransformNode) => Host.createInstance(type, isBuilder, Class, { ...props, transformNode }, rootContainer),
+                    };
+                }
+                /* else if (Class.name === BabylonCore.TransformNode.name) {
                     createInstanceFn = TransformNodeHost.createInstance;
                 }*/
                 break;
@@ -174,7 +198,12 @@ const reconciler = ReactReconciler<
      * This method happens in the render phase.It can mutate parentInstance and child, but it must not modify any other nodes.It's called while the tree is still being built up and not connected to the actual tree on the screen.
      */
 
-    appendInitialChild(parentInstance, child) {
+    appendInitialChild(parentInstance, child: ComponentInstance<ComponentInstanceDependent>) {
+        // delayed instance creation until you have the parent
+        const { isParentDependent, createInstanceFn } = child;
+        if (isParentDependent) {
+            child = createInstanceFn(parentInstance);
+        }
         // Log information about appending initial child to parent
         Logger.group('appendInitialChild', [
             [`parentInstance: ${parentInstance.name}`, parentInstance],
@@ -360,15 +389,7 @@ const reconciler = ReactReconciler<
      * React will only call it for the top - level node that is being removed.It is expected that garbage collection would take care of the whole subtree.You are not expected to traverse the child tree in it.
      */
     removeChild(parentInstance, child) {
-        Logger.group('removeChild', [
-            [`parentInstance: ${parentInstance.name}`, parentInstance],
-            [`child: ${child.name}`, child],
-        ]);
-        const index = parentInstance.metadata.children.findIndex(item => item.uniqueId === child.uniqueId);
-        parentInstance.metadata.children.splice(index, 1);
-        child.handlers?.removeChild?.(parentInstance, child);
-        const disposeMaterialsAndTextures = shouldDisposeMaterialsAndTextures(child);
-        child.dispose?.(false, disposeMaterialsAndTextures);
+        removeChild(parentInstance, child);
     },
 
     /*
@@ -379,11 +400,16 @@ const reconciler = ReactReconciler<
             ['container', container],
             [`child: ${child.name}`, child],
         ]);
+        // remove recursively children
+        if (child.metadata?.children) {
+            child.metadata.children.forEach((c: ComponentInstance) => removeChild(child, c));
+        }
         const index = container.metadata.children.findIndex(item => item.uniqueId === child.uniqueId);
         container.metadata.children.splice(index, 1);
         child.handlers?.removeChild?.(container, child);
-        const disposeMaterialsAndTextures = shouldDisposeMaterialsAndTextures(child);
-        child.dispose?.(false, disposeMaterialsAndTextures);
+        //const disposeMaterialsAndTextures = shouldDisposeMaterialsAndTextures(child);
+        //child.dispose?.(false, disposeMaterialsAndTextures);
+        child.dispose?.();
     },
 
     /*
@@ -421,9 +447,9 @@ const reconciler = ReactReconciler<
         //TODO: fine tune ObjectUtils.isEqualCustomizer to avoid unnecessary rerenders
 
         //@ts-ignore
-        const { children: _oldChildren, physicsAggregate: _oldPhysicsAggregate, ...oldPropsWihoutChildren } = oldProps;
+        const { children: _oldChildren, ...oldPropsWihoutChildren } = oldProps;
         //@ts-ignore
-        const { children: _newChildren, physicsAggregate: _newPhysicsAggregate, ...newPropsWihoutChildren } = newProps;
+        const { children: _newChildren, ...newPropsWihoutChildren } = newProps;
 
         const areSameProps = isEqualWith(oldPropsWihoutChildren, newPropsWihoutChildren, ObjectUtils.isEqualCustomizer);
         if (areSameProps) {
diff --git a/packages/library/src/types/props.ts b/packages/library/src/types/props.ts
@@ -1,4 +1,4 @@
-import { ActionEvent, ActionManager, HighlightLayer, Node, Observable, PhysicsAggregate, Scene, StandardMaterial } from '@babylonjs/core';
+import { ActionEvent, ActionManager, HighlightLayer, Node, Observable, Scene, StandardMaterial } from '@babylonjs/core';
 import { type Either } from './types';
 import { AdvancedDynamicTexture, Vector2WithInfo } from '@babylonjs/gui';
 
@@ -124,7 +124,7 @@ export type LightProps = Clonable;
 export type CameraProps = {
     // only for multiple canvas and single scene
     canvas?: HTMLCanvasElement;
-}
+};
 
 export type WebXRCameraProps = {
     // not from XR default experience helper
@@ -138,16 +138,12 @@ export type MaterialProps = Partial<Clonable> & {
 // you don't need to add it to JSX namespace because it is dynamically done in generator (due to multitude of mesh components)
 export type MeshProps = Either<Clonable, Instanceable> &
     Triggerable & {
-        // add here other mesh props (e.g. "onDrag")
-        physicsAggregate?: {
-            type: ConstructorParameters<typeof PhysicsAggregate>[1];
-            _options: ConstructorParameters<typeof PhysicsAggregate>[2];
-        };
         // highlight layer props
         highlightLayer?: {
             color: Parameters<HighlightLayer['addMesh']>[1];
             glowEmissiveOnly?: Parameters<HighlightLayer['addMesh']>[2];
         };
+        // add here other mesh props (e.g. "onDrag")
     };
 
 export type GuiProps =
diff --git a/packages/library/src/types/types.ts b/packages/library/src/types/types.ts
@@ -50,7 +50,7 @@ export type BabylonProps<Props, ConstructorProps, Element> = {
         children?: React.ReactNode;
     } & CommonProps<Element>;
 
-/* PROPS USED BY RECONCILER */
+/* PROPS USED BY RENDERER */
 
 export type ComponentInstance<T = unknown> = Partial<Clonable> &
     Pick<Node, 'name' | 'uniqueId' | 'dispose'> & {
@@ -70,6 +70,11 @@ export type ComponentInstance<T = unknown> = Partial<Clonable> &
         }>;
     } & T;
 
+export type ComponentInstanceDependent = {
+    isParentDependent: boolean;
+    createInstanceFn: (...args: Array<unknown>) => any;
+};
+
 export type UpdatePayload = {
     [key: string]: unknown;
 };
diff --git a/packages/library/src/web/Engine.tsx b/packages/library/src/web/Engine.tsx
diff --git a/packages/library/webpack.config.ts b/packages/library/webpack.config.ts

Original file line number	Diff line number	Diff line change
`@@ -81,7 +81,7 @@ export class GuiHost {`
`81`	`81`	`}`
`82`	`82`	`});`
`83`	`83`
`84`		`- // use metadata to store children in reconciler`
	`84`	`+ // use metadata to store children in renderer`
`85`	`85`	`if (!element.metadata) {`
`86`	`86`	`element.metadata = {`
`87`	`87`	`babylonPackage: BabylonPackages.GUI,`