Merge pull request #5890 from sebavan/master

Inspector Debug Mode

Tools/Config/config.json

@@ -105,7 +105,8 @@
                             "path": "babylonjs/Debug/skeletonViewer",
                             "namespace": "BABYLON.Debug"
                         }
-                    ]
+                    ],
+                    "hiddenConsts": ["Debug"]
                 },
                 "requiredFiles": [
                     "readme.md"

Tools/Gulp/helpers/gulp-processAmdDeclarationToModule.js

@@ -119,6 +119,23 @@ var processData = function(data, options) {
         str = str.replace(/^\s*$/gm, "");
     }
 
+    // Hide Exported Consts if necessary
+    if (options.hiddenConsts) {
+        for (let toHide of options.hiddenConsts) {
+            var constStart = str.indexOf(`export const ${toHide}`);
+            if (constStart > -1) {
+                for (let i = constStart; i < str.length; i++) {
+                    if (str[i] === "}") {
+                        // +1 to enroll the last }
+                        // +2 to enroll the trailing ;
+                        str = str.substr(0, constStart) + str.substr(i + 2);
+                        break;
+                    }
+                }
+            }
+        }
+    }
+
     // Add Entry point.
     str += `
 declare module "${moduleName}" {

Tools/Gulp/tasks/gulpTasks-libraries.js

@@ -134,6 +134,7 @@ var processDTSFiles = function(libraries, settings, cb) {
             moduleName: commandLineOptions.moduleName || settings.build.umd.packageName,
             entryPoint: library.entry,
             externals: settings.build.umd.processDeclaration.classMap,
+            hiddenConsts: settings.build.umd.processDeclaration.hiddenConsts
         });
 
         // Convert Module to Namespace for globals

dist/preview release/what's new.md

@@ -27,6 +27,7 @@
 - Migrated the code to modules and deploy [ES6 npm packages](https://doc.babylonjs.com/features/es6_support) ([Sebavan](https://github.com/Sebavan))
 - Added `TrailMesh` class. Credit to furcatomasz ([danjpar](https://github.com/danjpar)) **** NEED DEMO or DOC LINK)
 - PBR:
+  - Added Inspector Debug Mode ([Sebavan](https://github.com/Sebavan)) **** NEED DEMO or DOC LINK)
   - Added Smith Height Correlated Visibility term to PBR ([Sebavan](https://github.com/Sebavan)) **** NEED DEMO or DOC LINK)
   - Added energy conservation through Multiscattering BRDF support to PBR ([Sebavan](https://github.com/Sebavan)) **** NEED DEMO or DOC LINK)
   - Added clear coat support to PBR ([Sebavan](https://github.com/Sebavan)) **** NEED DEMO or DOC LINK)

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/Legacy/legacy.ts

@@ -1,5 +1,5 @@
 import * as Babylon from "../index";
-import * as Debug from "../Debug/index";
+import * as DebugImport from "../Debug/index";
 
 declare var global: any;
 
@@ -17,18 +17,19 @@ if (typeof globalObject !== "undefined") {
     BABYLON.Debug = BABYLON.Debug || {};
 
     const keys = [];
-    for (var key in Debug) {
-        BABYLON.Debug[key] = (<any>Debug)[key];
+    for (var key in DebugImport) {
+        BABYLON.Debug[key] = (<any>DebugImport)[key];
         keys.push(key);
     }
     for (var key in Babylon) {
-        // Prevent Reassignment.
-        // if (keys.indexOf(key) > -1) {
-        // continue;
-        // }
-
         BABYLON[key] = (<any>Babylon)[key];
     }
 }
 
-export * from "../index";
+export * from "../index";
+export const Debug = {
+    AxesViewer: DebugImport.AxesViewer,
+    BoneAxesViewer: DebugImport.BoneAxesViewer,
+    PhysicsViewer: DebugImport.PhysicsViewer,
+    SkeletonViewer: DebugImport.SkeletonViewer,
+};

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);