Add 'Model' works with GlowLayer addIncludeOnlyChildren prop. #146

src/CustomProps.ts

@@ -3,7 +3,7 @@ import { CreatedInstance } from "./CreatedInstance";
 /**
  * Props passed from controls that are not part of generated props and custom handling.  Typically used to aid declarative composition.
  */
- export type CustomProps = {
+export type CustomProps = {
   /**
    * Assign to this property on the parent.  Parent property is cleared on umnount.
    */
@@ -24,26 +24,11 @@ import { CreatedInstance } from "./CreatedInstance";
   disposeInstanceOnUnmount?: boolean
 }
 
-export type MaterialCustomProps = {
+export type AbstractMeshCustomProps = {
   /**
-   * For attaching the same material to multiple meshes (by mesh name)
+   * Signal to reconciler that child meshes are not tracked and are not part of tree.  ie: children need to be explicitly added to GlowLayer/ShadowGenerator.
    */
-   attachToMeshesByName?: string[]
-} & CustomProps;
-
-export type ShadowGeneratorCustomProps = {
-  /**
-   * List of mesh names to search for, which will be added as shadow casters.
-   */
-   shadowCasters?: string[]
-   /**
-    * List of mesh names to exclude from casting shadows (all other meshes by name will cast shadows)
-    */
-   shadowCastersExcluding?: string[]
-} & CustomProps;
-
-export type VRExperienceHelperCustomProps = {
-  enableInteractions?: boolean
+  childMeshesNotTracked?: boolean
 } & CustomProps;
 
 export type Control3DCustomProps = {
@@ -61,6 +46,29 @@ export type Control3DCustomProps = {
   onControlAdded?: (instance: CreatedInstance<any>) => void
 } & CustomProps;
 
+export type MaterialCustomProps = {
+  /**
+   * For attaching the same material to multiple meshes (by mesh name)
+   */
+  attachToMeshesByName?: string[]
+} & CustomProps;
+
+export type ShadowGeneratorCustomProps = {
+  /**
+   * List of mesh names to search for, which will be added as shadow casters.
+   */
+  shadowCasters?: string[]
+  /**
+   * List of mesh names to exclude from casting shadows (all other meshes by name will cast shadows)
+   */
+  shadowCastersExcluding?: string[]
+} & CustomProps;
+
+export type VRExperienceHelperCustomProps = {
+  enableInteractions?: boolean
+} & CustomProps;
+
+
 /**
  * The below Custom Props are added explicitly and not automatically by inheritance, so do not need union type "& CustomProps"
  */
@@ -70,28 +78,28 @@ export type ADTCustomProps = {
   /**
    * Only applicable for AdvanceDynamicTexture to attach to a mesh.  ADT.CreateForMesh(parent, ...)
    */
-   createForParentMesh?: boolean
+  createForParentMesh?: boolean
 };
 
 export type GlowLayerCustomProps = {
   /**
    * Adds all child nodes to the glow layer.
    */
-   addIncludeOnlyChildren?: boolean
+  addIncludeOnlyChildren?: boolean
 };
 
 export type VirtualKeyboardCustomProps = {
   /**
    * for VirtualKeyboard (2d input control names)
    */
-   connectControlNames?: string[]
-   /**
-    * for VirtualKeyboard
-    */
-   defaultKeyboard?: boolean
+  connectControlNames?: string[]
+  /**
+   * for VirtualKeyboard
+   */
+  defaultKeyboard?: boolean
 };
 
 /**
  * A union of all CustomProps as a convenience typing and easier maintenance in other areas of code (ie: CreatedInstance and HostConfig)
  */
-export type AnyCustomProps = CustomProps & (ADTCustomProps & Control3DCustomProps & GlowLayerCustomProps & VirtualKeyboardCustomProps & ShadowGeneratorCustomProps & MaterialCustomProps)
+export type AnyCustomProps = CustomProps & (AbstractMeshCustomProps & ADTCustomProps & Control3DCustomProps & GlowLayerCustomProps & VirtualKeyboardCustomProps & ShadowGeneratorCustomProps & MaterialCustomProps)

src/ReactBabylonJSHostConfig.ts

@@ -350,6 +350,7 @@ const ReactBabylonJSHostConfig: HostConfig<
       assignFrom: props.assignFrom,
       disposeInstanceOnUnmount: props.assignFrom === undefined,
       addIncludeOnlyChildren: props.addIncludeOnlyChildren === true,
+      childMeshesNotTracked: props.childMeshesNotTracked === true,
     };
 
     if (customProps.assignFrom !== undefined) {

src/customComponents/Model.tsx

@@ -50,7 +50,7 @@ const Model: React.FC<ModelProps> = (props: ModelProps) => {
     }
   }, []);
 
-  return <abstractMesh fromInstance={sceneLoaderResults.rootMesh!} {...rest} />;
+  return <abstractMesh fromInstance={sceneLoaderResults.rootMesh!} childMeshesNotTracked {...rest} />;
 }
 
 export default Model;

