Add Debug Mode to the PBR Material

inspector/src/components/actionTabs/tabs/propertyGrids/materials/pbrMaterialPropertyGridComponent.tsx

@@ -9,6 +9,7 @@ import { LineContainerComponent } from "../../../lineContainerComponent";
 import { Color3LineComponent } from "../../../lines/color3LineComponent";
 import { CheckBoxLineComponent } from "../../../lines/checkBoxLineComponent";
 import { SliderLineComponent } from "../../../lines/sliderLineComponent";
+import { OptionsLineComponent } from "../../../lines/optionsLineComponent";
 import { CommonMaterialPropertyGridComponent } from "./commonMaterialPropertyGridComponent";
 import { TextureLinkLineComponent } from "../../../lines/textureLinkLineComponent";
 import { LockObject } from "../lockObject";
@@ -54,6 +55,58 @@ export class PBRMaterialPropertyGridComponent extends React.Component<IPBRMateri
     render() {
         const material = this.props.material;
 
+        const debugMode = [
+            { label: "None", value: 0 },
+            // Geometry
+            { label: "Normalized position", value: 1 },
+            { label: "Normals", value: 2 },
+            { label: "Tangents", value: 3 },
+            { label: "Bitangents", value: 4 },
+            { label: "Bump Normals", value: 5 },
+            { label: "UV1", value: 6 },
+            { label: "UV2", value: 7 },
+            { label: "ClearCoat Normals", value: 8 },
+            { label: "ClearCoat Tangents", value: 9 },
+            { label: "ClearCoat Bitangents", value: 10 },
+            { label: "Anisotropic Normals", value: 11 },
+            // Maps
+            { label: "Albdeo Map", value: 20 },
+            { label: "Ambient Map", value: 21 },
+            { label: "Opacity Map", value: 22 },
+            { label: "Emissive Map", value: 23 },
+            { label: "Light Map", value: 24 },
+            { label: "Metallic Map", value: 25 },
+            { label: "Reflectivity Map", value: 26 },
+            { label: "ClearCoat Map", value: 27 },
+            { label: "ClearCoat Tint Map", value: 28 },
+            // Env
+            { label: "Env Refraction", value: 40 },
+            { label: "Env Reflection", value: 41 },
+            { label: "Env Clear Coat", value: 42 },
+            // Lighting
+            { label: "Direct Diffuse", value: 50 },
+            { label: "Direct Specular", value: 51 },
+            { label: "Direct Clear Coat", value: 52 },
+            { label: "Env Irradiance", value: 53 },
+            // Lighting Params
+            { label: "Surface Albedo", value: 60 },
+            { label: "Reflectance 0", value: 61 },
+            { label: "Roughness", value: 62 },
+            { label: "AlphaG", value: 63 },
+            { label: "NdotV", value: 64 },
+            { label: "ClearCoat Color", value: 65 },
+            { label: "ClearCoat Roughness", value: 66 },
+            { label: "ClearCoat NdotV", value: 67 },
+            // Misc
+            { label: "SEO", value: 70 },
+            { label: "EHO", value: 71 },
+            { label: "Energy Factor", value: 72 },
+            { label: "Specular Reflectance", value: 73 },
+            { label: "Clear Coat Reflectance", value: 74 },
+            { label: "Luminance Over Alpha", value: 75 },
+            { label: "Alpha", value: 76 },
+        ];
+
         return (
             <div className="pane">
                 <CommonMaterialPropertyGridComponent globalState={this.props.globalState} lockObject={this.props.lockObject} material={material} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
@@ -152,6 +205,11 @@ export class PBRMaterialPropertyGridComponent extends React.Component<IPBRMateri
                     <CheckBoxLineComponent label="Horizon occlusion " target={material} propertyName="useHorizonOcclusion" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <CheckBoxLineComponent label="Unlit" target={material} propertyName="unlit" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 </LineContainerComponent>
+                <LineContainerComponent globalState={this.props.globalState} title="DEBUG" closed={true}>
+                    <OptionsLineComponent label="Debug mode" options={debugMode} target={material} propertyName="debugMode" />
+                    <SliderLineComponent label="Split position" target={material} propertyName="debugLimit" minimum={-1} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <SliderLineComponent label="Output factor" target={material} propertyName="debugFactor" minimum={0} maximum={5} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                </LineContainerComponent>
             </div>
         );
     }

