Fixed materialsLib

inspector/src/tabs/StatsTab.ts

@@ -234,6 +234,12 @@ module INSPECTOR {
                     elem:elemValue, 
                     updateFct:() => { return (this._engine.getCaps().vertexArrayObject ? "Yes" : "No")}
                 }); 
+                elemLabel = this._createStatLabel("Timer query", this._panel);
+                elemValue = Helpers.CreateDiv('stat-value', this._panel);
+                this._updatableProperties.push({ 
+                    elem:elemValue, 
+                    updateFct:() => { return (this._engine.getCaps().timerQuery ? "Yes" : "No")}
+                });                 
             }
 
             title = Helpers.CreateDiv('stat-title2', this._panel);

materialsLibrary/index.html

@@ -51,7 +51,6 @@
 	<script src="test/addpbr.js"></script>
 	<script src="test/addpbrmetallicroughness.js"></script>
 	<script src="test/addpbrspecularglossiness.js"></script>
-	<script src="test/addlegacypbr.js"></script>
 	<script src="test/addCell.js"></script>
 	<script src="test/addbackground.js"></script>
 	
@@ -206,8 +205,6 @@
 				var pbrmetallicroughness = preparePBRMetallicRoughness();
 
 				var pbrspecularglossiness = preparePBRSpecularGlossiness();
-
-				var legacypbr = prepareLegacyPBR();
 				
 				var triPlanar = prepareTriPlanar();
 				
@@ -224,7 +221,7 @@
 				sphere.material = std;				
 				sphere.receiveShadows = true;
 