src/customHosts/AbstractMeshLifecycleListener.ts

@@ -22,6 +22,12 @@ export default class AbstractMeshLifecycleListener extends BaseLifecycleListener
         if (tmp.customProps.addIncludeOnlyChildren === true) {
           // TODO: listen for mesh disposal to remove from inclusion list?
           (tmp.hostInstance as GlowLayer).addIncludedOnlyMesh(mesh as Mesh);
+
+          if (instance.customProps.childMeshesNotTracked === true) {
+           for( const childMesh of mesh.getChildMeshes(false)) {
+            (tmp.hostInstance as GlowLayer).addIncludedOnlyMesh(childMesh as Mesh);
+           }
+          }
         }
         break;
       }

src/generatedProps.ts

@@ -1,5 +1,5 @@
 import { Key, ReactNode, Ref } from "react";
-import { ADTCustomProps, Control3DCustomProps, CustomProps, GlowLayerCustomProps, MaterialCustomProps, ShadowGeneratorCustomProps, VirtualKeyboardCustomProps, VRExperienceHelperCustomProps } from "./CustomProps";
+import { AbstractMeshCustomProps, ADTCustomProps, Control3DCustomProps, CustomProps, GlowLayerCustomProps, MaterialCustomProps, ShadowGeneratorCustomProps, VirtualKeyboardCustomProps, VRExperienceHelperCustomProps } from "./CustomProps";
 import { DynamicTerrain as ExtensionsDynamicTerrain } from "./extensions/DynamicTerrain";
 import { AbstractScene as BabylonjsCoreAbstractScene } from "@babylonjs/core/abstractScene";
 import { Scene as BabylonjsCoreScene } from "@babylonjs/core/scene";