src/Materials/PBR/pbrBaseMaterial.ts

@@ -1,4 +1,4 @@
-import { serialize, serializeAsImageProcessingConfiguration } from "../../Misc/decorators";
+import { serialize, serializeAsImageProcessingConfiguration, expandToProperty } from "../../Misc/decorators";
 import { Observer } from "../../Misc/observable";
 import { IAnimatable } from "../../Misc/tools";
 import { Logger } from "../../Misc/logger";
@@ -198,6 +198,8 @@ class PBRMaterialDefines extends MaterialDefines
 
     public UNLIT = false;
 
+    public DEBUGMODE = 0;
+
     /**
      * Initializes the PBR Material defines.
      */
@@ -661,6 +663,34 @@ export abstract class PBRBaseMaterial extends PushMaterial {
      */
     private _unlit = false;
 
+    private _debugMode = 0;
+    /**
+     * @hidden
+     * This is reserved for the inspector.
+     * Defines the material debug mode.
+     * It helps seeing only some components of the material while troubleshooting.
+     */
+    @expandToProperty("_markAllSubMeshesAsMiscDirty")
+    public debugMode = 0;
+
+    /**
+     * @hidden
+     * This is reserved for the inspector.
+     * Specify from where on screen the debug mode should start.
+     * The value goes from -1 (full screen) to 1 (not visible)
+     * It helps with side by side comparison against the final render
+     * This defaults to -1
+     */
+    private debugLimit = -1;
+
+    /**
+     * @hidden
+     * This is reserved for the inspector.
+     * As the default viewing range might not be enough (if the ambient is really small for instance)
+     * You can use the factor to better multiply the final value.
+     */
+    private debugFactor = 1;
+
     /**
      * Defines the clear coat layer parameters for the material.
      */
@@ -675,6 +705,7 @@ export abstract class PBRBaseMaterial extends PushMaterial {
      * Defines the BRDF parameters for the material.
      */
     public readonly brdf = new PBRBRDFConfiguration(this._markAllSubMeshesAsMiscDirty.bind(this));
+
     /**
      * Instantiates a new PBRMaterial instance.
      *
@@ -1123,7 +1154,8 @@ export abstract class PBRBaseMaterial extends PushMaterial {
             "vSphericalXX", "vSphericalYY", "vSphericalZZ",
             "vSphericalXY", "vSphericalYZ", "vSphericalZX",
             "vReflectionMicrosurfaceInfos", "vRefractionMicrosurfaceInfos",
-            "vTangentSpaceParams", "boneTextureWidth"
+            "vTangentSpaceParams", "boneTextureWidth",
+            "vDebugMode"
         ];
 
         var samplers = ["albedoSampler", "reflectivitySampler", "ambientSampler", "emissiveSampler",
@@ -1429,6 +1461,7 @@ export abstract class PBRBaseMaterial extends PushMaterial {
         if (defines._areMiscDirty) {
             MaterialHelper.PrepareDefinesForMisc(mesh, scene, this._useLogarithmicDepth, this.pointsCloud, this.fogEnabled, this._shouldTurnAlphaTestOn(mesh) || this._forceAlphaTest, defines);
             defines.UNLIT = this._unlit || ((this.pointsCloud || this.wireframe) && !mesh.isVerticesDataPresent(VertexBuffer.NormalKind));
+            defines.DEBUGMODE = this._debugMode;
         }
 
         // External config
@@ -1792,6 +1825,8 @@ export abstract class PBRBaseMaterial extends PushMaterial {
                 eyePosition.z,
                 invertNormal ? -1 : 1);
             effect.setColor3("vAmbientColor", this._globalAmbientColor);
+
+            effect.setFloat2("vDebugMode", this.debugLimit, this.debugFactor);
         }
 
         if (mustRebind || !this.isFrozen) {

src/Shaders/ShadersInclude/pbrDebug.fx

@@ -0,0 +1,137 @@
+#if  DEBUGMODE > 0
+    if (vClipSpacePosition.x / vClipSpacePosition.w < vDebugMode.x) {
+        return;
+    }
+// Geometry
+    #if   DEBUGMODE == 1
+        gl_FragColor.rgb = vPositionW.rgb;
+        #define DEBUGMODE_NORMALIZE
+    #elif DEBUGMODE == 2 && defined(NORMAL)
+        gl_FragColor.rgb = vNormalW.rgb;
+        #define DEBUGMODE_NORMALIZE
+    #elif DEBUGMODE == 3 && (defined(BUMP) || defined(PARALLAX) || defined(ANISOTROPIC))
+        // Tangents
+        gl_FragColor.rgb = TBN[0];
+        #define DEBUGMODE_NORMALIZE
+    #elif DEBUGMODE == 4 && (defined(BUMP) || defined(PARALLAX) || defined(ANISOTROPIC))
+        // BiTangents
+        gl_FragColor.rgb = TBN[1];
+        #define DEBUGMODE_NORMALIZE
+    #elif DEBUGMODE == 5
+        // Bump Normals
+        gl_FragColor.rgb = normalW;
+        #define DEBUGMODE_NORMALIZE
+    #elif DEBUGMODE == 6 && defined(MAINUV1)
+        gl_FragColor.rgb = vec3(vMainUV1, 0.0);
+    #elif DEBUGMODE == 7 && defined(MAINUV2)
+        gl_FragColor.rgb = vec3(vMainUV2, 0.0);
+    #elif DEBUGMODE == 8 && defined(CLEARCOAT) && defined(CLEARCOAT_BUMP)
+        // ClearCoat Tangents
+        gl_FragColor.rgb = TBNClearCoat[0];
+        #define DEBUGMODE_NORMALIZE
+    #elif DEBUGMODE == 9 && defined(CLEARCOAT) && defined(CLEARCOAT_BUMP)
+        // ClearCoat BiTangents
+        gl_FragColor.rgb = TBNClearCoat[1];
+        #define DEBUGMODE_NORMALIZE
+    #elif DEBUGMODE == 10 && defined(CLEARCOAT)
+        // ClearCoat Bump Normals
+        gl_FragColor.rgb = clearCoatNormalW;
+        #define DEBUGMODE_NORMALIZE
+    #elif DEBUGMODE == 11 && defined(ANISOTROPIC)
+        gl_FragColor.rgb = anisotropicNormal;
+        #define DEBUGMODE_NORMALIZE
+// Maps
+    #elif DEBUGMODE == 20 && defined(ALBEDO)
+        gl_FragColor.rgb = albedoTexture.rgb;
+    #elif DEBUGMODE == 21 && defined(AMBIENT)
+        gl_FragColor.rgb = ambientOcclusionColorMap.rgb;
+    #elif DEBUGMODE == 22 && defined(OPACITY)
+        gl_FragColor.rgb = opacityMap.rgb;
+    #elif DEBUGMODE == 23 && defined(EMISSIVE)
+        gl_FragColor.rgb = emissiveColorTex.rgb;
+        #define DEBUGMODE_GAMMA
+    #elif DEBUGMODE == 24 && defined(LIGHTMAP)
+        gl_FragColor.rgb = lightmapColor.rgb;
+        #define DEBUGMODE_GAMMA
+    #elif DEBUGMODE == 25 && defined(REFLECTIVITY) && defined(METALLICWORKFLOW)
+        gl_FragColor.rgb = surfaceMetallicColorMap.rgb;
+    #elif DEBUGMODE == 26 && defined(REFLECTIVITY) && !defined(METALLICWORKFLOW)
+        gl_FragColor.rgb = surfaceReflectivityColorMap.rgb;
+        #define DEBUGMODE_GAMMA
+    #elif DEBUGMODE == 27 && defined(CLEARCOAT) && defined(CLEARCOAT_TEXTURE)
+        gl_FragColor.rgb = clearCoatMapData.rgb;
+    #elif DEBUGMODE == 28 && defined(CLEARCOAT) && defined(CLEARCOAT_TINT) && defined(CLEARCOAT_TINT_TEXTURE)
+        gl_FragColor.rgb = clearCoatTintMapData.rgb;
+// Env
+    #elif DEBUGMODE == 40 && defined(REFRACTION)
+        // Base color.
+        gl_FragColor.rgb = environmentRefraction.rgb;
+        #define DEBUGMODE_GAMMA
+    #elif DEBUGMODE == 41 && defined(REFLECTION)
+        gl_FragColor.rgb = environmentRadiance.rgb;
+        #define DEBUGMODE_GAMMA
+    #elif DEBUGMODE == 42 && defined(CLEARCOAT) && defined(REFLECTION)
+        gl_FragColor.rgb = environmentClearCoatRadiance;
+        #define DEBUGMODE_GAMMA
+// Lighting
+    #elif DEBUGMODE == 50
+        gl_FragColor.rgb = diffuseBase.rgb;
+        #define DEBUGMODE_GAMMA
+    #elif DEBUGMODE == 51 && defined(SPECULARTERM)
+        gl_FragColor.rgb = specularBase.rgb;
+        #define DEBUGMODE_GAMMA
+    #elif DEBUGMODE == 52 && defined(CLEARCOAT)
+        gl_FragColor.rgb = clearCoatBase.rgb;
+        #define DEBUGMODE_GAMMA
+    #elif DEBUGMODE == 53 && defined(REFLECTION)
+        gl_FragColor.rgb = environmentIrradiance.rgb;
+        #define DEBUGMODE_GAMMA
+// Lighting Params
+    #elif DEBUGMODE == 60
+        gl_FragColor.rgb = surfaceAlbedo.rgb;
+        #define DEBUGMODE_GAMMA
+    #elif DEBUGMODE == 61
+        gl_FragColor.rgb = specularEnvironmentR0;
+        #define DEBUGMODE_GAMMA
+    #elif DEBUGMODE == 62
+        gl_FragColor.rgb = vec3(roughness);
+    #elif DEBUGMODE == 63
+        gl_FragColor.rgb = vec3(alphaG);
+    #elif DEBUGMODE == 64
+        gl_FragColor.rgb = vec3(NdotV);
+    #elif DEBUGMODE == 65 && defined(CLEARCOAT) && defined(CLEARCOAT_TINT)
+        gl_FragColor.rgb = clearCoatColor.rgb;
+        #define DEBUGMODE_GAMMA
+    #elif DEBUGMODE == 66 && defined(CLEARCOAT)
+        gl_FragColor.rgb = vec3(clearCoatRoughness);
+    #elif DEBUGMODE == 67 && defined(CLEARCOAT)
+        gl_FragColor.rgb = vec3(clearCoatNdotV);
+// Misc
+    #elif DEBUGMODE == 70 && defined(RADIANCEOCCLUSION)
+        gl_FragColor.rgb = vec3(seo);
+    #elif DEBUGMODE == 71 && defined(HORIZONOCCLUSION)
+        gl_FragColor.rgb = vec3(eho);
+    #elif DEBUGMODE == 72 && defined(MS_BRDF_ENERGY_CONSERVATION)
+        gl_FragColor.rgb = vec3(energyConservationFactor);
+    #elif DEBUGMODE == 73 && defined(ENVIRONMENTBRDF) && !defined(REFLECTIONMAP_SKYBOX)
+        gl_FragColor.rgb = specularEnvironmentReflectance;
+        #define DEBUGMODE_GAMMA
+    #elif DEBUGMODE == 74 && defined(CLEARCOAT) && defined(ENVIRONMENTBRDF) && !defined(REFLECTIONMAP_SKYBOX)
+        gl_FragColor.rgb = clearCoatEnvironmentReflectance;
+        #define DEBUGMODE_GAMMA
+    #elif DEBUGMODE == 75 && defined(ALPHABLEND)
+        gl_FragColor.rgb = vec3(luminanceOverAlpha);
+    #elif DEBUGMODE == 76
+        gl_FragColor.rgb = vec3(alpha);
+    #endif
+
+    gl_FragColor.rgb *= vDebugMode.y;
+    #ifdef DEBUGMODE_NORMALIZE
+        gl_FragColor.rgb = normalize(gl_FragColor.rgb) * 0.5 + 0.5;
+    #endif
+    #ifdef DEBUGMODE_GAMMA
+        gl_FragColor.rgb = toGammaSpace(gl_FragColor.rgb);
+    #endif
+
+    gl_FragColor.a = 1.0;
+#endif

src/Shaders/pbr.fragment.fx

@@ -21,6 +21,11 @@ uniform vec4 vCameraInfos;
 // Input
 varying vec3 vPositionW;
 
+#if DEBUGMODE > 0
+    uniform vec2 vDebugMode;
+    varying vec4 vClipSpacePosition;
+#endif
+
 #ifdef MAINUV1
     varying vec2 vMainUV1;
 #endif 
@@ -1171,63 +1176,5 @@ void main(void) {
 
     gl_FragColor = finalColor;
 
-    // Normal Display.
-    //gl_FragColor = vec4(normalW * 0.5 + 0.5, 1.0);
-
-    // Ambient reflection color.
-    // gl_FragColor = vec4(ambientReflectionColor, 1.0);
-
-    // Reflection color.
-    // gl_FragColor = vec4(reflectionColor, 1.0);
-
-    // Base color.
-    // gl_FragColor = vec4(surfaceAlbedo.rgb, 1.0);
-
-    // Diffuse Direct Lighting
-    // gl_FragColor = vec4(diffuseBase.rgb, 1.0);
-
-    // Specular Lighting
-    // gl_FragColor = vec4(specularBase.rgb, 1.0);
-
-    // Final Specular
-    // gl_FragColor = vec4(finalSpecular.rgb, 1.0);
-
-    // Irradiance
-    //gl_FragColor = vec4(specularEnvironmentReflectance.rgb, 1.0);
-    //gl_FragColor = vec4(environmentIrradiance.rgb / 3.0, 1.0);
-
-    // Specular color.
-    //gl_FragColor = vec4(surfaceReflectivityColor.rgb, 1.0);
-
-    // MicroSurface color.
-    // gl_FragColor = vec4(microSurface, microSurface, microSurface, 1.0);
-
-    // Roughness.
-    // gl_FragColor = vec4(roughness, roughness, roughness, 1.0);
-
-    // Specular Map
-    // gl_FragColor = vec4(reflectivityMapColor.rgb, 1.0);
-
-    // Refractance
-    // gl_FragColor = vec4(refractance.rgb, 1.0);
-
-    //// Emissive Color
-    //vec2 test = vEmissiveUV * 0.5 + 0.5;
-    //gl_FragColor = vec4(test.x, test.y, 1.0, 1.0);
-
-    // Specular Environment Occlusion
-    //gl_FragColor = vec4(seo, seo, seo, 1.0);
-
-    //// Horizon Environment Occlusion
-    //gl_FragColor = vec4(eho, eho, eho, 1.0);
-
-    //gl_FragColor = vec4(seo * eho, seo * eho, seo * eho, 1.0);
-
-    //gl_FragColor = vec4(normalize(-TBN[0]), 1.0);
-
-    //gl_FragColor = vec4(vPositionW * 0.5 + 0.5, 1.0);
-
-    //gl_FragColor = vec4(vMainUV1, 0., 1.0);
-
-    //gl_FragColor = vec4(specularEnvironmentR0, 1.0);
+#include<pbrDebug>
 }

src/Shaders/pbr.vertex.fx

@@ -80,6 +80,9 @@ varying vec2 vBumpUV;
 
 // Output
 varying vec3 vPositionW;
+#if DEBUGMODE > 0
+    varying vec4 vClipSpacePosition;
+#endif
 #ifdef NORMAL
     varying vec3 vNormalW;
     #if defined(USESPHERICALFROMREFLECTIONMAP) && defined(USESPHERICALINVERTEX)
@@ -134,6 +137,9 @@ void main(void) {
 #include<bonesVertex>
 
     gl_Position = viewProjection * finalWorld * vec4(positionUpdated, 1.0);
+    #if DEBUGMODE > 0
+        vClipSpacePosition = gl_Position;
+    #endif
 
     vec4 worldPos = finalWorld * vec4(positionUpdated, 1.0);
     vPositionW = vec3(worldPos);