add Gizmo and UtilityLayerRenderer support

docs/api.md

@@ -24,7 +24,7 @@ If you want to declaratively use something not listed here create an issue :)  S
 
 5. **Lights** - directionalLight, hemisphericLight, light, pointLight, shadowLight, spotLight
 
-6. **Textures** - advancedDynamicTexture, baseTexture, colorGradingTexture, cubeTexture, customProceduralTexture, dynamicTexture, equiRectangularCubeTexture, hdrCubeTexture, htmlElementTexture, mirrorTexture, multiRenderTarget, multiviewRenderTarget, noiseProceduralTexture, proceduralTexture, rawCubeTexture, rawTexture, rawTexture2DArray, rawTexture3D, refractionTexture, renderTargetTexture, texture, videoTexture
+6. **Textures** - advancedDynamicTexture, baseTexture, colorGradingTexture, cubeTexture, customProceduralTexture, dynamicTexture, equiRectangularCubeTexture, hdrCubeTexture, htmlElementTexture, mirrorTexture, multiRenderTarget, multiviewRenderTarget, noiseProceduralTexture, proceduralTexture, rawCubeTexture, rawTexture, rawTexture2DArray, rawTexture3D, refractionTexture, renderTargetTexture, texture, thinTexture, videoTexture
 
 7. **EffectLayers** - effectLayer, glowLayer, highlightLayer
 
@@ -33,10 +33,11 @@ If you want to declaratively use something not listed here create an issue :)  S
 9. **PostProcessRenderPipelines**: defaultRenderingPipeline, lensRenderingPipeline, postProcessRenderPipeline, ssao2RenderingPipeline, ssaoRenderingPipeline, standardRenderingPipeline
 
 10. **PostProcesss** anaglyphPostProcess, blackAndWhitePostProcess, bloomMergePostProcess, blurPostProcess, chromaticAberrationPostProcess, circleOfConfusionPostProcess, colorCorrectionPostProcess, convolutionPostProcess, depthOfFieldBlurPostProcess, depthOfFieldMergePostProcess, displayPassPostProcess, extractHighlightsPostProcess, filterPostProcess, fxaaPostProcess, grainPostProcess, highlightsPostProcess, imageProcessingPostProcess, motionBlurPostProcess, passCubePostProcess, passPostProcess, postProcess, refractionPostProcess, screenSpaceCurvaturePostProcess, screenSpaceReflectionPostProcess, sharpenPostProcess, stereoscopicInterlacePostProcess, stereoscopicInterlacePostProcessI, subSurfaceScatteringPostProcess, tonemapPostProcess, volumetricLightScatteringPostProcess, vrDistortionCorrectionPostProcess, vrMultiviewToSingleviewPostProcess
-
 > note: for `PostProcess` (and `PostProcessRenderPipeline`) the `ImageProcessingConfiguration` and `PrePassConfiguration` properties can be declared with `assignFrom`.
 
-11. **Others** - adtForMesh, adtFullScreenUi, environmentHelper, physicsImpostor, pointsCloudSystem, shadowGenerator / cascadedShadowGenerator, viewport, vrExperienceHelper
+11. **Gizmo** axisDragGizmo, axisScaleGizmo, boundingBoxGizmo, cameraGizmo, gizmo, lightGizmo, planeDragGizmo, planeRotationGizmo, positionGizmo, rotationGizmo, scaleGizmo
+
+12. **Others** - adtForMesh, adtForMeshTexture, adtFullScreenUi, environmentHelper, physicsImpostor, pointsCloudSystem, shadowGenerator / cascadedShadowGenerator, utilityLayerRenderer, viewport, vrExperienceHelper
 
 ## @babylonjs/gui
 1. GUI3DManager

src/CreatedInstance.ts

@@ -25,6 +25,8 @@ export interface InstanceMetadataParameter {
   isGlowLayer?: boolean;
   isBehavior?: boolean;
   isShadowGenerator?: boolean
+  isUtilityLayerRenderer?: boolean
+  isGizmo?: boolean
 }
 
 export interface CreatedInstanceMetadata extends InstanceMetadataParameter {

src/ReactBabylonJSHostConfig.ts

@@ -455,7 +455,9 @@ const ReactBabylonJSHostConfig: HostConfig<
 
     // Consider these being dynamically attached to a list, much like PropsHandlers<T>
     let metadataLifecycleListenerName: string | undefined;
-    if (metadata.isMaterial === true) {
+    if (metadata.isGizmo === true) {
+      metadataLifecycleListenerName = 'Gizmo';
+    } else if (metadata.isMaterial === true) {
       metadataLifecycleListenerName = 'Materials';
     } else if (metadata.isTexture === true) { // must be before .isGUI2DControl, since ADT/FullScreenUI declare both.
       metadataLifecycleListenerName = 'Textures';

src/customHosts/GizmoLifecycleListener.ts

@@ -0,0 +1,36 @@
+import { Gizmo } from '@babylonjs/core/Gizmos/gizmo';
+import { Texture } from '@babylonjs/core/Materials/Textures/texture.js';
+
+import { CreatedInstance } from '../CreatedInstance';
+import BaseLifecycleListener from './BaseLifecycleListener';
+
+export default class GizmoLifecycleListener extends BaseLifecycleListener<Texture, any> {
+  onMount(instance: CreatedInstance<Texture>) {
+    const gizmo = instance.hostInstance as any as Gizmo;
+
+    let tmp: CreatedInstance<any> | null = instance.parent;
+    let foundUtilityLayerRender = false;
+    while (tmp !== null) {
+      if (tmp.metadata && tmp.metadata.isUtilityLayerRenderer === true) {
+        gizmo.gizmoLayer = tmp.hostInstance;
+        foundUtilityLayerRender = true;
+        break;
+      }
+      tmp = tmp.parent;
+    }
+
+    if (foundUtilityLayerRender !== true) {
+      console.error('utility layer not found (not attaching to mesh)');
+    } else {
+      // TODO: determine if we are searching for a Mesh or Node to attach to.
+      let tmp: CreatedInstance<any> | null = instance.parent;
+      while (tmp !== null) {
+        if (tmp.metadata && tmp.metadata.isMesh === true) {
+          gizmo.attachedMesh = tmp.hostInstance;
+          break;
+        }
+        tmp = tmp.parent;
+      }
+    }
+  }
+}

src/customHosts/index.ts

@@ -21,4 +21,5 @@ export { default as BehaviorLifecycleListener } from './BehaviorsLifecycleListen
 export { default as FallbackLifecycleListener } from './FallbackLifecycleListener';
 export { default as ViewportLifecycleListener } from './ViewportLifecycleListener';
 export { default as EngineViewLifecycleListener} from './EngineViewLifecycleListener';
-export { default as AbstractMeshLifecycleListener} from './AbstractMeshLifecycleListener';
+export { default as AbstractMeshLifecycleListener} from './AbstractMeshLifecycleListener';
+export { default as GizmoLifecycleListener} from './GizmoLifecycleListener';