Add WebGPU support to instancing-custom example - custom WGSL shader (#8186)

Co-authored-by: Martin Valigursky <mvaligursky@snapchat.com>

Author: mvaligursky

examples/src/examples/graphics/instancing-custom.example.mjs

@@ -1,4 +1,5 @@
 // @config DESCRIPTION This example demonstrates how to customize the shader handling the instancing of a StandardMaterial.
+import files from 'examples/files';
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';
 
@@ -96,34 +97,8 @@ assetListLoader.load(() => {
 
     // and a custom instancing shader chunk, which will be used in case the mesh instance has instancing enabled
     material.shaderChunksVersion = '2.8';
-    material.getShaderChunks(pc.SHADERLANGUAGE_GLSL).set('transformInstancingVS', `
-
-        // instancing attributes
-        attribute vec3 aInstPosition;
-        attribute float aInstScale;
-
-        // uniforms
-        uniform float uTime;
-        uniform vec3 uCenter;
-
-        // all instancing chunk needs to do is to implement getModelMatrix function, which returns a world matrix for the instance
-        mat4 getModelMatrix() {
-
-            // we have world position in aInstPosition, but modify it based on distance from uCenter for some displacement effect
-            vec3 direction = aInstPosition - uCenter;
-            float distanceFromCenter = length(direction);
-            float displacementIntensity = exp(-distanceFromCenter * 0.2) ; //* (1.9 + abs(sin(uTime * 1.5)));
-            vec3 worldPos = aInstPosition - direction * displacementIntensity;
-
-            // create matrix based on the modified poition, and scale
-            return mat4(
-                vec4(aInstScale, 0.0, 0.0, 0.0),
-                vec4(0.0, aInstScale, 0.0, 0.0),
-                vec4(0.0, 0.0, aInstScale, 0.0),
-                vec4(worldPos, 1.0)
-            );
-        }
-    `);
+    material.getShaderChunks(pc.SHADERLANGUAGE_GLSL).set('transformInstancingVS', files['transform-instancing.glsl.vert']);
+    material.getShaderChunks(pc.SHADERLANGUAGE_WGSL).set('transformInstancingVS', files['transform-instancing.wgsl.vert']);
 
     material.update();
 

examples/src/examples/graphics/instancing-custom.transform-instancing.glsl.vert

@@ -0,0 +1,27 @@
+
+// instancing attributes
+attribute vec3 aInstPosition;
+attribute float aInstScale;
+
+// uniforms
+uniform float uTime;
+uniform vec3 uCenter;
+
+// all instancing chunk needs to do is to implement getModelMatrix function, which returns a world matrix for the instance
+mat4 getModelMatrix() {
+
+    // we have world position in aInstPosition, but modify it based on distance from uCenter for some displacement effect
+    vec3 direction = aInstPosition - uCenter;
+    float distanceFromCenter = length(direction);
+    float displacementIntensity = exp(-distanceFromCenter * 0.2) ; //* (1.9 + abs(sin(uTime * 1.5)));
+    vec3 worldPos = aInstPosition - direction * displacementIntensity;
+
+    // create matrix based on the modified poition, and scale
+    return mat4(
+        vec4(aInstScale, 0.0, 0.0, 0.0),
+        vec4(0.0, aInstScale, 0.0, 0.0),
+        vec4(0.0, 0.0, aInstScale, 0.0),
+        vec4(worldPos, 1.0)
+    );
+}
+

examples/src/examples/graphics/instancing-custom.transform-instancing.wgsl.vert

@@ -0,0 +1,27 @@
+
+// instancing attributes
+attribute aInstPosition: vec3f;
+attribute aInstScale: f32;
+
+// uniforms
+uniform uTime: f32;
+uniform uCenter: vec3f;
+
+// all instancing chunk needs to do is to implement getModelMatrix function, which returns a world matrix for the instance
+fn getModelMatrix() -> mat4x4f {
+
+    // we have world position in aInstPosition, but modify it based on distance from uCenter for some displacement effect
+    var direction: vec3f = aInstPosition - uniform.uCenter;
+    var distanceFromCenter: f32 = length(direction);
+    var displacementIntensity: f32 = exp(-distanceFromCenter * 0.2); //* (1.9 + abs(sin(uniform.uTime * 1.5)));
+    var worldPos: vec3f = aInstPosition - direction * displacementIntensity;
+
+    // create matrix based on the modified poition, and scale
+    return mat4x4f(
+        vec4f(aInstScale, 0.0, 0.0, 0.0),
+        vec4f(0.0, aInstScale, 0.0, 0.0),
+        vec4f(0.0, 0.0, aInstScale, 0.0),
+        vec4f(worldPos, 1.0)
+    );
+}
+

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

@@ -132,6 +132,7 @@ class LitShader {
             userChunkMap.forEach((chunk, chunkName) => {
 
                 // extract attribute names from the used chunk
+                Debug.assert(chunk);
                 for (const a in builtinAttributes) {
                     if (builtinAttributes.hasOwnProperty(a) && chunk.indexOf(a) >= 0) {
                         this.attributes[a] = builtinAttributes[a];