Merge pull request #6687 from sebavan/WebGPU

Web gpu

Playground/indexWebGPU.html

@@ -30,9 +30,9 @@
     <script src="https://preview.babylonjs.com/earcut.min.js"></script>
     <!-- Babylon.js -->
     <script src="https://preview.babylonjs.com/shaderc/shaderc.js"></script>
-    <script src="https://preview.babylonjs.com/babylon.js"></script>
+    <script src="js/babylonWebGpu.max.js"></script>
     <!-- <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script> -->
-    <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
+    <!-- <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script> -->
     <script src="https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js"></script>
     <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
     <!-- <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>

Playground/js/indexWebGPU.js

@@ -4,7 +4,12 @@ var monacoMode = "javascript";
 
 function getRunCode(jsEditor, callBack) {
     var code = jsEditor.getValue();
-    callBack(code);
+    callBack(code).catch((e) => {
+        showError(e);
+
+        // Also log error in console to help debug playgrounds
+        console.error(e);
+    })
 }
 
 
@@ -520,6 +525,11 @@ function showError(errorMessage, errorEvent) {
                 var createEngineFunction = "createDefaultEngine";
                 var createSceneFunction;
 
+                if (!navigator.gpu) {
+                    showError("WebGPU is not supported on your platform.", {});
+                    return;
+                }
+
                 getRunCode(jsEditor, async function(code) {
                     var createDefaultEngine = function() {
                         return new BABYLON.WebGPUEngine(canvas);
@@ -565,7 +575,7 @@ function showError(errorMessage, errorEvent) {
                         await engine.initAsync(window.shadercOptions);
 
                         //create scene
-                        eval("scene = " + createSceneFunction + "()");
+                        eval("scene = " + createSceneFunction + "(engine, canvas)");
 
                         if (!scene) {
                             showError(createSceneFunction + " function must return a scene.", null);
@@ -1228,7 +1238,7 @@ function showError(errorMessage, errorEvent) {
 
     var xhr = new XMLHttpRequest();
 
-    xhr.open('GET', "babylon.d.txt", true);
+    xhr.open('GET', "babylonWebGPU.d.txt", true);
 
     xhr.onreadystatechange = function() {
         if (xhr.readyState === 4) {

src/Engines/WebGPU/webgpuShaderProcessors.ts

@@ -88,7 +88,10 @@ export class WebGPUShaderProcessor implements IShaderProcessor {
             if (uniformType.indexOf("texture") === 0 || uniformType.indexOf("sampler") === 0) {
                 let samplerInfo = _knownSamplers[name];
                 if (!samplerInfo) {
-                    samplerInfo = webgpuProcessingContext.getNextFreeTextureBinding();
+                    samplerInfo = webgpuProcessingContext.availableSamplers[name];
+                    if (!samplerInfo) {
+                        samplerInfo = webgpuProcessingContext.getNextFreeTextureBinding();
+                    }
                 }
 
                 const setIndex = samplerInfo.setIndex;
@@ -122,6 +125,12 @@ export class WebGPUShaderProcessor implements IShaderProcessor {
                     name = name.substr(0, startArray);
                 }
 
+                for (let i = 0; i < webgpuProcessingContext.leftOverUniforms.length; i++) {
+                    if (webgpuProcessingContext.leftOverUniforms[i].name === name) {
+                        return "";
+                    }
+                }
+
                 webgpuProcessingContext.leftOverUniforms.push({
                     name,
                     type: uniformType,

src/Engines/webgpuEngine.ts

@@ -504,6 +504,10 @@ export class WebGPUEngine extends Engine {
     }
 
     public clear(color: Color4, backBuffer: boolean, depth: boolean, stencil: boolean = false): void {
+        // Some PGs are using color3...
+        if (color.a === undefined) {
+            color.a = 1;
+        }
         this._mainColorAttachments[0].loadValue = backBuffer ? color : WebGPUConstants.GPULoadOp_load;
 
         this._mainDepthAttachment.depthLoadValue = depth ? this._clearDepthValue : WebGPUConstants.GPULoadOp_load;
@@ -1199,7 +1203,7 @@ export class WebGPUEngine extends Engine {
             texture._sphericalPolynomial = webglEngineTexture._sphericalPolynomial;
 
             let mipMaps = Scalar.Log2(Math.max(width, height));
-            mipMaps = Math.round(mipMaps);
+            mipMaps = Math.floor(mipMaps);
 
             const textureExtent = {
                 width,
@@ -2063,16 +2067,16 @@ export class WebGPUEngine extends Engine {
                     continue;
                 }
 
-                // TODO WEBGPU. Authorize shared samplers and Vertex Textures.
+                // TODO WEBGPU. Optimize shared samplers visibility for vertex/framgent.
                 if (bindingDefinition.isSampler) {
                     bindings.push({
                         binding: j,
-                        visibility: WebGPUConstants.GPUShaderStageBit_FRAGMENT,
+                        visibility: WebGPUConstants.GPUShaderStageBit_VERTEX | WebGPUConstants.GPUShaderStageBit_FRAGMENT,
                         type: WebGPUConstants.GPUBindingType_sampledTexture,
                     }, {
                         // TODO WEBGPU. No Magic + 1.
                         binding: j + 1,
-                        visibility: WebGPUConstants.GPUShaderStageBit_FRAGMENT,
+                        visibility: WebGPUConstants.GPUShaderStageBit_VERTEX | WebGPUConstants.GPUShaderStageBit_FRAGMENT,
                         type: WebGPUConstants.GPUBindingType_sampler
                     });
                 }

src/Shaders/ShadersInclude/lightFragment.fx

@@ -120,7 +120,7 @@
         #endif
 
         #ifdef PROJECTEDLIGHTTEXTURE{X}
-            info.diffuse *= computeProjectionTextureDiffuseLighting(projectionLightSampler{X}, textureProjectionMatrix{X});
+            info.diffuse *= texture2D(projectionLightSampler{X}, computeProjectionTextureDiffuseLightingUV(textureProjectionMatrix{X})).rgb;
         #endif
     #endif
 

src/Shaders/ShadersInclude/lightsFragmentFunctions.fx

@@ -109,9 +109,8 @@ lightingInfo computeHemisphericLighting(vec3 viewDirectionW, vec3 vNormal, vec4
 		return result;
 }
 
-vec3 computeProjectionTextureDiffuseLighting(sampler2D projectionLightSampler, mat4 textureProjectionMatrix){
+vec2 computeProjectionTextureDiffuseLightingUV(mat4 textureProjectionMatrix){
 	vec4 strq = textureProjectionMatrix * vec4(vPositionW, 1.0);
 	strq /= strq.w;
-	vec3 textureColor = texture2D(projectionLightSampler, strq.xy).rgb;
-	return textureColor;
+	return strq.xy;
 }

src/Shaders/ShadersInclude/pbrDirectLightingFunctions.fx

@@ -39,11 +39,10 @@ vec3 computeDiffuseLighting(preLightingInfo info, vec3 lightColor) {
     return diffuseTerm * info.attenuation * info.NdotL * lightColor;
 }
 
-vec3 computeProjectionTextureDiffuseLighting(sampler2D projectionLightSampler, mat4 textureProjectionMatrix){
-    vec4 strq = textureProjectionMatrix * vec4(vPositionW, 1.0);
-    strq /= strq.w;
-    vec3 textureColor = texture2D(projectionLightSampler, strq.xy).rgb;
-    return toLinearSpace(textureColor);
+vec2 computeProjectionTextureDiffuseLightingUV(mat4 textureProjectionMatrix){
+	vec4 strq = textureProjectionMatrix * vec4(vPositionW, 1.0);
+	strq /= strq.w;
+	return strq.xy;
 }
 
 #ifdef SS_TRANSLUCENCY