Asynchronous shader compilation in Babylon Native

packages/dev/core/src/Engines/Native/nativeInterfaces.ts

@@ -39,6 +39,7 @@ export interface INativeEngine {
     updateDynamicVertexBuffer(vertexBuffer: NativeData, bytes: ArrayBuffer, byteOffset: number, byteLength: number): void;
 
     createProgram(vertexShader: string, fragmentShader: string): NativeProgram;
+    createProgramAsync(vertexShader: string, fragmentShader: string, onSuccess: () => void, onError: (error: Error) => void): NativeProgram;
     getUniforms(shaderProgram: NativeProgram, uniformsNames: string[]): WebGLUniformLocation[];
     getAttributes(shaderProgram: NativeProgram, attributeNames: string[]): number[];
 

packages/dev/core/src/Engines/Native/nativePipelineContext.ts

@@ -4,10 +4,30 @@ import type { IMatrixLike, IVector2Like, IVector3Like, IVector4Like, IColor3Like
 import type { IPipelineContext } from "../IPipelineContext";
 import type { NativeEngine } from "../nativeEngine";
 
+export enum CompilationState {
+    uncompiled,
+    compiled,
+    error,
+}
+
 export class NativePipelineContext implements IPipelineContext {
-    // TODO: async should be true?
-    public isAsync = false;
-    public isReady = false;
+    public isParallelCompiled: boolean = true;
+    public compilationState: CompilationState = CompilationState.uncompiled;
+    public compilationError?: Error;
+
+    public get isAsync(): boolean {
+        return this.isParallelCompiled;
+    }
+
+    public get isReady(): boolean {
+        if (this.compilationState === CompilationState.error) {
+            const message = this.compilationError?.message;
+            throw new Error("SHADER ERROR" + (typeof message === "string" ? "\n" + message : ""));
+        }
+        return this.compilationState === CompilationState.compiled;
+    }
+
+    public onCompiled?: () => void;
 
     public _getVertexShaderCode(): string | null {
         return null;

packages/dev/core/src/Engines/nativeEngine.ts

@@ -36,7 +36,7 @@ import type { NativeData } from "./Native/nativeDataStream";
 import { NativeDataStream } from "./Native/nativeDataStream";
 import type { INative, INativeCamera, INativeEngine, NativeFramebuffer, NativeProgram, NativeTexture, NativeUniform, NativeVertexArrayObject } from "./Native/nativeInterfaces";
 import { RuntimeError, ErrorCodes } from "../Misc/error";
-import { NativePipelineContext } from "./Native/nativePipelineContext";
+import { CompilationState, NativePipelineContext } from "./Native/nativePipelineContext";
 import { NativeRenderTargetWrapper } from "./Native/nativeRenderTargetWrapper";
 import { NativeHardwareTexture } from "./Native/nativeHardwareTexture";
 import type { HardwareTextureWrapper } from "../Materials/Textures/hardwareTextureWrapper";
@@ -646,27 +646,44 @@ export class NativeEngine extends Engine {
         }
     }
 
-    /**
-     * @internal
-     */
-    public _isRenderingStateCompiled(pipelineContext: IPipelineContext): boolean {
-        // TODO: support async shader compilcation
-        return true;
+    public isAsync(pipelineContext: IPipelineContext): boolean {
+        return !!(pipelineContext.isAsync && this._engine.createProgramAsync);
     }
 
     /**
      * @internal
      */
     public _executeWhenRenderingStateIsCompiled(pipelineContext: IPipelineContext, action: () => void) {
-        // TODO: support async shader compilcation
-        action();
+        const nativePipelineContext = pipelineContext as NativePipelineContext;
+
+        if (!this.isAsync(pipelineContext)) {
+            action();
+            return;
+        }
+
+        const oldHandler = nativePipelineContext.onCompiled;
+
+        if (oldHandler) {
+            nativePipelineContext.onCompiled = () => {
+                oldHandler!();
+                action();
+            };
+        } else {
+            nativePipelineContext.onCompiled = action;
+        }
     }
 
     public createRawShaderProgram(): WebGLProgram {
         throw new Error("Not Supported");
     }
 
-    public createShaderProgram(_pipelineContext: IPipelineContext, vertexCode: string, fragmentCode: string, defines: Nullable<string>): WebGLProgram {
+    public createShaderProgram(pipelineContext: IPipelineContext, vertexCode: string, fragmentCode: string, defines: Nullable<string>): WebGLProgram {
+        const nativePipelineContext = pipelineContext as NativePipelineContext;
+
+        if (nativePipelineContext.nativeProgram) {
+            throw new Error("Tried to create a second program in the same NativePipelineContext");
+        }
+
         this.onBeforeShaderCompilationObservable.notifyObservers(this);
 
         const vertexInliner = new ShaderCodeInliner(vertexCode);
@@ -680,9 +697,27 @@ export class NativeEngine extends Engine {
         vertexCode = ThinEngine._ConcatenateShader(vertexCode, defines);
         fragmentCode = ThinEngine._ConcatenateShader(fragmentCode, defines);
 
-        const program = this._engine.createProgram(vertexCode, fragmentCode);
-        this.onAfterShaderCompilationObservable.notifyObservers(this);
-        return program as WebGLProgram;
+        const onSuccess = () => {
+            nativePipelineContext.compilationState = CompilationState.compiled;
+            nativePipelineContext.onCompiled?.();
+            this.onAfterShaderCompilationObservable.notifyObservers(this);
+        };
+
+        if (this.isAsync(pipelineContext)) {
+            return this._engine.createProgramAsync(vertexCode, fragmentCode, onSuccess, (error: Error) => {
+                nativePipelineContext.compilationState = CompilationState.error;
+                nativePipelineContext.compilationError = error;
+            }) as WebGLProgram;
+        } else {
+            try {
+                const program = (nativePipelineContext.nativeProgram = this._engine.createProgram(vertexCode, fragmentCode));
+                onSuccess();
+                return program as WebGLProgram;
+            } catch (e: any) {
+                const message = e?.message;
+                throw new Error("SHADER ERROR" + (typeof message === "string" ? "\n" + message : ""));
+            }
+        }
     }
 
     /**