Outline renderer WGSL chunk (#8225)

Co-authored-by: Martin Valigursky <[email protected]>

Author: mvaligursky

src/extras/renderers/outline-renderer.js

@@ -5,8 +5,7 @@ import {
     ADDRESS_CLAMP_TO_EDGE, BLENDEQUATION_ADD, BLENDMODE_ONE_MINUS_SRC_ALPHA, BLENDMODE_SRC_ALPHA,
     CULLFACE_NONE,
     FILTER_LINEAR, FILTER_LINEAR_MIPMAP_LINEAR, PIXELFORMAT_SRGBA8,
-    SEMANTIC_POSITION,
-    SHADERLANGUAGE_GLSL
+    SEMANTIC_POSITION
 } from '../../platform/graphics/constants.js';
 import { DepthState } from '../../platform/graphics/depth-state.js';
 import { RenderTarget } from '../../platform/graphics/render-target.js';
@@ -15,7 +14,6 @@ import { drawQuadWithShader } from '../../scene/graphics/quad-render-utils.js';
 import { QuadRender } from '../../scene/graphics/quad-render.js';
 import { StandardMaterialOptions } from '../../scene/materials/standard-material-options.js';
 import { StandardMaterial } from '../../scene/materials/standard-material.js';
-import { ShaderChunks } from '../../scene/shader-lib/shader-chunks.js';
 import { ShaderUtils } from '../../scene/shader-lib/shader-utils.js';
 
 /**
@@ -60,6 +58,46 @@ const shaderOutlineExtendPS = /* glsl */ `
     }
 `;
 
+// WGSL version of the outline extend shader
+const shaderOutlineExtendWGSL = /* wgsl */ `
+
+    varying vUv0: vec2f;
+
+    uniform uOffset: vec2f;
+    uniform uSrcMultiplier: f32;
+    var source: texture_2d<f32>;
+    var sourceSampler: sampler;
+
+    @fragment
+    fn fragmentMain(input: FragmentInput) -> FragmentOutput {
+        var output: FragmentOutput;
+        
+        var pixel: vec4f;
+        var texel = textureSample(source, sourceSampler, input.vUv0);
+        let firstTexel = texel;
+        var diff = texel.a * uniform.uSrcMultiplier;
+
+        pixel = textureSample(source, sourceSampler, input.vUv0 + uniform.uOffset * -2.0);
+        texel = max(texel, pixel);
+        diff = max(diff, length(firstTexel.rgb - pixel.rgb));
+
+        pixel = textureSample(source, sourceSampler, input.vUv0 + uniform.uOffset * -1.0);
+        texel = max(texel, pixel);
+        diff = max(diff, length(firstTexel.rgb - pixel.rgb));
+
+        pixel = textureSample(source, sourceSampler, input.vUv0 + uniform.uOffset * 1.0);
+        texel = max(texel, pixel);
+        diff = max(diff, length(firstTexel.rgb - pixel.rgb));
+
+        pixel = textureSample(source, sourceSampler, input.vUv0 + uniform.uOffset * 2.0);
+        texel = max(texel, pixel);
+        diff = max(diff, length(firstTexel.rgb - pixel.rgb));
+
+        output.color = vec4f(texel.rgb, min(diff, 1.0));
+        return output;
+    }
+`;
+
 const _tempFloatArray = new Float32Array(2);
 const _tempColor = new Color();
 
@@ -119,8 +157,9 @@ class OutlineRenderer {
         this.shaderExtend = ShaderUtils.createShader(device, {
             uniqueName: 'OutlineExtendShader',
             attributes: { vertex_position: SEMANTIC_POSITION },
-            vertexGLSL: ShaderChunks.get(device, SHADERLANGUAGE_GLSL).get('fullscreenQuadVS'),
-            fragmentGLSL: shaderOutlineExtendPS
+            vertexChunk: 'fullscreenQuadVS',
+            fragmentGLSL: shaderOutlineExtendPS,
+            fragmentWGSL: shaderOutlineExtendWGSL
         });
 
         this.shaderBlend = ShaderUtils.createShader(device, {

src/platform/graphics/webgpu/webgpu-graphics-device.js

@@ -1256,6 +1256,10 @@ class WebgpuGraphicsDevice extends GraphicsDevice {
         return true;
     }
 
+    get hasTranspilers() {
+        return this.glslang && this.twgsl;
+    }
+
     // #if _DEBUG
     pushMarker(name) {
         this.passEncoder?.pushDebugGroup(name);

src/scene/shader-lib/programs/lit-shader.js

@@ -104,7 +104,15 @@ class LitShader {
 
         // shader language
         const userChunks = options.shaderChunks;
-        this.shaderLanguage = (device.isWebGPU && allowWGSL && userChunks?.useWGSL) ? SHADERLANGUAGE_WGSL : SHADERLANGUAGE_GLSL;
+        this.shaderLanguage = (device.isWebGPU && allowWGSL && (!userChunks || userChunks.useWGSL)) ? SHADERLANGUAGE_WGSL : SHADERLANGUAGE_GLSL;
+
+        if (device.isWebGPU && this.shaderLanguage === SHADERLANGUAGE_GLSL) {
+            if (!device.hasTranspilers) {
+                Debug.errorOnce('Cannot use GLSL shader on WebGPU without transpilers', {
+                    litShader: this
+                });
+            }
+        }
 
         // resolve custom chunk attributes
         this.attributes = {