@@ -279,7 +279,7 @@ declare global {
         interface IntrinsicElements {
             node: FiberNodeProps & FiberNodePropsCtor & BabylonNode<BabylonjsCoreNode>;
             transformNode: FiberTransformNodeProps & FiberTransformNodePropsCtor & BabylonNode<BabylonjsCoreTransformNode>;
-            abstractMesh: FiberAbstractMeshProps & FiberAbstractMeshPropsCtor & BabylonNode<BabylonjsCoreAbstractMesh>;
+            abstractMesh: FiberAbstractMeshProps & FiberAbstractMeshPropsCtor & BabylonNode<BabylonjsCoreAbstractMesh> & AbstractMeshCustomProps;
             instancedMesh: FiberInstancedMeshProps & FiberInstancedMeshPropsCtor & BabylonNode<BabylonjsCoreInstancedMesh>;
             instancedLinesMesh: FiberInstancedLinesMeshProps & FiberInstancedLinesMeshPropsCtor & BabylonNode<BabylonjsCoreInstancedLinesMesh>;
             mesh: FiberMeshProps & FiberMeshPropsCtor & BabylonNode<BabylonjsCoreMesh>;

stories/babylonjs/SpecialFX/multi-glow-layer.stories.js

@@ -30,9 +30,9 @@ const NUMBER_OF_BOXES = 20;
 
 /**
  * TODO
- * loading so slow
+ * loading model so slow...
  */
-function WithGlowLayer() {
+function WithMultiGlowLayer() {
   const glow1Ref = useRef(null);
   const glow2Ref = useRef(null);
 
@@ -64,9 +64,9 @@ function WithGlowLayer() {
 
         <hemisphericLight name='hemi' direction={Vector3.Up()} />
         <Inspector />
-        <glowLayer ref={glow1Ref} name="glow" options={{ mainTextureSamples: 4 }} intensity={1} isEnabled={true} addIncludeOnlyChildren>
+        <glowLayer ref={glow1Ref} name="glow1" options={{ mainTextureSamples: 4 }} intensity={1} isEnabled={true} addIncludeOnlyChildren>
           {Array.from(new Array(NUMBER_OF_BOXES), (_, index) => index).map(x => (
-            <box name={'glow-box-1-{number}'} position={new Vector3(Math.cos(2*Math.PI/NUMBER_OF_BOXES*x)*RADIUS,1, Math.sin(2*Math.PI/NUMBER_OF_BOXES*x)*RADIUS)}>
+            <box name={`glow-1-box-${x}`} key={`glow-1-box-${x}`} position={new Vector3(Math.cos(2*Math.PI/NUMBER_OF_BOXES*x)*RADIUS,1, Math.sin(2*Math.PI/NUMBER_OF_BOXES*x)*RADIUS)}>
               <standardMaterial diffuseColor={Color3.Red()} emissiveColor={Color3.Red()} />
             </box>
           ))}
@@ -77,7 +77,7 @@ function WithGlowLayer() {
 
         <glowLayer ref={glow2Ref} name="glow2" options={{ mainTextureSamples: 4 }} intensity={0.4} isEnabled={true} addIncludeOnlyChildren>
           {Array.from(new Array(NUMBER_OF_BOXES), (_, index) => index).map(x => (
-            <box name={'glow-box-1-{number}'} position={new Vector3(Math.cos(2*Math.PI/NUMBER_OF_BOXES*x)*RADIUS,3, Math.sin(2*Math.PI/NUMBER_OF_BOXES*x)*RADIUS)}>
+            <box name={`glow-2-box-${x}`} key={`glow-2-box-${x}`} position={new Vector3(Math.cos(2*Math.PI/NUMBER_OF_BOXES*x)*RADIUS,3, Math.sin(2*Math.PI/NUMBER_OF_BOXES*x)*RADIUS)}>
               <standardMaterial diffuseColor={Color3.Green()} emissiveColor={Color3.Green()} />
             </box>
           ))}
@@ -139,6 +139,6 @@ function WithGlowLayer() {
 
 export const MultiGlowLayer = () => (
   <div style={{ flex: 1, display: 'flex' }}>
-    <WithGlowLayer />
+    <WithMultiGlowLayer />
   </div>
 )

tools/generate-code.ts

@@ -73,7 +73,7 @@ console.log('ver:', ts.version);
 
 const CONFLICT_INTRINSIC_ELEMENTS = ['Button', 'Ellipse', 'Image', 'Line', 'Polygon'];
 
-const ALL_CUSTOM_PROPS = ['ADTCustomProps', 'Control3DCustomProps', 'CustomProps', 'GlowLayerCustomProps', 'MaterialCustomProps', 'ShadowGeneratorCustomProps', 'VirtualKeyboardCustomProps', 'VRExperienceHelperCustomProps'];
+const ALL_CUSTOM_PROPS = ['AbstractMeshCustomProps', 'ADTCustomProps', 'Control3DCustomProps', 'CustomProps', 'GlowLayerCustomProps', 'MaterialCustomProps', 'ShadowGeneratorCustomProps', 'VirtualKeyboardCustomProps', 'VRExperienceHelperCustomProps'];
 
 // would be good to check JSX.IntrinsicElements with 'keyof', but it's erased at runtime (doesn't work on dynamic strings)
 // fixes TS warning: Property 'polygon' must be of type SVGProps<SVGPolygonElement>, but here has type..., so we are skipping to generate polygon for now.
@@ -142,6 +142,7 @@ const PROPS_EXPORTS: string[] = []; // used to put all props in single import.
  * CustomProps not from @babylonjs/* modules, but custom for this project (used when not applied to entire inheritance chain).
  */
 const additionalCustomProps: Record<string, string> = {
+  [`${CLASS_NAME_PREFIX}AbstractMesh`]: 'AbstractMeshCustomProps', // not including dervived.
   [`${CLASS_NAME_PREFIX}AdvancedDynamicTexture`]: 'ADTCustomProps',
   [`${CLASS_NAME_PREFIX}GlowLayer`]: 'GlowLayerCustomProps',
   [`${CLASS_NAME_PREFIX}VirtualKeyboard`]: 'VirtualKeyboardCustomProps',