-				gui.add(options, 'material', ['standard', 'simple', 'water', 'fire', 'lava', 'normal', 'terrain', 'pbr', 'pbrmetallicroughness', 'pbrspecularglossiness', 'legacyPbr', 'fur', 'triPlanar', 'gradient', 'sky', 'grid', 'shadowOnly', 'cell', 'background']).onFinishChange(function () {
+				gui.add(options, 'material', ['standard', 'simple', 'water', 'fire', 'lava', 'normal', 'terrain', 'pbr', 'pbrmetallicroughness', 'pbrspecularglossiness', 'fur', 'triPlanar', 'gradient', 'sky', 'grid', 'shadowOnly', 'cell', 'background']).onFinishChange(function () {
 					water.enableRenderTargets(false);
 					skybox.material = skyboxMaterial;
 					currentMesh.isVisible = true;
@@ -266,9 +263,6 @@
 						case "pbrspecularglossiness":
 							currentMaterial = pbrspecularglossiness;
 							break;
-						case "legacyPbr":
-							currentMaterial = legacypbr;
-							break;
 						case "fur":
 							currentMaterial = fur.material;
 							fur.configureFur(currentMesh);

materialsLibrary/test/addlegacypbr.js

@@ -1,238 +0,0 @@
-window.prepareLegacyPBR = function() {
-	var pbr = new BABYLON.LegacyPBRMaterial("legacyPbr", scene);
-
-	pbr.albedoTexture = new BABYLON.Texture("../assets/textures/amiga.jpg", scene);
-	pbr.albedoTexture.uScale = 5;
-	pbr.albedoTexture.vScale = 5;
-    
-    var hdrTexture = new BABYLON.HDRCubeTexture("../assets/textures/hdr/environment.hdr", scene, 512);
-
-    //var colorGradingTexture = new BABYLON.ColorGradingTexture("../assets/textures/ColorGrading.3DL", scene);
-    
-    // Uncomment for PMREM Generation
-    // var hdrTexture = new BABYLON.HDRCubeTexture("textures/hdr/environment.hdr", scene, 128, false, true, false, true);
-    pbr.reflectionTexture = hdrTexture;
-    pbr.refractionTexture = hdrTexture;
-    pbr.linkRefractionWithTransparency = true;
-    pbr.indexOfRefraction = 0.52;
-    
-	pbr.reflectivityColor = new BABYLON.Color3(0.3, 0.3, 0.3);
-	pbr.microSurface = 0.9;
-    
-    // Skybox
-    var hdrSkybox = BABYLON.Mesh.CreateBox("hdrSkyBox", 1000.0, scene);
-    var hdrSkyboxMaterial = new BABYLON.PBRMaterial("skyBox", scene);
-    hdrSkyboxMaterial.backFaceCulling = false;
-    hdrSkyboxMaterial.reflectionTexture = hdrTexture.clone();
-    hdrSkyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
-    hdrSkyboxMaterial.microSurface = 1;
-    hdrSkyboxMaterial.specularColor = new BABYLON.Color3(1, 1, 1);
-    hdrSkyboxMaterial.disableLighting = true;
-    hdrSkyboxMaterial.cameraExposure = 0.6;
-    hdrSkyboxMaterial.cameraContrast = 1.6;
-    hdrSkyboxMaterial.directIntensity = 0;
-    hdrSkybox.material = hdrSkyboxMaterial;
-    hdrSkybox.infiniteDistance = true;
-    hdrSkybox.setEnabled(false);
-    
-	registerButtonUI("legacyPbr", "Default", function() {
-		setRangeValues({
-		  "directIntensity": 1,
-		  "emissiveIntensity": 1,
-		  "environmentIntensity": 1,
-		  "specularIntensity": 1,
-		  "ShadowIntensity": 1,
-		  "ShadeIntensity": 1,
-		  "cameraExposure": 1,
-		  "cameraContrast": 1,
-		  "microSurface": 0.9,
-		  "reflectivityColorR": 0.3,
-		  "reflectivityColorG": 0.3,
-		  "reflectivityColorB": 0.3,
-		  "albedoColorR": 1,
-		  "albedoColorG": 1,
-		  "albedoColorB": 1,
-		  "albedoColorLevel": 0
-		});
-	});
-    registerButtonUI("legacyPbr", "Env Irradiance", function() {
-		setRangeValues({
-		  "directIntensity": 0,
-		  "emissiveIntensity": 1,
-		  "environmentIntensity": 1,
-		  "specularIntensity": 1,
-		  "ShadowIntensity": 1,
-		  "ShadeIntensity": 1,
-		  "cameraExposure": 1,
-		  "cameraContrast": 1,
-		  "microSurface": 0,
-		  "reflectivityColorR": 0,
-		  "reflectivityColorG": 0,
-		  "reflectivityColorB": 0,
-		  "albedoColorR": 1,
-		  "albedoColorG": 1,
-		  "albedoColorB": 1,
-		  "albedoColorLevel": 1
-		});
-        
-        hdrSkybox.setEnabled(true);
-	});
-	registerButtonUI("legacyPbr", "Rough Gold", function() {
-		setRangeValues({
-		  "directIntensity": 1.3439461727881254,
-		  "emissiveIntensity": 1,
-		  "environmentIntensity": 0.3685013699580344,
-		  "specularIntensity": 1,
-		  "ShadowIntensity": 1,
-		  "ShadeIntensity": 1,
-		  "cameraExposure": 0.7153261887420668,
-		  "cameraContrast": 1.6474178892241538,
-		  "microSurface": 0.42269274789303946,
-		  "reflectivityColorR": 1,
-		  "reflectivityColorG": 0.8453854957860789,
-		  "reflectivityColorB": 0.5093989525890475,
-		  "albedoColorR": 0,
-		  "albedoColorG": 0,
-		  "albedoColorB": 0,
-		  "albedoColorLevel": 1
-		});
-	});
-	registerButtonUI("legacyPbr", "Plastic", function() {
-		setRangeValues({
-		  "directIntensity": 0.9971213540040931,
-		  "emissiveIntensity": 1,
-		  "environmentIntensity": 0.3685013699580344,
-		  "specularIntensity": 1,
-		  "ShadowIntensity": 0.975444802830091,
-		  "ShadeIntensity": 0.8020323934380749,
-		  "cameraExposure": 0.7586792910900708,
-		  "cameraContrast": 1.5823882357021477,
-		  "microSurface": 0.8562237713730799,
-		  "reflectivityColorR": 0.05,
-		  "reflectivityColorG": 0.05,
-		  "reflectivityColorB": 0.05,
-		  "albedoColorR": 0.20592723615301922,
-		  "albedoColorG": 0.942929976069088,
-		  "albedoColorB": 1,
-		  "albedoColorLevel": 1
-		});
-	});
-	
-    registerRangeUI("legacyPbr", "indiceOfRefraction", 0, 2, function(value) {
-		pbr.indexOfRefraction = value;
-	}, function() {
-		return pbr.indexOfRefraction;
-	});
-    
-    registerRangeUI("legacyPbr", "alpha", 0, 1, function(value) {
-		pbr.alpha = value;
-	}, function() {
-		return pbr.alpha;
-	});
-    
-    registerRangeUI("legacyPbr", "directIntensity", 0, 2, function(value) {
-		pbr.directIntensity = value;
-	}, function() {
-		return pbr.directIntensity;
-	});
-    
-	registerRangeUI("legacyPbr", "emissiveIntensity", 0, 2, function(value) {
-		pbr.emissiveIntensity = value;
-	}, function() {
-		return pbr.emissiveIntensity;
-	});
-	
-	registerRangeUI("legacyPbr", "environmentIntensity", 0, 2, function(value) {
-		pbr.environmentIntensity = value;
-	}, function() {
-		return pbr.environmentIntensity;
-	});
-
-	registerRangeUI("legacyPbr", "specularIntensity", 0, 2, function(value) {
-		pbr.specularIntensity = value;
-	}, function() {
-		return pbr.specularIntensity;
-	});
-	
-	registerRangeUI("legacyPbr", "ShadowIntensity", 0, 2, function(value) {
-		pbr.overloadedShadowIntensity = value;
-	}, function() {
-		return pbr.overloadedShadowIntensity;
-	});
-	
-	registerRangeUI("legacyPbr", "ShadeIntensity", 0, 2, function(value) {
-		pbr.overloadedShadeIntensity = value;
-	}, function() {
-		return pbr.overloadedShadeIntensity;
-	});
-	
-	registerRangeUI("legacyPbr", "cameraExposure", 0, 2, function(value) {
-		pbr.cameraExposure = value;
-	}, function() {
-		return pbr.cameraExposure;
-	});
-
-	registerRangeUI("legacyPbr", "cameraContrast", 0, 2, function(value) {
-		pbr.cameraContrast = value;
-	}, function() {
-		return pbr.cameraContrast;
-	});
-	
-	registerRangeUI("legacyPbr", "microSurface", 0, 1, function(value) {
-		pbr.microSurface = value;
-	}, function() {
-		return pbr.microSurface;
-	});
-
-	registerRangeUI("legacyPbr", "reflectivityColorR", 0, 1, function(value) {
-		pbr.reflectivityColor.r = value;
-	}, function() {
-		return pbr.reflectivityColor.r;
-	});
-
-	registerRangeUI("legacyPbr", "reflectivityColorG", 0, 1, function(value) {
-		pbr.reflectivityColor.g = value;
-	}, function() {
-		return pbr.reflectivityColor.g;
-	});
-
-	registerRangeUI("legacyPbr", "reflectivityColorB", 0, 1, function(value) {
-		pbr.reflectivityColor.b = value;
-	}, function() {
-		return pbr.reflectivityColor.b;
-	});
-
-	registerRangeUI("legacyPbr", "albedoColorR", 0, 1, function(value) {
-		pbr.overloadedAlbedo.r = value;
-	}, function() {
-		return pbr.overloadedAlbedo.r;
-	});
-
-	registerRangeUI("legacyPbr", "albedoColorG", 0, 1, function(value) {
-		pbr.overloadedAlbedo.g = value;
-	}, function() {
-		return pbr.overloadedAlbedo.g;
-	});
-
-	registerRangeUI("legacyPbr", "albedoColorB", 0, 1, function(value) {
-		pbr.overloadedAlbedo.b = value;
-	}, function() {
-		return pbr.overloadedAlbedo.b;
-	});
-
-	registerRangeUI("legacyPbr", "albedoColorLevel", 0, 1, function(value) {
-		pbr.overloadedAlbedoIntensity = value;
-	}, function() {
-		return pbr.overloadedAlbedoIntensity;
-	});
-    
-    registerButtonUI("legacyPbr", "Toggle Skybox", function() {
-        hdrSkybox.setEnabled(!hdrSkybox.isEnabled());
-	});
-
-    registerButtonUI("legacyPbr", "Color Grading", function() {
-        pbr.cameraColorGradingTexture = pbr.cameraColorGradingTexture ? null : colorGradingTexture; 
-	});
-
-	return pbr;
-}

src/Engine/babylon.engine.ts

@@ -254,6 +254,8 @@
         public drawBuffersExtension: boolean;
         public depthTextureExtension: boolean;
         public colorBufferFloat: boolean;
+        public timerQuery: EXT_disjoint_timer_query;
+        public canUseTimestampForTimerQuery: boolean;
     }
 
     export interface EngineOptions extends WebGLContextAttributes {
@@ -1105,6 +1107,13 @@
             this._caps.uintIndices = this._webGLVersion > 1 || this._gl.getExtension('OES_element_index_uint') !== null;
             this._caps.fragmentDepthSupported = this._webGLVersion > 1 || this._gl.getExtension('EXT_frag_depth') !== null;
             this._caps.highPrecisionShaderSupported = true;
+            this._caps.timerQuery = this._gl.getExtension("EXT_disjoint_timer_query") || this._gl.getExtension('EXT_disjoint_timer_query_webgl2');
+            if (this._caps.timerQuery) {
+                if (this._webGLVersion === 1) {
+                    this._gl.getQuery = (<any>this._caps.timerQuery).getQueryEXT.bind(this._caps.timerQuery);
+                }
+                this._caps.canUseTimestampForTimerQuery = this._gl.getQuery(this._caps.timerQuery.TIMESTAMP_EXT, this._caps.timerQuery.QUERY_COUNTER_BITS_EXT) > 0
+            }
 
             // Checks if some of the format renders first to allow the use of webgl inspector.
             this._caps.colorBufferFloat = this._webGLVersion > 1 && this._gl.getExtension('EXT_color_buffer_float');
@@ -1951,7 +1960,7 @@
             }
 
             this._gl.bufferData(this._gl.ELEMENT_ARRAY_BUFFER, arrayBuffer, this._gl.DYNAMIC_DRAW);
-            
+
             this._resetIndexBufferBinding();
         }
 
@@ -2881,9 +2890,9 @@
          *
          * @returns {WebGLTexture} for assignment back into BABYLON.Texture
          */
-        public createTexture(urlArg: Nullable<string>, noMipmap: boolean, invertY: boolean, scene: Nullable<Scene>, samplingMode: number = Texture.TRILINEAR_SAMPLINGMODE, 
-                            onLoad: Nullable<() => void> = null, onError: Nullable<() => void> = null, 
-                            buffer: Nullable<ArrayBuffer | HTMLImageElement> = null, fallBack: Nullable<InternalTexture> = null, format: Nullable<number> = null): InternalTexture {
+        public createTexture(urlArg: Nullable<string>, noMipmap: boolean, invertY: boolean, scene: Nullable<Scene>, samplingMode: number = Texture.TRILINEAR_SAMPLINGMODE,
+            onLoad: Nullable<() => void> = null, onError: Nullable<() => void> = null,
+            buffer: Nullable<ArrayBuffer | HTMLImageElement> = null, fallBack: Nullable<InternalTexture> = null, format: Nullable<number> = null): InternalTexture {
             var url = String(urlArg); // assign a new string, so that the original is still available in case of fallback
             var fromData = url.substr(0, 5) === "data:";
             var fromBlob = url.substr(0, 5) === "blob:";
@@ -3712,9 +3721,9 @@
             return texture;
         }
 
-        public createPrefilteredCubeTexture(rootUrl: string, scene: Nullable<Scene>, scale: number, offset: number, 
-                                            onLoad: Nullable<(internalTexture: Nullable<InternalTexture>) => void> = null, 
-                                            onError: Nullable<(message?: string, exception?: any) => void> = null, format?: number, forcedExtension: any = null): InternalTexture {
+        public createPrefilteredCubeTexture(rootUrl: string, scene: Nullable<Scene>, scale: number, offset: number,
+            onLoad: Nullable<(internalTexture: Nullable<InternalTexture>) => void> = null,
+            onError: Nullable<(message?: string, exception?: any) => void> = null, format?: number, forcedExtension: any = null): InternalTexture {
             var callback = (loadData: any) => {
                 if (!loadData) {
                     if (onLoad) {
@@ -4820,7 +4829,7 @@
         public hideLoadingUI(): void {
             if (!Tools.IsWindowObjectExist()) {
                 return;
-            }            
+            }
             const loadingScreen = this.loadingScreen;
             if (loadingScreen) {
                 loadingScreen.hideLoadingUI();
@@ -5045,9 +5054,11 @@
             return this._gl.getQueryParameter(query, this._gl.QUERY_RESULT) as number;
         }
 
-        public beginQuery(algorithmType: number, query: WebGLQuery) {
+        public beginQuery(algorithmType: number, query: WebGLQuery): Engine {
             var glAlgorithm = this.getGlAlgorithmType(algorithmType);
             this._gl.beginQuery(glAlgorithm, query);
+
+            return this;
         }
 
         public endQuery(algorithmType: number): Engine {
@@ -5057,6 +5068,68 @@
             return this;
         }
 
+        private _startTimeQuery: Nullable<WebGLQuery>;
+        private _endTimeQuery: Nullable<WebGLQuery>;
+        private _timeElapsedQuery: Nullable<WebGLQuery>;
+
+        private _createTimeQuery(): WebGLQuery {
+            let timerQuery = <EXT_disjoint_timer_query>this._caps.timerQuery;
+
+            if (timerQuery.createQueryEXT) {
+                return timerQuery.createQueryEXT();
+            }
+
+            return this.createQuery();
+        }
+
+        public startTimeQuery(): Engine {
+            let timerQuery = this._caps.timerQuery;
+            if (!timerQuery) {
+                return this;
+            }
+
+            if (this._caps.canUseTimestampForTimerQuery) {
+                if (!this._startTimeQuery) {
+                    this._startTimeQuery = this._createTimeQuery();
+
+                    timerQuery.queryCounterEXT(this._startTimeQuery, timerQuery.TIMESTAMP_EXT);
+                }
+            } else {
+                this._timeElapsedQuery = this._createTimeQuery();
+                if (timerQuery.beginQueryEXT) {
+                    
+                }
+            }
+            return this;
+        }
+
+        public endTimeQuery(): int {
+            let timerQuery = this._caps.timerQuery;
+            if (!timerQuery || !this._startTimeQuery) {
+                return -1;
+            }
+
+            if (!this._endTimeQuery) {
+                this._endTimeQuery = this._createTimeQuery();
+                timerQuery.queryCounterEXT(this._endTimeQuery, timerQuery.TIMESTAMP_EXT);
+            }
+
+            let available = this._gl.getQueryParameter(this._endTimeQuery, this._gl.QUERY_RESULT_AVAILABLE);
+            let disjoint = this._gl.getParameter(timerQuery.GPU_DISJOINT_EXT);
+
+            if (available && !disjoint) {
+                let timeStart = this._gl.getQueryParameter(this._startTimeQuery, this._gl.QUERY_RESULT);
+                let timeEnd = this._gl.getQueryParameter(this._endTimeQuery, this._gl.QUERY_RESULT);
+
+                this.deleteQuery(this._startTimeQuery);
+                this.deleteQuery(this._endTimeQuery);
+                this._startTimeQuery = null;
+                return timeEnd - timeStart;
+            }
+
+            return -1;
+        }
+
         private getGlAlgorithmType(algorithmType: number): number {
             return algorithmType === AbstractMesh.OCCLUSION_ALGORITHM_TYPE_CONSERVATIVE ? this._gl.ANY_SAMPLES_PASSED_CONSERVATIVE : this._gl.ANY_SAMPLES_PASSED;
         }

src/babylon.mixins.ts

@@ -50,6 +50,7 @@ interface WebGLRenderingContext {
     beginQuery(target: number, query: WebGLQuery): void;
     endQuery(target: number): void;
     getQueryParameter(query: WebGLQuery, pname: number): any;
+    getQuery(target: number, pname: number): any;
 
     MAX_SAMPLES: number;
     RGBA8: number;
@@ -602,4 +603,14 @@ declare namespace SIMD {
         xor(a: SIMD.Bool8x16, b: SIMD.Bool8x16): SIMD.Bool8x16;
         not(a: SIMD.Bool8x16, b: SIMD.Bool8x16): SIMD.Bool8x16;
     }
+}
+
+interface EXT_disjoint_timer_query {
+    QUERY_COUNTER_BITS_EXT: number;
+    TIME_ELAPSED_EXT: number;
+    TIMESTAMP_EXT: number;
+    GPU_DISJOINT_EXT: number;
+    queryCounterEXT(query: WebGLQuery, target: number): void;
+    createQueryEXT(): WebGLQuery;
+    beginQueryEXT(target: number, query: WebGLQuery): void;
 }