Fixed isntance support for webgl1

dist/preview release/babylon.max.js

@@ -6586,9 +6586,6 @@ var BABYLON;
             if (options.preserveDrawingBuffer === undefined) {
                 options.preserveDrawingBuffer = false;
             }
-            // Checks if some of the format renders first to allow the use of webgl inspector.
-            var renderToFullFloat = this._canRenderToFloatTexture();
-            var renderToHalfFloat = this._canRenderToHalfFloatTexture();
             // GL
             if (!options.disableWebGL2Support) {
                 try {
@@ -6614,6 +6611,9 @@ var BABYLON;
             if (!this._gl) {
                 throw new Error("WebGL not supported");
             }
+            // Checks if some of the format renders first to allow the use of webgl inspector.
+            var renderToFullFloat = this._canRenderToFloatTexture();
+            var renderToHalfFloat = this._canRenderToHalfFloatTexture();
             this._onBlur = function () {
                 _this._windowIsBackground = true;
             };
@@ -6672,7 +6672,20 @@ var BABYLON;
             this._caps.textureHalfFloat = this._webGLVersion > 1 || (this._gl.getExtension('OES_texture_half_float') !== null);
             this._caps.textureHalfFloatLinearFiltering = this._webGLVersion > 1 || this._gl.getExtension('OES_texture_half_float_linear');
             this._caps.textureHalfFloatRender = renderToHalfFloat;
-            // instancesCount            
+            // Vertex array object
+            if (this._webGLVersion > 1) {
+                this._caps.vertexArrayObject = true;
+            }
+            else {
+                var vertexArrayObjectExtension = this._gl.getExtension('OES_vertex_array_object');
+                if (vertexArrayObjectExtension != null) {
+                    this._caps.vertexArrayObject = true;
+                }
+                else {
+                    this._caps.vertexArrayObject = false;
+                }
+            }
+            // Instances count            
             if (this._webGLVersion > 1) {
                 this._caps.instancedArrays = true;
             }
@@ -6680,9 +6693,9 @@ var BABYLON;
                 var instanceExtension = this._gl.getExtension('ANGLE_instanced_arrays');
                 if (instanceExtension != null) {
                     this._caps.instancedArrays = true;
-                    this._gl.drawArraysInstanced = instanceExtension.drawArraysInstancedANGLE;
-                    this._gl.drawElementsInstanced = instanceExtension.drawElementsInstancedANGLE;
-                    this._gl.vertexAttribDivisor = instanceExtension.vertexAttribDivisorANGLE;
+                    this._gl.drawArraysInstanced = instanceExtension.drawArraysInstancedANGLE.bind(instanceExtension);
+                    this._gl.drawElementsInstanced = instanceExtension.drawElementsInstancedANGLE.bind(instanceExtension);
+                    this._gl.vertexAttribDivisor = instanceExtension.vertexAttribDivisorANGLE.bind(instanceExtension);
                 }
                 else {
                     this._caps.instancedArrays = false;
@@ -25560,7 +25573,8 @@ var BABYLON;
             var result = preparedSourceCode.replace(regex, "");
             // Migrate to GLSL v300
             result = result.replace(/varying\s/g, isFragment ? "in " : "out ");
-            result = result.replace(/attribute\s/g, "in ");
+            result = result.replace(/attribute[ \t]/g, "in ");
+            result = result.replace(/[ \t]attribute/g, " in");
             if (isFragment) {
                 result = result.replace(/textureCubeLodEXT\(/g, "textureLod(");
                 result = result.replace(/texture2D\(/g, "texture(");

inspector/src/tabs/StatsTab.ts

@@ -228,6 +228,12 @@ module INSPECTOR {
                 this._updatableProperties.push({ 
                     elem:elemValue, 
                     updateFct:() => { return (this._engine.getCaps().drawBuffersExtension ? "Yes" : "No")}
+                });                 
+                elemLabel = this._createStatLabel("Vertex array object", this._panel);
+                elemValue = Helpers.CreateDiv('stat-value', this._panel);
+                this._updatableProperties.push({ 
+                    elem:elemValue, 
+                    updateFct:() => { return (this._engine.getCaps().vertexArrayObject ? "Yes" : "No")}
                 }); 
             }
 

src/Materials/babylon.effect.ts

@@ -288,7 +288,8 @@
 
             // Migrate to GLSL v300
             result = result.replace(/varying\s/g, isFragment ? "in " : "out ");
-            result = result.replace(/attribute\s/g, "in ");
+            result = result.replace(/attribute[ \t]/g, "in ");
+            result = result.replace(/[ \t]attribute/g, " in");
             
             if (isFragment) {
                 result = result.replace(/textureCubeLodEXT\(/g, "textureLod(");

src/babylon.engine.ts

@@ -183,6 +183,7 @@
         public astc: any; //WEBGL_compressed_texture_astc;
         public atc: any; //WEBGL_compressed_texture_atc;
         public textureFloat: boolean;
+        public vertexArrayObject: boolean;
         public textureAnisotropicFilterExtension: EXT_texture_filter_anisotropic;
         public maxAnisotropy: number;
         public instancedArrays: boolean;
@@ -631,17 +632,29 @@
             this._caps.textureHalfFloatLinearFiltering = this._webGLVersion > 1 || this._gl.getExtension('OES_texture_half_float_linear');
             this._caps.textureHalfFloatRender = renderToHalfFloat;
 
-            // instancesCount            
+            // Vertex array object
+            if ( this._webGLVersion > 1) {
+                this._caps.vertexArrayObject = true;
+            } else{
+                var vertexArrayObjectExtension = this._gl.getExtension('OES_vertex_array_object');
+
+                if (vertexArrayObjectExtension != null) {
+                    this._caps.vertexArrayObject =  true;
+                } else{
+                    this._caps.vertexArrayObject = false;
+                }
+            }
+            // Instances count            
             if ( this._webGLVersion > 1) {
                 this._caps.instancedArrays = true;
             } else{
-                var instanceExtension = this._gl.getExtension('ANGLE_instanced_arrays');
+                var instanceExtension = <ANGLE_instanced_arrays>this._gl.getExtension('ANGLE_instanced_arrays');
 
                 if (instanceExtension != null) {
                     this._caps.instancedArrays =  true;
-                    this._gl.drawArraysInstanced = instanceExtension.drawArraysInstancedANGLE;
-                    this._gl.drawElementsInstanced = instanceExtension.drawElementsInstancedANGLE;
-                    this._gl.vertexAttribDivisor = instanceExtension.vertexAttribDivisorANGLE;
+                    this._gl.drawArraysInstanced = instanceExtension.drawArraysInstancedANGLE.bind(instanceExtension);
+                    this._gl.drawElementsInstanced = instanceExtension.drawElementsInstancedANGLE.bind(instanceExtension);
+                    this._gl.vertexAttribDivisor = instanceExtension.vertexAttribDivisorANGLE.bind(instanceExtension);
                 } else{
                     this._caps.instancedArrays = false;
                 }