WGSL version of outputTex2DPS chunk used by outline-renderer (#7613)

* WGSL version of outputTex2DPS chunk used by outline-renderer

* shadow catcher fix

---------

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

Author: mvaligursky

src/extras/renderers/outline-renderer.js

@@ -4,7 +4,10 @@ import { BlendState } from '../../platform/graphics/blend-state.js';
 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
+    FILTER_LINEAR, FILTER_LINEAR_MIPMAP_LINEAR, PIXELFORMAT_SRGBA8,
+    SEMANTIC_POSITION,
+    SHADERLANGUAGE_GLSL,
+    SHADERLANGUAGE_WGSL
 } from '../../platform/graphics/constants.js';
 import { DepthState } from '../../platform/graphics/depth-state.js';
 import { RenderTarget } from '../../platform/graphics/render-target.js';
@@ -13,6 +16,7 @@ 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 { shaderChunksWGSL } from '../../scene/shader-lib/chunks-wgsl/chunks-wgsl.js';
 import { shaderChunks } from '../../scene/shader-lib/chunks/chunks.js';
 import { createShaderFromCode } from '../../scene/shader-lib/utils.js';
 
@@ -114,7 +118,12 @@ class OutlineRenderer {
 
         const device = this.app.graphicsDevice;
         this.shaderExtend = createShaderFromCode(device, shaderChunks.fullscreenQuadVS, shaderOutlineExtendPS, 'OutlineExtendShader');
-        this.shaderBlend = createShaderFromCode(device, shaderChunks.fullscreenQuadVS, shaderChunks.outputTex2DPS, 'OutlineBlendShader');
+
+        this.shaderBlend = device.isWebGPU ?
+            createShaderFromCode(device, shaderChunksWGSL.fullscreenQuadVS, shaderChunksWGSL.outputTex2DPS, 'OutlineBlendShader',
+                { vertex_position: SEMANTIC_POSITION }, { shaderLanguage: SHADERLANGUAGE_WGSL }) :
+            createShaderFromCode(device, shaderChunks.fullscreenQuadVS, shaderChunks.outputTex2DPS, 'OutlineBlendShader',
+                { vertex_position: SEMANTIC_POSITION }, { shaderLanguage: SHADERLANGUAGE_GLSL });
 
         this.quadRenderer = new QuadRender(this.shaderBlend);
 

src/scene/shader-lib/chunks-wgsl/chunks-wgsl.js

@@ -95,7 +95,7 @@ import opacityPS from './standard/frag/opacity.js';
 import opacityDitherPS from './standard/frag/opacity-dither.js';
 import outputPS from './lit/frag/output.js';
 import outputAlphaPS from './lit/frag/outputAlpha.js';
-// import outputTex2DPS from './common/frag/outputTex2D.js';
+import outputTex2DPS from './common/frag/outputTex2D.js';
 import sheenPS from './standard/frag/sheen.js';
 import sheenGlossPS from './standard/frag/sheenGloss.js';
 import parallaxPS from './standard/frag/parallax.js';
@@ -304,7 +304,7 @@ const shaderChunksWGSL = {
     opacityDitherPS,
     outputPS,
     outputAlphaPS,
-    // outputTex2DPS,
+    outputTex2DPS,
     sheenPS,
     sheenGlossPS,
     parallaxPS,

src/scene/shader-lib/chunks-wgsl/common/frag/outputTex2D.js

@@ -0,0 +1,11 @@
+export default /* wgsl */`
+varying vUv0: vec2f;
+var source: texture_2d<f32>;
+var sourceSampler: sampler;
+
+@fragment fn fragmentMain(input : FragmentInput) -> FragmentOutput {
+    var output: FragmentOutput;
+    output.color = textureSample(source, sourceSampler, input.vUv0);
+    return output;
+}
+`;

src/scene/shader-lib/chunks-wgsl/lit/frag/pass-forward/litForwardBackend.js

@@ -234,7 +234,7 @@ fn evaluateBackend() -> FragmentOutput {
 
     #ifdef LIT_SHADOW_CATCHER
         // output when the shadow catcher is enabled - accumulated shadows
-        output.color = vec4f(dShadowCatcher, output.color.a);
+        output.color = vec4f(vec3f(dShadowCatcher), output.color.a);
     #endif
 
     return output;