First commit

src/Engine/babylon.engine.ts

@@ -157,6 +157,12 @@
         public timerQuery: EXT_disjoint_timer_query;
         /** Defines if timestamp can be used with timer query */
         public canUseTimestampForTimerQuery: boolean;
+        /** Function used to let the system compiles shaders in background */
+        public parallelShaderCompile: {
+            MAX_SHADER_COMPILER_THREADS_KHR: number;
+            maxShaderCompilerThreadsKHR: (thread: number) => void;           
+            COMPLETION_STATUS_KHR: number;
+        }
     }
 
     /** Interface defining initialization parameters for Engine class */
@@ -1349,6 +1355,13 @@
                 }
             }
 
+            // Shader compiler threads
+            this._caps.parallelShaderCompile = this._gl.getExtension('KHR_parallel_shader_compile');
+            if (this._caps.parallelShaderCompile) {
+                const threads = this._gl.getParameter(this._caps.parallelShaderCompile.MAX_SHADER_COMPILER_THREADS_KHR);
+                this._caps.parallelShaderCompile.maxShaderCompilerThreadsKHR(threads);
+            }
+
             // Depth Texture
             if (this._webGLVersion > 1) {
                 this._caps.depthTextureExtension = true;
@@ -1376,6 +1389,7 @@
                     this._caps.vertexArrayObject = false;
                 }
             }
+
             // Instances count
             if (this._webGLVersion > 1) {
                 this._caps.instancedArrays = true;
@@ -3305,6 +3319,24 @@
                 this.bindTransformFeedback(null);
             }
 
+            shaderProgram.context = context;
+            shaderProgram.vertexShader = vertexShader;
+            shaderProgram.fragmentShader = fragmentShader;
+
+            if (!this._caps.parallelShaderCompile) {
+                this._finalizeProgram(shaderProgram);
+            } else {
+                shaderProgram.isParallelCompiled = true;
+            }
+
+            return shaderProgram;
+        }
+
+        private _finalizeProgram(shaderProgram: WebGLProgram) {
+            const context = shaderProgram.context!;
+            const vertexShader = shaderProgram.vertexShader!;
+            const fragmentShader = shaderProgram.fragmentShader!;
+
             var linked = context.getProgramParameter(shaderProgram, context.LINK_STATUS);
 
             if (!linked) {
@@ -3329,7 +3361,38 @@
             context.deleteShader(vertexShader);
             context.deleteShader(fragmentShader);
 
-            return shaderProgram;
+            shaderProgram.context = undefined;
+            shaderProgram.vertexShader = undefined;
+            shaderProgram.fragmentShader = undefined;
+
+            if (shaderProgram.onCompiled) {
+                shaderProgram.onCompiled();
+                shaderProgram.onCompiled = undefined;
+            }
+        }
+
+        /** @hidden */
+        public _isProgramCompiled(shaderProgram: WebGLProgram): boolean {
+           if (!shaderProgram.isParallelCompiled) {
+               return true;
+           }
+
+           if (this._gl.getProgramParameter(shaderProgram, this._caps.parallelShaderCompile.COMPLETION_STATUS_KHR)) {
+               this._finalizeProgram(shaderProgram);
+               return true;
+           }
+
+           return false;
+        }
+
+        /** @hidden */
+        public _executeWhenProgramIsCompiled(shaderProgram: WebGLProgram, action: () => void) {
+            if (!shaderProgram.isParallelCompiled) {
+                action();
+                return;
+            }
+
+            shaderProgram.onCompiled = action;
         }
 
         /**

src/Engine/babylon.nullEngine.ts

@@ -173,7 +173,8 @@
         public createShaderProgram(vertexCode: string, fragmentCode: string, defines: string, context?: WebGLRenderingContext): WebGLProgram {
             return {
                 transformFeedback: null,
-                __SPECTOR_rebuildProgram: null
+                __SPECTOR_rebuildProgram: null,
+                isParallelCompiled: false
             };
         }
 

src/Materials/babylon.effect.ts

@@ -365,6 +365,9 @@
          * @returns if the effect is compiled and prepared.
          */
         public isReady(): boolean {
+            if (!this._isReady && this._program && this._program.isParallelCompiled) {
+                return this._engine._isProgramCompiled(this._program);
+            }
             return this._isReady;
         }
 
@@ -786,43 +789,46 @@
                 }
                 this._program.__SPECTOR_rebuildProgram = this._rebuildProgram.bind(this);
 
-                if (engine.supportsUniformBuffers) {
-                    for (var name in this._uniformBuffersNames) {
-                        this.bindUniformBlock(name, this._uniformBuffersNames[name]);
+                engine._executeWhenProgramIsCompiled(this._program, () => {
+                    if (engine.supportsUniformBuffers) {
+                        for (var name in this._uniformBuffersNames) {
+                            this.bindUniformBlock(name, this._uniformBuffersNames[name]);
+                        }
                     }
-                }
-
-                this._uniforms = engine.getUniforms(this._program, this._uniformsNames);
-                this._attributes = engine.getAttributes(this._program, attributesNames);
-
-                var index: number;
-                for (index = 0; index < this._samplers.length; index++) {
-                    var sampler = this.getUniform(this._samplers[index]);
-
-                    if (sampler == null) {
-                        this._samplers.splice(index, 1);
-                        index--;
+    
+                    this._uniforms = engine.getUniforms(this._program, this._uniformsNames);
+                    this._attributes = engine.getAttributes(this._program, attributesNames);
+    
+                    var index: number;
+                    for (index = 0; index < this._samplers.length; index++) {
+                        var sampler = this.getUniform(this._samplers[index]);
+    
+                        if (sampler == null) {
+                            this._samplers.splice(index, 1);
+                            index--;
+                        }
                     }
-                }
-
-                engine.bindSamplers(this);
-
-                this._compilationError = "";
-                this._isReady = true;
-                if (this.onCompiled) {
-                    this.onCompiled(this);
-                }
-                this.onCompileObservable.notifyObservers(this);
-                this.onCompileObservable.clear();
-
-                // Unbind mesh reference in fallbacks
-                if (this._fallbacks) {
-                    this._fallbacks.unBindMesh();
-                }
+    
+                    engine.bindSamplers(this);
+    
+                    this._compilationError = "";
+                    this._isReady = true;
+                    if (this.onCompiled) {
+                        this.onCompiled(this);
+                    }
+                    this.onCompileObservable.notifyObservers(this);
+                    this.onCompileObservable.clear();
+    
+                    // Unbind mesh reference in fallbacks
+                    if (this._fallbacks) {
+                        this._fallbacks.unBindMesh();
+                    }
+    
+                    if (previousProgram) {
+                        this.getEngine()._deleteProgram(previousProgram);
+                    }
+                });
 
-                if (previousProgram) {
-                    this.getEngine()._deleteProgram(previousProgram);
-                }
             } catch (e) {
                 this._compilationError = e.message;
 

src/babylon.mixins.ts

@@ -21,6 +21,14 @@ interface Window {
     DracoDecoderModule: any;
 }
 
+interface WebGLProgram {
+    context?: WebGLRenderingContext;
+    vertexShader?: WebGLShader;
+    fragmentShader?: WebGLShader;
+    isParallelCompiled: boolean;
+    onCompiled?: () => void;
+}
+
 interface WebGLRenderingContext {
     drawArraysInstanced(mode: number, first: number, count: number, primcount: number): void;
     drawElementsInstanced(mode: number, count: number, type: number, offset: number, primcount: number): void;