add gizmo lighting

inspector/src/components/sceneExplorer/entities/sceneTreeItemComponent.tsx

@@ -165,7 +165,7 @@ export class SceneTreeItemComponent extends React.Component<ISceneTreeItemCompon
 
         const manager: GizmoManager = scene.reservedDataStore.gizmoManager;
         // Allow picking of light gizmo when a gizmo mode is selected
-        this._gizmoLayerOnPointerObserver = UtilityLayerRenderer.DefaultUtilityLayer.utilityLayerScene.onPointerObservable.add((pointerInfo)=>{
+        this._gizmoLayerOnPointerObserver = UtilityLayerRenderer.DefaultGizmoUtilityLayer.utilityLayerScene.onPointerObservable.add((pointerInfo)=>{
             if (pointerInfo.type == PointerEventTypes.POINTERDOWN) {
                 if (pointerInfo.pickInfo && pointerInfo.pickInfo.pickedMesh) {
                     var node: Nullable<any> = pointerInfo.pickInfo.pickedMesh;

src/Gizmos/axisDragGizmo.ts

@@ -37,20 +37,18 @@ export class AxisDragGizmo extends Gizmo {
     /** @hidden */
     public static _CreateArrow(scene: Scene, material: StandardMaterial): TransformNode {
         var arrow = new TransformNode("arrow", scene);
-        var cylinder = CylinderBuilder.CreateCylinder("cylinder", { diameterTop: 0, height: 1.5, diameterBottom: 0.75, tessellation: 96 }, scene);
+        var cylinder = CylinderBuilder.CreateCylinder("cylinder", { diameterTop: 0, height: 0.075, diameterBottom: 0.0375, tessellation: 96 }, scene);
         var line = LinesBuilder.CreateLines("line", { points: [new Vector3(0, 0, 0), new Vector3(0, 1.1, 0)] }, scene);
-        line.color = material.emissiveColor;
+        line.color = material.diffuseColor;
         cylinder.parent = arrow;
         line.parent = arrow;
 
         // Position arrow pointing in its drag axis
-        cylinder.scaling.scaleInPlace(0.05);
         cylinder.material = material;
         cylinder.rotation.x = Math.PI / 2;
         cylinder.position.z += 0.3;
         line.scaling.scaleInPlace(0.26);
         line.rotation.x = Math.PI / 2;
-        line.material = material;
         return arrow;
     }
 
@@ -70,17 +68,16 @@ export class AxisDragGizmo extends Gizmo {
      * @param dragAxis The axis which the gizmo will be able to drag on
      * @param color The color of the gizmo
      */
-    constructor(dragAxis: Vector3, color: Color3 = Color3.Gray(), gizmoLayer: UtilityLayerRenderer = UtilityLayerRenderer.DefaultUtilityLayer) {
+    constructor(dragAxis: Vector3, color: Color3 = Color3.Gray(), gizmoLayer: UtilityLayerRenderer = UtilityLayerRenderer.DefaultGizmoUtilityLayer) {
         super(gizmoLayer);
 
         // Create Material
         var coloredMaterial = new StandardMaterial("", gizmoLayer.utilityLayerScene);
-        coloredMaterial.disableLighting = true;
-        coloredMaterial.emissiveColor = color;
+        coloredMaterial.diffuseColor = color;
+        coloredMaterial.specularColor = color.subtract(new Color3(0.1, 0.1, 0.1));
 
         var hoverMaterial = new StandardMaterial("", gizmoLayer.utilityLayerScene);
-        hoverMaterial.disableLighting = true;
-        hoverMaterial.emissiveColor = color.add(new Color3(0.3, 0.3, 0.3));
+        hoverMaterial.diffuseColor = color.add(new Color3(0.3, 0.3, 0.3));
 
         // Build mesh on root node
         var arrow = AxisDragGizmo._CreateArrow(gizmoLayer.utilityLayerScene, coloredMaterial);
@@ -136,7 +133,7 @@ export class AxisDragGizmo extends Gizmo {
             this._rootMesh.getChildMeshes().forEach((m) => {
                 m.material = material;
                 if ((<LinesMesh>m).color) {
-                    (<LinesMesh>m).color = material.emissiveColor;
+                    (<LinesMesh>m).color = material.diffuseColor;
                 }
             });
         });

src/Gizmos/axisScaleGizmo.ts

@@ -42,23 +42,22 @@ export class AxisScaleGizmo extends Gizmo {
      * @param dragAxis The axis which the gizmo will be able to scale on
      * @param color The color of the gizmo
      */
-    constructor(dragAxis: Vector3, color: Color3 = Color3.Gray(), gizmoLayer: UtilityLayerRenderer = UtilityLayerRenderer.DefaultUtilityLayer) {
+    constructor(dragAxis: Vector3, color: Color3 = Color3.Gray(), gizmoLayer: UtilityLayerRenderer = UtilityLayerRenderer.DefaultGizmoUtilityLayer) {
         super(gizmoLayer);
 
         // Create Material
         this._coloredMaterial = new StandardMaterial("", gizmoLayer.utilityLayerScene);
-        this._coloredMaterial.disableLighting = true;
-        this._coloredMaterial.emissiveColor = color;
+        this._coloredMaterial.diffuseColor = color;
+        this._coloredMaterial.specularColor = color.subtract(new Color3(0.1, 0.1, 0.1));
 
         var hoverMaterial = new StandardMaterial("", gizmoLayer.utilityLayerScene);
-        hoverMaterial.disableLighting = true;
-        hoverMaterial.emissiveColor = color.add(new Color3(0.3, 0.3, 0.3));
+        hoverMaterial.diffuseColor = color.add(new Color3(0.3, 0.3, 0.3));
 
         // Build mesh on root node
         var arrow = new AbstractMesh("", gizmoLayer.utilityLayerScene);
         var arrowMesh = BoxBuilder.CreateBox("yPosMesh", { size: 0.4 }, gizmoLayer.utilityLayerScene);
         var arrowTail = LinesBuilder.CreateLines("yPosMesh", { points: [new Vector3(0, 0, 0), new Vector3(0, 1.1, 0)] }, gizmoLayer.utilityLayerScene);
-        arrowTail.color = this._coloredMaterial.emissiveColor;
+        arrowTail.color = this._coloredMaterial.diffuseColor;
         arrow.addChild(arrowMesh);
         arrow.addChild(arrowTail);
 
@@ -69,7 +68,6 @@ export class AxisScaleGizmo extends Gizmo {
         arrowMesh.position.z += 0.3;
         arrowTail.scaling.scaleInPlace(0.26);
         arrowTail.rotation.x = Math.PI / 2;
-        arrowTail.material = this._coloredMaterial;
         arrow.lookAt(this._rootMesh.position.add(dragAxis));
         this._rootMesh.addChild(arrow);
         arrow.scaling.scaleInPlace(1 / 3);
@@ -130,7 +128,7 @@ export class AxisScaleGizmo extends Gizmo {
             this._rootMesh.getChildMeshes().forEach((m) => {
                 m.material = material;
                 if ((<LinesMesh>m).color) {
-                    (<LinesMesh>m).color = material.emissiveColor;
+                    (<LinesMesh>m).color = material.diffuseColor;
                 }
             });
         });
@@ -163,7 +161,7 @@ export class AxisScaleGizmo extends Gizmo {
             this._rootMesh.getChildMeshes().forEach((m) => {
                 m.material = this._coloredMaterial;
                 if ((<LinesMesh>m).color) {
-                    (<LinesMesh>m).color = this._coloredMaterial.emissiveColor;
+                    (<LinesMesh>m).color = this._coloredMaterial.diffuseColor;
                 }
             });
             this._customMeshSet = false;

src/Gizmos/gizmo.ts

@@ -78,7 +78,7 @@ export class Gizmo implements IDisposable {
      */
     constructor(
         /** The utility layer the gizmo will be added to */
-        public gizmoLayer: UtilityLayerRenderer = UtilityLayerRenderer.DefaultUtilityLayer) {
+        public gizmoLayer: UtilityLayerRenderer = UtilityLayerRenderer.DefaultGizmoUtilityLayer) {
         this._rootMesh = new Mesh("gizmoRootNode", gizmoLayer.utilityLayerScene);
         this._beforeRenderObserver = this.gizmoLayer.utilityLayerScene.onBeforeRenderObservable.add(() => {
             this._update();

src/Gizmos/gizmoManager.ts

@@ -54,7 +54,7 @@ export class GizmoManager implements IDisposable {
     constructor(private scene: Scene) {
         this._defaultKeepDepthUtilityLayer = new UtilityLayerRenderer(scene);
         this._defaultKeepDepthUtilityLayer.utilityLayerScene.autoClearDepthAndStencil = false;
-        this._defaultUtilityLayer = new UtilityLayerRenderer(scene);
+        this._defaultUtilityLayer = UtilityLayerRenderer.DefaultGizmoUtilityLayer;
 
         this.gizmos = { positionGizmo: null, rotationGizmo: null, scaleGizmo: null, boundingBoxGizmo: null };
 
@@ -204,7 +204,6 @@ export class GizmoManager implements IDisposable {
             }
         }
         this._defaultKeepDepthUtilityLayer.dispose();
-        this._defaultUtilityLayer.dispose();
         this.boundingBoxDragBehavior.detach();
         this.onAttachedToMeshObservable.clear();
     }

src/Gizmos/planeRotationGizmo.ts

@@ -41,17 +41,16 @@ export class PlaneRotationGizmo extends Gizmo {
      * @param color The color of the gizmo
      * @param tessellation Amount of tessellation to be used when creating rotation circles
      */
-    constructor(planeNormal: Vector3, color: Color3 = Color3.Gray(), gizmoLayer: UtilityLayerRenderer = UtilityLayerRenderer.DefaultUtilityLayer, tessellation = 32) {
+    constructor(planeNormal: Vector3, color: Color3 = Color3.Gray(), gizmoLayer: UtilityLayerRenderer = UtilityLayerRenderer.DefaultGizmoUtilityLayer, tessellation = 32) {
         super(gizmoLayer);
 
         // Create Material
         var coloredMaterial = new StandardMaterial("", gizmoLayer.utilityLayerScene);
-        coloredMaterial.disableLighting = true;
-        coloredMaterial.emissiveColor = color;
+        coloredMaterial.diffuseColor = color;
+        coloredMaterial.specularColor = color.subtract(new Color3(0.1, 0.1, 0.1));
 
         var hoverMaterial = new StandardMaterial("", gizmoLayer.utilityLayerScene);
-        hoverMaterial.disableLighting = true;
-        hoverMaterial.emissiveColor = color.add(new Color3(0.3, 0.3, 0.3));
+        hoverMaterial.diffuseColor = color.add(new Color3(0.3, 0.3, 0.3));
 
         // Build mesh on root node
         var parentMesh = new AbstractMesh("", gizmoLayer.utilityLayerScene);
@@ -64,11 +63,10 @@ export class PlaneRotationGizmo extends Gizmo {
             points.push(new Vector3(radius * Math.sin(radian), 0, radius * Math.cos(radian)));
         }
         let rotationMesh = Mesh.CreateLines("", points, gizmoLayer.utilityLayerScene);
-        rotationMesh.color = coloredMaterial.emissiveColor;
+        rotationMesh.color = coloredMaterial.diffuseColor;
 
         // Position arrow pointing in its drag axis
         rotationMesh.scaling.scaleInPlace(0.26);
-        rotationMesh.material = coloredMaterial;
         rotationMesh.rotation.x = Math.PI / 2;
         parentMesh.addChild(rotationMesh);
         parentMesh.lookAt(this._rootMesh.position.add(planeNormal));
@@ -187,7 +185,7 @@ export class PlaneRotationGizmo extends Gizmo {
             this._rootMesh.getChildMeshes().forEach((m) => {
                 m.material = material;
                 if ((<LinesMesh>m).color) {
-                    (<LinesMesh>m).color = material.emissiveColor;
+                    (<LinesMesh>m).color = material.diffuseColor;
                 }
             });
         });

src/Gizmos/positionGizmo.ts

@@ -45,7 +45,7 @@ export class PositionGizmo extends Gizmo {
      * Creates a PositionGizmo
      * @param gizmoLayer The utility layer the gizmo will be added to
      */
-    constructor(gizmoLayer: UtilityLayerRenderer = UtilityLayerRenderer.DefaultUtilityLayer) {
+    constructor(gizmoLayer: UtilityLayerRenderer = UtilityLayerRenderer.DefaultGizmoUtilityLayer) {
         super(gizmoLayer);
         this.xGizmo = new AxisDragGizmo(new Vector3(1, 0, 0), Color3.Red().scale(0.5), gizmoLayer);
         this.yGizmo = new AxisDragGizmo(new Vector3(0, 1, 0), Color3.Green().scale(0.5), gizmoLayer);

src/Gizmos/rotationGizmo.ts

@@ -46,7 +46,7 @@ export class RotationGizmo extends Gizmo {
      * @param gizmoLayer The utility layer the gizmo will be added to
      * @param tessellation Amount of tessellation to be used when creating rotation circles
      */
-    constructor(gizmoLayer: UtilityLayerRenderer = UtilityLayerRenderer.DefaultUtilityLayer, tessellation = 32) {
+    constructor(gizmoLayer: UtilityLayerRenderer = UtilityLayerRenderer.DefaultGizmoUtilityLayer, tessellation = 32) {
         super(gizmoLayer);
         this.xGizmo = new PlaneRotationGizmo(new Vector3(1, 0, 0), Color3.Red().scale(0.5), gizmoLayer, tessellation);
         this.yGizmo = new PlaneRotationGizmo(new Vector3(0, 1, 0), Color3.Green().scale(0.5), gizmoLayer, tessellation);

src/Gizmos/scaleGizmo.ts

@@ -49,7 +49,7 @@ export class ScaleGizmo extends Gizmo {
      * Creates a ScaleGizmo
      * @param gizmoLayer The utility layer the gizmo will be added to
      */
-    constructor(gizmoLayer: UtilityLayerRenderer = UtilityLayerRenderer.DefaultUtilityLayer) {
+    constructor(gizmoLayer: UtilityLayerRenderer = UtilityLayerRenderer.DefaultGizmoUtilityLayer) {
         super(gizmoLayer);
         this.xGizmo = new AxisScaleGizmo(new Vector3(1, 0, 0), Color3.Red().scale(0.5), gizmoLayer);
         this.yGizmo = new AxisScaleGizmo(new Vector3(0, 1, 0), Color3.Green().scale(0.5), gizmoLayer);

src/Rendering/utilityLayerRenderer.ts

@@ -5,6 +5,8 @@ import { PointerInfoPre, PointerInfo, PointerEventTypes } from "../Events/pointe
 import { PickingInfo } from "../Collisions/pickingInfo";
 import { AbstractMesh } from "../Meshes/abstractMesh";
 import { EngineStore } from "../Engines/engineStore";
+import { HemisphericLight } from '../Lights/hemisphericLight';
+import { Vector3, Color3 } from '../Maths/math';
 
 /**
  * Renders a layer on top of an existing scene
@@ -12,6 +14,7 @@ import { EngineStore } from "../Engines/engineStore";
 export class UtilityLayerRenderer implements IDisposable {
     private _pointerCaptures: { [pointerId: number]: boolean } = {};
     private _lastPointerEvents: { [pointerId: number]: boolean } = {};
+    private static _DefaultGizmoUtilityLayer: Nullable<UtilityLayerRenderer> = null;
     private static _DefaultUtilityLayer: Nullable<UtilityLayerRenderer> = null;
     private static _DefaultKeepDepthUtilityLayer: Nullable<UtilityLayerRenderer> = null;
 
@@ -32,6 +35,21 @@ export class UtilityLayerRenderer implements IDisposable {
         return UtilityLayerRenderer._DefaultUtilityLayer;
     }
     /**
+     * A shared utility layer that can be used to overlay objects into a scene (Depth map of the previous scene is cleared before drawing on top of it)
+     */
+    public static get DefaultGizmoUtilityLayer(): UtilityLayerRenderer {
+        if (UtilityLayerRenderer._DefaultGizmoUtilityLayer == null) {
+            UtilityLayerRenderer._DefaultGizmoUtilityLayer = new UtilityLayerRenderer(EngineStore.LastCreatedScene!);
+            var light = new HemisphericLight("light1", new Vector3(0, 1, 0), UtilityLayerRenderer._DefaultGizmoUtilityLayer.utilityLayerScene);
+            light.intensity = 2;
+            light.groundColor = Color3.Gray();
+            UtilityLayerRenderer._DefaultGizmoUtilityLayer.originalScene.onDisposeObservable.addOnce(() => {
+                UtilityLayerRenderer._DefaultGizmoUtilityLayer = null;
+            });
+        }
+        return UtilityLayerRenderer._DefaultGizmoUtilityLayer;
+    }
+    /**
      * A shared utility layer that can be used to embed objects into a scene (Depth map of the previous scene is not cleared before drawing on top of it)
      */
     public static get DefaultKeepDepthUtilityLayer(): UtilityLayerRenderer {