Merge pull request #6032 from TrevorDev/gizmoLighting

Add lighting shading to gizmos

dist/preview release/what's new.md

@@ -228,6 +228,7 @@
 - Add option to disable gazeTracker color changes in vrExperienceHelper ([TrevorDev](https://github.com/TrevorDev))
 - PointerDragBehavior validateDrag predicate to stop dragging to specific points ([TrevorDev](https://github.com/TrevorDev))
 - Auto Update Touch Action [#5674](https://github.com/BabylonJS/Babylon.js/issues/5674)([Sebavan](https://github.com/Sebavan))
+- Add hemispheric lighting to gizmos to avoid flat look ([TrevorDev](https://github.com/TrevorDev))
 
 ### Viewer
 

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

@@ -7,7 +7,6 @@ import { AbstractMesh } from "../Meshes/abstractMesh";
 import { Mesh } from "../Meshes/mesh";
 import { LinesMesh } from "../Meshes/linesMesh";
 import { CylinderBuilder } from "../Meshes/Builders/cylinderBuilder";
-import { LinesBuilder } from "../Meshes/Builders/linesBuilder";
 import { PointerDragBehavior } from "../Behaviors/Meshes/pointerDragBehavior";
 import { _TimeToken } from "../Instrumentation/timeToken";
 import { _DepthCullingState, _StencilState, _AlphaState } from "../States/index";
@@ -37,20 +36,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 line = LinesBuilder.CreateLines("line", { points: [new Vector3(0, 0, 0), new Vector3(0, 1.1, 0)] }, scene);
-        line.color = material.emissiveColor;
+        var cylinder = CylinderBuilder.CreateCylinder("cylinder", { diameterTop: 0, height: 0.075, diameterBottom: 0.0375, tessellation: 96 }, scene);
+        var line = CylinderBuilder.CreateCylinder("cylinder", { diameterTop: 0.005, height: 0.275, diameterBottom: 0.005, tessellation: 96 }, scene);
+        line.material = material;
         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.position.z += 0.275 / 2;
         line.rotation.x = Math.PI / 2;
-        line.material = material;
         return arrow;
     }
 
@@ -70,17 +67,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 +132,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

@@ -6,7 +6,7 @@ import { AbstractMesh } from "../Meshes/abstractMesh";
 import { Mesh } from "../Meshes/mesh";
 import { LinesMesh } from "../Meshes/linesMesh";
 import { BoxBuilder } from "../Meshes/Builders/boxBuilder";
-import { LinesBuilder } from "../Meshes/Builders/linesBuilder";
+import { CylinderBuilder } from "../Meshes/Builders/cylinderBuilder";
 import { StandardMaterial } from "../Materials/standardMaterial";
 import { PointerDragBehavior } from "../Behaviors/Meshes/pointerDragBehavior";
 import { _TimeToken } from "../Instrumentation/timeToken";
@@ -42,23 +42,21 @@ 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;
+        var arrowTail = CylinderBuilder.CreateCylinder("cylinder", { diameterTop: 0.005, height: 0.275, diameterBottom: 0.005, tessellation: 96 }, gizmoLayer.utilityLayerScene);
         arrow.addChild(arrowMesh);
         arrow.addChild(arrowTail);
 
@@ -67,9 +65,8 @@ export class AxisScaleGizmo extends Gizmo {
         arrowMesh.material = this._coloredMaterial;
         arrowMesh.rotation.x = Math.PI / 2;
         arrowMesh.position.z += 0.3;
-        arrowTail.scaling.scaleInPlace(0.26);
+        arrowTail.position.z += 0.275 / 2;
         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 +127,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 +160,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 };
 
@@ -184,6 +184,9 @@ export class GizmoManager implements IDisposable {
                 this._attachedMesh.addBehavior(this.boundingBoxDragBehavior);
             }
         } else if (this.gizmos.boundingBoxGizmo) {
+            if (this._attachedMesh) {
+                this._attachedMesh.removeBehavior(this.boundingBoxDragBehavior);
+            }
             this.gizmos.boundingBoxGizmo.attachedMesh = null;
         }
         this._gizmosEnabled.boundingBoxGizmo = value;
@@ -204,7 +207,6 @@ export class GizmoManager implements IDisposable {
             }
         }
         this._defaultKeepDepthUtilityLayer.dispose();
-        this._defaultUtilityLayer.dispose();
         this.boundingBoxDragBehavior.detach();
         this.onAttachedToMeshObservable.clear();
     }

src/Gizmos/planeRotationGizmo.ts

@@ -41,36 +41,30 @@ 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);
 
-        // Create circle out of lines
-        var radius = 0.8;
-        var points = new Array<Vector3>();
-        for (var i = 0; i < tessellation; i++) {
-            var radian = (2 * Math.PI) * (i / (tessellation - 1));
-            points.push(new Vector3(radius * Math.sin(radian), 0, radius * Math.cos(radian)));
-        }
-        let rotationMesh = Mesh.CreateLines("", points, gizmoLayer.utilityLayerScene);
-        rotationMesh.color = coloredMaterial.emissiveColor;
+        let drag = Mesh.CreateTorus("", 0.6, 0.03, tessellation, gizmoLayer.utilityLayerScene);
+        drag.visibility = 0;
+        let rotationMesh = Mesh.CreateTorus("", 0.6, 0.005, tessellation, gizmoLayer.utilityLayerScene);
+        rotationMesh.material = coloredMaterial;
 
         // Position arrow pointing in its drag axis
-        rotationMesh.scaling.scaleInPlace(0.26);
-        rotationMesh.material = coloredMaterial;
         rotationMesh.rotation.x = Math.PI / 2;
+        drag.rotation.x = Math.PI / 2;
         parentMesh.addChild(rotationMesh);
+        parentMesh.addChild(drag);
         parentMesh.lookAt(this._rootMesh.position.add(planeNormal));
 
         this._rootMesh.addChild(parentMesh);
@@ -187,7 +181,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 {