Fix renderOutline and RenderOverlay issues with Instances

inspector/src/components/actionTabs/tabs/propertyGrids/meshes/meshPropertyGridComponent.tsx

@@ -386,20 +386,32 @@ export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGrid
                     <SliderLineComponent label="Edge width" minimum={0} maximum={10} step={0.1} target={mesh} propertyName="edgesWidth" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <Color3LineComponent label="Edge color" target={mesh} propertyName="edgesColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 </LineContainerComponent>
-                <LineContainerComponent globalState={this.props.globalState} title="OUTLINE & OVERLAY" closed={true}>
-                    <CheckBoxLineComponent label="Render overlay" target={mesh} propertyName="renderOverlay" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                    <Color3LineComponent label="Overlay color" target={mesh} propertyName="overlayColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                    <CheckBoxLineComponent label="Render outline" target={mesh} propertyName="renderOutline" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                    <Color3LineComponent label="Outline color" target={mesh} propertyName="outlineColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                </LineContainerComponent>
+                {
+                        !mesh.isAnInstance &&
+                    <LineContainerComponent globalState={this.props.globalState} title="OUTLINE & OVERLAY" closed={true}>
+                        <CheckBoxLineComponent label="Render overlay" target={mesh} propertyName="renderOverlay" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                        <Color3LineComponent label="Overlay color" target={mesh} propertyName="overlayColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                        <CheckBoxLineComponent label="Render outline" target={mesh} propertyName="renderOutline" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                        <Color3LineComponent label="Outline color" target={mesh} propertyName="outlineColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    </LineContainerComponent>
+                }
                 <LineContainerComponent globalState={this.props.globalState} title="DEBUG" closed={true}>
-                    <CheckBoxLineComponent label="Display normals" isSelected={() => displayNormals} onSelect={() => this.displayNormals()} />
-                    <CheckBoxLineComponent label="Display vertex colors" isSelected={() => displayVertexColors} onSelect={() => this.displayVertexColors()} />
+                    {
+                        !mesh.isAnInstance &&
+                        <CheckBoxLineComponent label="Display normals" isSelected={() => displayNormals} onSelect={() => this.displayNormals()} />
+                    }
+                    {
+                        !mesh.isAnInstance &&
+                        <CheckBoxLineComponent label="Display vertex colors" isSelected={() => displayVertexColors} onSelect={() => this.displayVertexColors()} />
+                    }
                     {
                         mesh.isVerticesDataPresent(VertexBuffer.NormalKind) &&
                         <CheckBoxLineComponent label="Render vertex normals" isSelected={() => renderNormalVectors} onSelect={() => this.renderNormalVectors()} />
                     }
-                    <CheckBoxLineComponent label="Render wireframe over mesh" isSelected={() => renderWireframeOver} onSelect={() => this.renderWireframeOver()} />
+                    {
+                        !mesh.isAnInstance &&
+                        <CheckBoxLineComponent label="Render wireframe over mesh" isSelected={() => renderWireframeOver} onSelect={() => this.renderWireframeOver()} />
+                    }
                 </LineContainerComponent>
             </div>
         );

src/Rendering/outlineRenderer.ts

@@ -1,7 +1,6 @@
 import { VertexBuffer } from "../Meshes/buffer";
 import { SubMesh } from "../Meshes/subMesh";
 import { _InstancesBatch, Mesh } from "../Meshes/mesh";
-import { AbstractMesh } from "../Meshes/abstractMesh";
 import { Scene } from "../scene";
 import { Engine } from "../Engines/engine";
 import { Constants } from "../Engines/constants";
@@ -57,11 +56,11 @@ declare module "../Meshes/abstractMesh" {
     }
 }
 
-Object.defineProperty(AbstractMesh.prototype, "renderOutline", {
-    get: function(this: AbstractMesh) {
+Object.defineProperty(Mesh.prototype, "renderOutline", {
+    get: function(this: Mesh) {
         return this._renderOutline;
     },
-    set: function(this: AbstractMesh, value: boolean) {
+    set: function(this: Mesh, value: boolean) {
         if (value) {
             // Lazy Load the component.
             this.getScene().getOutlineRenderer();
@@ -72,11 +71,11 @@ Object.defineProperty(AbstractMesh.prototype, "renderOutline", {
     configurable: true
 });
 
-Object.defineProperty(AbstractMesh.prototype, "renderOverlay", {
-    get: function(this: AbstractMesh) {
+Object.defineProperty(Mesh.prototype, "renderOverlay", {
+    get: function(this: Mesh) {
         return this._renderOverlay;
     },
-    set: function(this: AbstractMesh, value: boolean) {
+    set: function(this: Mesh, value: boolean) {
         if (value) {
             // Lazy Load the component.
             this.getScene().getOutlineRenderer();
@@ -291,7 +290,7 @@ export class OutlineRenderer implements ISceneComponent {
         return this._effect.isReady();
     }
 
-    private _beforeRenderingMesh(mesh: AbstractMesh, subMesh: SubMesh, batch: _InstancesBatch): void {
+    private _beforeRenderingMesh(mesh: Mesh, subMesh: SubMesh, batch: _InstancesBatch): void {
         // Outline - step 1
         this._savedDepthWrite = this._engine.getDepthWrite();
         if (mesh.renderOutline) {
@@ -324,13 +323,16 @@ export class OutlineRenderer implements ISceneComponent {
         }
     }
 
-    private _afterRenderingMesh(mesh: AbstractMesh, subMesh: SubMesh, batch: _InstancesBatch): void {
+    private _afterRenderingMesh(mesh: Mesh, subMesh: SubMesh, batch: _InstancesBatch): void {
         // Overlay
         if (mesh.renderOverlay) {
             var currentMode = this._engine.getAlphaMode();
+            let alphaBlendState = this._engine.alphaState.alphaBlend;
             this._engine.setAlphaMode(Constants.ALPHA_COMBINE);
             this.render(subMesh, batch, true);
             this._engine.setAlphaMode(currentMode);
+            this._engine.setDepthWrite(this._savedDepthWrite);
+            this._engine.alphaState.alphaBlend = alphaBlendState;
         }
 
         // Outline - step 2

src/sceneComponent.ts

@@ -9,6 +9,9 @@ import { RenderTargetTexture } from "./Materials/Textures/renderTargetTexture";
 import { PickingInfo } from "./Collisions/pickingInfo";
 import { AbstractScene } from "./abstractScene";
 
+
+declare type Mesh = import("./Meshes/mesh").Mesh;
+
 /**
  * Groups all the scene component constants in one place to ease maintenance.
  * @hidden
@@ -178,7 +181,7 @@ export type RenderingGroupStageAction = (renderingGroupId: number) => void;
 /**
  * Strong typing of a Mesh Render related stage step action
  */
-export type RenderingMeshStageAction = (mesh: AbstractMesh, subMesh: SubMesh, batch: _InstancesBatch) => void;
+export type RenderingMeshStageAction = (mesh: Mesh, subMesh: SubMesh, batch: _InstancesBatch) => void;
 
 /**
  * Strong typing of a simple stage step action