Quad vertex chunk cleanup (#7693)

mvaligursky · Martin Valigursky · web-flow · commit fde3807be767 · 2025-05-21T15:28:13.000+01:00
* Quad vertex chunk cleanup

* lint

---------

Co-authored-by: Martin Valigursky &lt;mvaligursky@snapchat.com&gt;
diff --git a/examples/src/examples/graphics/render-pass.example.mjs b/examples/src/examples/graphics/render-pass.example.mjs
@@ -14,7 +14,7 @@ class RenderPassTint extends pc.RenderPassShaderQuad {
         this.shader = pc.ShaderUtils.createShader(device, {
             uniqueName: 'TintShader',
             attributes: { aPosition: pc.SEMANTIC_POSITION },
-            vertexChunk: 'RenderPassQuadVS',
+            vertexChunk: 'quadVS',
 
             fragmentGLSL: /* glsl */ `
                 uniform sampler2D sourceTexture;
diff --git a/examples/src/examples/shaders/integer-textures.example.mjs b/examples/src/examples/shaders/integer-textures.example.mjs
@@ -129,7 +129,7 @@ const outputRenderTarget = createPixelRenderTarget(2, outputTexture);
 const sandShader = pc.ShaderUtils.createShader(device, {
     uniqueName: 'SandShader',
     attributes: { aPosition: pc.SEMANTIC_POSITION },
-    vertexGLSL: pc.RenderPassShaderQuad.quadVertexShader,
+    vertexChunk: 'quadVS',
     fragmentGLSL: files['sandSimulation.frag'],
     // Note that we are changing the shader output type to 'uint'
     // This means we only have to return a single integer value from the shader,
@@ -144,7 +144,7 @@ const sandShader = pc.ShaderUtils.createShader(device, {
 const outputShader = pc.ShaderUtils.createShader(device, {
     uniqueName: 'RenderOutputShader',
     attributes: { aPosition: pc.SEMANTIC_POSITION },
-    vertexGLSL: pc.RenderPassShaderQuad.quadVertexShader,
+    vertexChunk: 'quadVS',
     fragmentGLSL: files['renderOutput.frag']
     // For the output shader, we don't need to specify the output type,
     // as we are returning a vec4 by default.
diff --git a/examples/thumbnails/shaders_integer-textures_large.webp b/examples/thumbnails/shaders_integer-textures_large.webp
diff --git a/examples/thumbnails/shaders_integer-textures_small.webp b/examples/thumbnails/shaders_integer-textures_small.webp
diff --git a/src/extras/render-passes/render-pass-coc.js b/src/extras/render-passes/render-pass-coc.js
@@ -36,7 +36,7 @@ class RenderPassCoC extends RenderPassShaderQuad {
         this.shader = ShaderUtils.createShader(device, {
             uniqueName: `CocShader-${nearBlur}`,
             attributes: { aPosition: SEMANTIC_POSITION },
-            vertexChunk: 'RenderPassQuadVS',
+            vertexChunk: 'quadVS',
             fragmentChunk: 'cocPS',
             fragmentDefines: defines
         });
diff --git a/src/extras/render-passes/render-pass-compose.js b/src/extras/render-passes/render-pass-compose.js
@@ -259,7 +259,7 @@ class RenderPassCompose extends RenderPassShaderQuad {
                 this.shader = ShaderUtils.createShader(this.device, {
                     uniqueName: `ComposeShader-${key}`,
                     attributes: { aPosition: SEMANTIC_POSITION },
-                    vertexChunk: 'RenderPassQuadVS',
+                    vertexChunk: 'quadVS',
                     fragmentGLSL: glslComposePS,
                     fragmentDefines: defines,
                     fragmentIncludes: includes
diff --git a/src/extras/render-passes/render-pass-depth-aware-blur.js b/src/extras/render-passes/render-pass-depth-aware-blur.js
@@ -29,7 +29,7 @@ class RenderPassDepthAwareBlur extends RenderPassShaderQuad {
         this.shader = ShaderUtils.createShader(device, {
             uniqueName: `DepthAware${horizontal ? 'Horizontal' : 'Vertical'}BlurShader`,
             attributes: { aPosition: SEMANTIC_POSITION },
-            vertexChunk: 'RenderPassQuadVS',
+            vertexChunk: 'quadVS',
             fragmentChunk: 'depthAwareBlurPS',
             fragmentDefines: defines
         });
diff --git a/src/extras/render-passes/render-pass-dof-blur.js b/src/extras/render-passes/render-pass-dof-blur.js
@@ -89,7 +89,7 @@ class RenderPassDofBlur extends RenderPassShaderQuad {
         this.shader = ShaderUtils.createShader(this.device, {
             uniqueName: `DofBlurShader-${kernelCount}-${nearBlur ? 'nearBlur' : 'noNearBlur'}`,
             attributes: { aPosition: SEMANTIC_POSITION },
-            vertexChunk: 'RenderPassQuadVS',
+            vertexChunk: 'quadVS',
             fragmentChunk: 'dofBlurPS',
             fragmentDefines: defines
         });
diff --git a/src/extras/render-passes/render-pass-downsample.js b/src/extras/render-passes/render-pass-downsample.js
@@ -46,7 +46,7 @@ class RenderPassDownsample extends RenderPassShaderQuad {
         this.shader = ShaderUtils.createShader(device, {
             uniqueName: `DownSampleShader:${key}`,
             attributes: { aPosition: SEMANTIC_POSITION },
-            vertexChunk: 'RenderPassQuadVS',
+            vertexChunk: 'quadVS',
             fragmentChunk: 'downsamplePS',
             fragmentDefines: defines
         });
diff --git a/src/extras/render-passes/render-pass-ssao.js b/src/extras/render-passes/render-pass-ssao.js
@@ -95,7 +95,7 @@ class RenderPassSsao extends RenderPassShaderQuad {
         this.shader = ShaderUtils.createShader(device, {
             uniqueName: 'SsaoShader',
             attributes: { aPosition: SEMANTIC_POSITION },
-            vertexChunk: 'RenderPassQuadVS',
+            vertexChunk: 'quadVS',
             fragmentChunk: 'ssaoPS',
             fragmentDefines: defines
         });
diff --git a/src/extras/render-passes/render-pass-taa.js b/src/extras/render-passes/render-pass-taa.js
@@ -65,7 +65,7 @@ class RenderPassTAA extends RenderPassShaderQuad {
         this.shader = ShaderUtils.createShader(device, {
             uniqueName: 'TaaResolveShader',
             attributes: { aPosition: SEMANTIC_POSITION },
-            vertexChunk: 'RenderPassQuadVS',
+            vertexChunk: 'quadVS',
             fragmentChunk: 'taaResolvePS',
             fragmentDefines: defines
         });
diff --git a/src/extras/render-passes/render-pass-upsample.js b/src/extras/render-passes/render-pass-upsample.js
@@ -23,11 +23,10 @@ class RenderPassUpsample extends RenderPassShaderQuad {
         this.shader = ShaderUtils.createShader(device, {
             uniqueName: 'UpSampleShader',
             attributes: { aPosition: SEMANTIC_POSITION },
-            vertexChunk: 'RenderPassQuadVS',
+            vertexChunk: 'quadVS',
             fragmentChunk: 'upsamplePS'
         });
 
-
         this.sourceTextureId = device.scope.resolve('sourceTexture');
         this.sourceInvResolutionId = device.scope.resolve('sourceInvResolution');
         this.sourceInvResolutionValue = new Float32Array(2);
diff --git a/src/platform/graphics/webgpu/webgpu-shader-processor-wgsl.js b/src/platform/graphics/webgpu/webgpu-shader-processor-wgsl.js
@@ -332,7 +332,7 @@ class WebgpuShaderProcessorWGSL {
 
         // VS - convert a list of attributes to a shader block with fixed locations
         const attributesMap = new Map();
-        const attributesBlock = WebgpuShaderProcessorWGSL.processAttributes(vertexExtracted.attributes, shaderDefinition.attributes, attributesMap, shaderDefinition.processingOptions);
+        const attributesBlock = WebgpuShaderProcessorWGSL.processAttributes(vertexExtracted.attributes, shaderDefinition.attributes, attributesMap, shaderDefinition.processingOptions, shader);
 
         // VS - convert a list of varyings to a shader block
         const vertexVaryingsBlock = WebgpuShaderProcessorWGSL.processVaryings(vertexExtracted.varyings, varyingMap, true);
@@ -813,7 +813,7 @@ class WebgpuShaderProcessorWGSL {
         return floatToIntShort[shortType] || null;
     }
 
-    static processAttributes(attributeLines, shaderDefinitionAttributes = {}, attributesMap, processingOptions) {
+    static processAttributes(attributeLines, shaderDefinitionAttributes = {}, attributesMap, processingOptions, shader) {
         let blockAttributes = '';
         let blockPrivates = '';
         let blockCopy = '';
@@ -860,7 +860,7 @@ class WebgpuShaderProcessorWGSL {
                 // copy input variable to the private variable - convert type if needed
                 blockCopy += `    ${name} = ${originalType}(input.${name});\n`;
             } else {
-                Debug.error(`Attribute ${name} is specified in the shader source, but is not defined in the shader definition, and so will be removed from the shader, as it cannot be used without a known semantic.`, shaderDefinitionAttributes);
+                Debug.error(`Attribute ${name} is specified in the shader source, but is not defined in the shader definition, and so will be removed from the shader, as it cannot be used without a known semantic.`, { shaderDefinitionAttributes, shader });
             }
         });
 
diff --git a/src/scene/graphics/render-pass-shader-quad.js b/src/scene/graphics/render-pass-shader-quad.js
@@ -1,16 +1,12 @@
 import { QuadRender } from './quad-render.js';
 import { BlendState } from '../../platform/graphics/blend-state.js';
-import { CULLFACE_NONE, SHADERLANGUAGE_GLSL, SHADERLANGUAGE_WGSL } from '../../platform/graphics/constants.js';
+import { CULLFACE_NONE } from '../../platform/graphics/constants.js';
 import { DepthState } from '../../platform/graphics/depth-state.js';
 import { RenderPass } from '../../platform/graphics/render-pass.js';
-import { ShaderChunks } from '../../scene/shader-lib/shader-chunks.js';
-import glslQuadVS from '../shader-lib/chunks-glsl/render-pass/vert/quad.js';
-import wgslQuadVS from '../shader-lib/chunks-wgsl/render-pass/vert/quad.js';
 
 /**
  * @import { Shader } from '../../platform/graphics/shader.js'
  * @import { StencilParameters } from '../../platform/graphics/stencil-parameters.js'
- * @import { GraphicsDevice } from '../../../playcanvas.js';
  */
 
 /**
@@ -61,20 +57,6 @@ class RenderPassShaderQuad extends RenderPass {
      */
     stencilBack = null;
 
-    /**
-     * Creates an instance of the RenderPass.
-     *
-     * @param {GraphicsDevice} graphicsDevice - The
-     * graphics device.
-     */
-    constructor(graphicsDevice) {
-        super(graphicsDevice);
-
-        // register shader chunks
-        ShaderChunks.get(graphicsDevice, SHADERLANGUAGE_GLSL).set('RenderPassQuadVS', glslQuadVS);
-        ShaderChunks.get(graphicsDevice, SHADERLANGUAGE_WGSL).set('RenderPassQuadVS', wgslQuadVS);
-    }
-
     /**
      * Sets the shader used to render the quad.
      *
diff --git a/src/scene/shader-lib/chunks-glsl/common/vert/quad.js b/src/scene/shader-lib/chunks-glsl/common/vert/quad.js
diff --git a/src/scene/shader-lib/chunks-wgsl/common/vert/quad.js b/src/scene/shader-lib/chunks-wgsl/common/vert/quad.js
diff --git a/src/scene/shader-lib/collections/shader-chunks-glsl.js b/src/scene/shader-lib/collections/shader-chunks-glsl.js
@@ -60,6 +60,7 @@ import gsplatPS from '../chunks-glsl/gsplat/frag/gsplat.js';
 import gsplatSHVS from '../chunks-glsl/gsplat/vert/gsplatSH.js';
 import gsplatSourceVS from '../chunks-glsl/gsplat/vert/gsplatSource.js';
 import gsplatVS from '../chunks-glsl/gsplat/vert/gsplat.js';
+import quadVS from '../chunks-glsl/common/vert/quad.js';
 import immediateLinePS from '../chunks-glsl/internal/frag/immediateLine.js';
 import immediateLineVS from '../chunks-glsl/internal/vert/immediateLine.js';
 import iridescenceDiffractionPS from '../chunks-glsl/lit/frag/iridescenceDiffraction.js';
@@ -236,6 +237,7 @@ const shaderChunksGLSL = {
     gsplatSHVS,
     gsplatSourceVS,
     gsplatVS,
+    quadVS,
     immediateLinePS,
     immediateLineVS,
     iridescenceDiffractionPS,
diff --git a/src/scene/shader-lib/collections/shader-chunks-wgsl.js b/src/scene/shader-lib/collections/shader-chunks-wgsl.js
@@ -55,6 +55,7 @@ import gsplatPS from '../chunks-wgsl/gsplat/frag/gsplat.js';
 import gsplatSHVS from '../chunks-wgsl/gsplat/vert/gsplatSH.js';
 import gsplatSourceVS from '../chunks-wgsl/gsplat/vert/gsplatSource.js';
 import gsplatVS from '../chunks-wgsl/gsplat/vert/gsplat.js';
+import quadVS from '../chunks-wgsl/common/vert/quad.js';
 import immediateLinePS from '../chunks-wgsl/internal/frag/immediateLine.js';
 import immediateLineVS from '../chunks-wgsl/internal/vert/immediateLine.js';
 import iridescenceDiffractionPS from '../chunks-wgsl/lit/frag/iridescenceDiffraction.js';
@@ -226,6 +227,7 @@ const shaderChunksWGSL = {
     gsplatSHVS,
     gsplatSourceVS,
     gsplatVS,
+    quadVS,
     immediateLinePS,
     immediateLineVS,
     iridescenceDiffractionPS,
diff --git a/src/scene/shader-lib/shader-utils.js b/src/scene/shader-lib/shader-utils.js
@@ -86,8 +86,8 @@ class ShaderUtils {
 
             // use WGSL language on WebGPU: if user provided WGSL code, or if named chunks are used
             const wgsl = device.isWebGPU &&
-                (options.vertexWGSL || options.vertexChunk) &&
-                (options.fragmentWGSL || options.fragmentChunk);
+                (!!options.vertexWGSL || !!options.vertexChunk) &&
+                (!!options.fragmentWGSL || !!options.fragmentChunk);
 
             // chunks map
             const chunksMap = ShaderChunks.get(device, wgsl ? SHADERLANGUAGE_WGSL : SHADERLANGUAGE_GLSL);
