whats new

dist/preview release/what's new.md

@@ -120,7 +120,7 @@
 - Added transparency support to `GlowLayer` ([Sebavan](https://github.com/Sebavan))
 - Added option `forceDisposeChildren` to multiMaterial.dispose ([danjpar](https://github.com/danjpar))
 - Added Pointer bindings for FollowCamera. ([mrdunk](https://github.com))
-- Inspector light gizmo ([TrevorDev](https://github.com/TrevorDev))
+- Inspector light gizmo with icons ([TrevorDev](https://github.com/TrevorDev))
 - Added option `multiMultiMaterials` to mesh.mergeMeshes ([danjpar](https://github.com/danjpar))
 - Expose fallback camera distortion metrics option in vrExperienceHelper ([TrevorDev](https://github.com/TrevorDev))
 - Added OnAfterEnteringVRObservable to webVRHelper ([TrevorDev](https://github.com/TrevorDev))

src/Gizmos/lightGizmo.ts

@@ -19,163 +19,16 @@ import { SpotLight } from '../Lights/spotLight';
  */
 export class LightGizmo extends Gizmo {
     private _lightMesh: Mesh;
-    private static _Scale = 0.007;
-
-    private static _createLightLines = (levels:number, scene:Scene)=>{
-        var distFromSphere = 1.2;
-        
-        var root = new Mesh("root", scene)
-        root.rotation.x = Math.PI/2
-
-        // Create the top line, this will be cloned for all other lines
-        var linePivot = new Mesh("linePivot", scene)
-        linePivot.parent = root;
-        var line = Mesh.CreateCylinder("line", 2, 0.2, 0.3, 6, 1, scene)
-        line.position.y = line.scaling.y/2 + distFromSphere
-        line.parent = linePivot
-    
-        if(levels < 2){
-            return linePivot;
-        }
-        for(var i = 0;i<4;i++){
-            var l = linePivot.clone("lineParentClone");
-            l.rotation.z = Math.PI/4
-            l.rotation.y = (Math.PI/2)+(Math.PI/2*i);
-    
-            l.getChildMeshes()[0].scaling.y = 0.5;
-            l.getChildMeshes()[0].scaling.x = l.getChildMeshes()[0].scaling.z = 0.8;
-            l.getChildMeshes()[0].position.y =l.getChildMeshes()[0].scaling.y/2 + distFromSphere;
-        }
-    
-        if(levels < 3){
-            return root;
-        }
-        for(var i = 0; i < 4; i++){
-            var l = linePivot.clone("linePivotClone");
-            l.rotation.z = Math.PI/2
-            l.rotation.y = (Math.PI/2*i);
-        }
-    
-        if(levels < 4){
-            return root;
-        }
-        for(var i = 0;i<4;i++){
-            var l = linePivot.clone("linePivotClone");
-            l.rotation.z = Math.PI + (Math.PI/4)
-            l.rotation.y = (Math.PI/2)+(Math.PI/2*i);
-    
-            l.getChildMeshes()[0].scaling.y = 0.5;
-            l.getChildMeshes()[0].scaling.x = l.getChildMeshes()[0].scaling.z = 0.8;
-            l.getChildMeshes()[0].position.y =l.getChildMeshes()[0].scaling.y/2 + distFromSphere;
-        }
-    
-        if(levels < 5){
-            return root;
-        }
-        var l = linePivot.clone("linePivotClone");
-        l.rotation.z = Math.PI
-
-        return root;
-    }
-
-    private static _CreateHemisphericLightMesh(scene:Scene){
-        var root = new Mesh("hemisphereLight", scene)
-        var hemisphere = HemisphereBuilder.CreateHemisphere(root.name, {segments: 10, diameter: 1}, scene);
-        hemisphere.position.z = -0.15;
-        hemisphere.rotation.x = Math.PI/2;
-        hemisphere.parent = root
-    
-        var lines = this._createLightLines(3, scene);
-        lines.parent = root;
-        lines.position.z -0.15;
-
-        root.scaling.scaleInPlace(LightGizmo._Scale)
-        root.rotation.x = Math.PI/2;
-        // var meshes = <Array<Mesh>>root.getChildMeshes(false);
-        // var merged = Mesh.MergeMeshes(meshes, true)
-        // merged.parent = root;
-        
-        return root;
-    }
-    
-    private static _CreatePointLightMesh(scene:Scene){
-        var root = new Mesh("pointLight", scene)
-        var sphere = SphereBuilder.CreateSphere(root.name, {segments: 10, diameter: 1}, scene);
-        sphere.rotation.x = Math.PI/2;
-        sphere.parent = root
-    
-        var lines = this._createLightLines(5, scene);
-        lines.parent = root;
-        root.scaling.scaleInPlace(LightGizmo._Scale)
-        root.rotation.x = Math.PI/2;
-        
-        return root;
-    }
-
-    private static _CreateSpotLightMesh(scene:Scene){
-        var root = new Mesh("spotLight", scene)
-        var sphere = SphereBuilder.CreateSphere(root.name, {segments: 10, diameter: 1}, scene);
-        sphere.parent = root
-
-        var hemisphere = HemisphereBuilder.CreateHemisphere(root.name, {segments: 10, diameter: 2}, scene);
-        hemisphere.parent = root;
-        hemisphere.rotation.x = -Math.PI/2;
-    
-        var lines = this._createLightLines(2, scene);
-        lines.parent = root;
-        root.scaling.scaleInPlace(LightGizmo._Scale)
-        root.rotation.x = Math.PI/2;
-        
-        return root;
-    }
-
-    private static _CreateDirectionalLightMesh(scene:Scene){
-        var root = new Mesh("directionalLight", scene)
-
-        var mesh = new Mesh("", scene)
-        mesh.parent = root
-        var sphere  = SphereBuilder.CreateSphere("directionalSphere", {diameter: 1.2, segments: 10}, scene)
-        sphere.parent = mesh
-    
-        var line = Mesh.CreateCylinder("directionalCenterLine", 6, 0.3, 0.3, 6, 1, scene)
-        line.parent = mesh;
-    
-        var left = line.clone("directionalLeftLine")
-        left.scaling.y = 0.5;
-        left.position.x += 1.25;
-    
-        var right = line.clone("directionalRightLine")
-        right.scaling.y = 0.5;
-        right.position.x += -1.25;
-        
-        var arrowHead = Mesh.CreateCylinder("directionalCenterCone", 1, 0, 0.6, 6, 1, scene)
-        arrowHead.position.y += 3
-        arrowHead.parent = mesh;
-    
-        var left = arrowHead.clone("directionalLeftCone");
-        left.position.y = 1.5
-        left.position.x += 1.25;
-    
-        var right = arrowHead.clone("directionalRightCone");
-        right.position.y = 1.5
-        right.position.x += -1.25;
-
-        mesh.scaling.scaleInPlace(LightGizmo._Scale)
-        mesh.rotation.z = Math.PI/2;
-        mesh.rotation.y = Math.PI/2;
-        return root;
-    }
+    private _material: StandardMaterial;
 
-    private _material:StandardMaterial;
-    
     /**
      * Creates a LightGizmo
      * @param gizmoLayer The utility layer the gizmo will be added to
      */
     constructor(gizmoLayer?: UtilityLayerRenderer) {
-        super(gizmoLayer);        
+        super(gizmoLayer);
         this.attachedMesh = new AbstractMesh("", this.gizmoLayer.utilityLayerScene);
-        this._material = new StandardMaterial("light", this.gizmoLayer.originalScene)
+        this._material = new StandardMaterial("light", this.gizmoLayer.originalScene);
         this._material.diffuseColor = new Color3(0.5, 0.5, 0.5);
         this._material.specularColor = new Color3(0.1, 0.1, 0.1);
     }
@@ -186,30 +39,31 @@ export class LightGizmo extends Gizmo {
      */
     public set light(light: Nullable<Light>) {
         this._light = light;
-        if(light){
+        if (light) {
             // Create the mesh for the given light type
-            if(this._lightMesh){
+            if (this._lightMesh) {
                 this._lightMesh.dispose();
             }
-            if(light instanceof HemisphericLight){
+
+            if (light instanceof HemisphericLight) {
                 this._lightMesh = LightGizmo._CreateHemisphericLightMesh(this.gizmoLayer.utilityLayerScene);
-            }else if(light instanceof DirectionalLight){
+            }else if (light instanceof DirectionalLight) {
                 this._lightMesh = LightGizmo._CreateDirectionalLightMesh(this.gizmoLayer.utilityLayerScene);
-            }else if(light instanceof SpotLight){
+            }else if (light instanceof SpotLight) {
                 this._lightMesh = LightGizmo._CreateSpotLightMesh(this.gizmoLayer.utilityLayerScene);
-            }else{
+            }else {
                 this._lightMesh = LightGizmo._CreatePointLightMesh(this.gizmoLayer.utilityLayerScene);
             }
-            this._lightMesh.getChildMeshes(false).forEach((m)=>{
+            this._lightMesh.getChildMeshes(false).forEach((m) => {
                 m.material = this._material;
-            })
+            });
+            this._lightMesh.parent = this._rootMesh;
 
             // Add lighting to the light gizmo
             var gizmoLight = this.gizmoLayer._getSharedGizmoLight();
             gizmoLight.includedOnlyMeshes = gizmoLight.includedOnlyMeshes.concat(this._lightMesh.getChildMeshes(false));
 
-            this._lightMesh.parent = this._rootMesh;
-            
+            // Get update position and direction if the light has it
             if ((light as any).position) {
                 this.attachedMesh!.position.copyFrom((light as any).position);
             }
@@ -237,11 +91,158 @@ export class LightGizmo extends Gizmo {
         if ((this._light as any).direction) {
             (this._light as any).direction.copyFrom(this._lightMesh.forward);
         }
-        
         if (!this._light.isEnabled()) {
-            this._material.diffuseColor.set(0,0,0);
+            this._material.diffuseColor.set(0, 0, 0);
         } else {
-            this._material.diffuseColor.set(this._light.diffuse.r/3,this._light.diffuse.g/3,this._light.diffuse.b/3);
+            this._material.diffuseColor.set(this._light.diffuse.r / 3, this._light.diffuse.g / 3, this._light.diffuse.b / 3);
+        }
+    }
+
+    // Static helper methods
+    private static _Scale = 0.007;
+
+    /**
+     * Creates the lines for a light mesh
+     */
+    private static _createLightLines = (levels: number, scene: Scene) => {
+        var distFromSphere = 1.2;
+
+        var root = new Mesh("root", scene);
+        root.rotation.x = Math.PI / 2;
+
+        // Create the top line, this will be cloned for all other lines
+        var linePivot = new Mesh("linePivot", scene);
+        linePivot.parent = root;
+        var line = Mesh.CreateCylinder("line", 2, 0.2, 0.3, 6, 1, scene);
+        line.position.y = line.scaling.y / 2 + distFromSphere;
+        line.parent = linePivot;
+
+        if (levels < 2) {
+            return linePivot;
+        }
+        for (var i = 0; i < 4; i++) {
+            var l = linePivot.clone("lineParentClone");
+            l.rotation.z = Math.PI / 4;
+            l.rotation.y = (Math.PI / 2) + (Math.PI / 2 * i);
+
+            l.getChildMeshes()[0].scaling.y = 0.5;
+            l.getChildMeshes()[0].scaling.x = l.getChildMeshes()[0].scaling.z = 0.8;
+            l.getChildMeshes()[0].position.y = l.getChildMeshes()[0].scaling.y / 2 + distFromSphere;
+        }
+
+        if (levels < 3) {
+            return root;
+        }
+        for (var i = 0; i < 4; i++) {
+            var l = linePivot.clone("linePivotClone");
+            l.rotation.z = Math.PI / 2;
+            l.rotation.y = (Math.PI / 2 * i);
+        }
+
+        if (levels < 4) {
+            return root;
+        }
+        for (var i = 0; i < 4; i++) {
+            var l = linePivot.clone("linePivotClone");
+            l.rotation.z = Math.PI + (Math.PI / 4);
+            l.rotation.y = (Math.PI / 2) + (Math.PI / 2 * i);
+
+            l.getChildMeshes()[0].scaling.y = 0.5;
+            l.getChildMeshes()[0].scaling.x = l.getChildMeshes()[0].scaling.z = 0.8;
+            l.getChildMeshes()[0].position.y = l.getChildMeshes()[0].scaling.y / 2 + distFromSphere;
+        }
+
+        if (levels < 5) {
+            return root;
         }
+        var l = linePivot.clone("linePivotClone");
+        l.rotation.z = Math.PI;
+
+        return root;
+    }
+
+    private static _CreateHemisphericLightMesh(scene: Scene) {
+        var root = new Mesh("hemisphereLight", scene);
+        var hemisphere = HemisphereBuilder.CreateHemisphere(root.name, {segments: 10, diameter: 1}, scene);
+        hemisphere.position.z = -0.15;
+        hemisphere.rotation.x = Math.PI / 2;
+        hemisphere.parent = root;
+
+        var lines = this._createLightLines(3, scene);
+        lines.parent = root;
+        lines.position.z - 0.15;
+
+        root.scaling.scaleInPlace(LightGizmo._Scale);
+        root.rotation.x = Math.PI / 2;
+
+        return root;
+    }
+
+    private static _CreatePointLightMesh(scene: Scene) {
+        var root = new Mesh("pointLight", scene);
+        var sphere = SphereBuilder.CreateSphere(root.name, {segments: 10, diameter: 1}, scene);
+        sphere.rotation.x = Math.PI / 2;
+        sphere.parent = root;
+
+        var lines = this._createLightLines(5, scene);
+        lines.parent = root;
+        root.scaling.scaleInPlace(LightGizmo._Scale);
+        root.rotation.x = Math.PI / 2;
+
+        return root;
+    }
+
+    private static _CreateSpotLightMesh(scene: Scene) {
+        var root = new Mesh("spotLight", scene);
+        var sphere = SphereBuilder.CreateSphere(root.name, {segments: 10, diameter: 1}, scene);
+        sphere.parent = root;
+
+        var hemisphere = HemisphereBuilder.CreateHemisphere(root.name, {segments: 10, diameter: 2}, scene);
+        hemisphere.parent = root;
+        hemisphere.rotation.x = -Math.PI / 2;
+
+        var lines = this._createLightLines(2, scene);
+        lines.parent = root;
+        root.scaling.scaleInPlace(LightGizmo._Scale);
+        root.rotation.x = Math.PI / 2;
+
+        return root;
+    }
+
+    private static _CreateDirectionalLightMesh(scene: Scene) {
+        var root = new Mesh("directionalLight", scene);
+
+        var mesh = new Mesh(root.name, scene);
+        mesh.parent = root;
+        var sphere  = SphereBuilder.CreateSphere(root.name, {diameter: 1.2, segments: 10}, scene);
+        sphere.parent = mesh;
+
+        var line = Mesh.CreateCylinder(root.name, 6, 0.3, 0.3, 6, 1, scene);
+        line.parent = mesh;
+
+        var left = line.clone(root.name);
+        left.scaling.y = 0.5;
+        left.position.x += 1.25;
+
+        var right = line.clone(root.name);
+        right.scaling.y = 0.5;
+        right.position.x += -1.25;
+
+        var arrowHead = Mesh.CreateCylinder(root.name, 1, 0, 0.6, 6, 1, scene);
+        arrowHead.position.y += 3;
+        arrowHead.parent = mesh;
+
+        var left = arrowHead.clone(root.name);
+        left.position.y = 1.5;
+        left.position.x += 1.25;
+
+        var right = arrowHead.clone(root.name);
+        right.position.y = 1.5;
+        right.position.x += -1.25;
+
+        mesh.scaling.scaleInPlace(LightGizmo._Scale);
+        mesh.rotation.z = Math.PI / 2;
+        mesh.rotation.y = Math.PI / 2;
+        return root;
     }
 }

src/Meshes/Builders/hemisphereBuilder.ts

@@ -3,7 +3,7 @@ import { Scene } from "../../scene";
 import { SphereBuilder } from '../Builders/sphereBuilder';
 
 /**
- * 
+ * Creates a hemispheric light
  */
 Mesh.CreateHemisphere = (name: string, segments: number, diameter: number, scene?: Scene): Mesh => {
     var options = {
@@ -26,19 +26,19 @@ export class HemisphereBuilder {
      * @returns the hemisphere mesh
      */
     public static CreateHemisphere(name: string, options: { segments?: number, diameter?: number, sideOrientation?: number }, scene: any): Mesh {
-        if(!options.diameter){
+        if (!options.diameter) {
             options.diameter = 1;
         }
-        if(!options.segments){
+        if (!options.segments) {
             options.segments = 16;
         }
 
-        var halfSphere = SphereBuilder.CreateSphere("", {slice: 0.5, diameter: options.diameter, segments: options.segments}, scene)
-        var disc = Mesh.CreateDisc("", options.diameter/2, (options.segments*3)+(4-options.segments), scene);
-        disc.rotation.x = -Math.PI/2;
+        var halfSphere = SphereBuilder.CreateSphere("", {slice: 0.5, diameter: options.diameter, segments: options.segments}, scene);
+        var disc = Mesh.CreateDisc("", options.diameter / 2, (options.segments * 3) + (4 - options.segments), scene);
+        disc.rotation.x = -Math.PI / 2;
         disc.parent = halfSphere;
 
-        var merged = <Mesh>Mesh.MergeMeshes([disc, halfSphere], true)
+        var merged = <Mesh>Mesh.MergeMeshes([disc, halfSphere], true);
         merged.name = name;
 
         return merged;