Using Webpack to manage shader code

This should make things a bit easier, though I did like fetching it before...

Author: alaingalvan

definitions.d.ts

@@ -0,0 +1 @@
+declare module '*.wgsl';

src/renderer.ts

@@ -1,10 +1,12 @@
+import vertShaderCode from './shaders/triangle.vert.wgsl';
+import fragShaderCode from './shaders/triangle.frag.wgsl';
+
 // 📈 Position Vertex Buffer Data
 const positions = new Float32Array([
     1.0, -1.0, 0.0,
    -1.0, -1.0, 0.0,
     0.0,  1.0, 0.0
 ]);
-
 // 🎨 Color Vertex Buffer Data
 const colors = new Float32Array([
     1.0, 0.0, 0.0, // 🔴
@@ -82,7 +84,10 @@ export default class Renderer {
     // 🍱 Initialize resources to render triangle (buffers, shaders, pipeline)
     async initializeResources() {
         // 🔺 Buffers
-        const createBuffer = (arr: Float32Array | Uint16Array, usage: number) => {
+        const createBuffer = (
+            arr: Float32Array | Uint16Array,
+            usage: number
+        ) => {
             // 📏 Align to 4 bytes (thanks @chrimsonite)
             let desc = {
                 size: (arr.byteLength + 3) & ~3,
@@ -104,21 +109,13 @@ export default class Renderer {
         this.indexBuffer = createBuffer(indices, GPUBufferUsage.INDEX);
 
         // 🖍️ Shaders
-        let loadShader = (shaderPath: string) =>
-            fetch(new Request(shaderPath), {
-                method: 'GET',
-                mode: 'cors'
-            }).then((res) =>
-                res.text()
-            );
-
         const vsmDesc = {
-            code: await loadShader('/assets/shaders/triangle.vert.wgsl')
+            code: vertShaderCode
         };
         this.vertModule = this.device.createShaderModule(vsmDesc);
 
         const fsmDesc = {
-            code: await loadShader('/assets/shaders/triangle.frag.wgsl')
+            code: fragShaderCode
         };
         this.fragModule = this.device.createShaderModule(fsmDesc);
 
@@ -211,7 +208,7 @@ export default class Renderer {
         const depthTextureDesc: GPUTextureDescriptor = {
             size: [this.canvas.width, this.canvas.height, 1],
             dimension: '2d',
-            format: 'depth24plus-stencil8', 
+            format: 'depth24plus-stencil8',
             usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC
         };
 

assets/shaders/triangle.frag.wgsl renamed to src/shaders/triangle.frag.wgsl

@@ -29,6 +29,7 @@
     "allowSyntheticDefaultImports": true
   },
   "include": [
+    "definitions.d.ts",
     "src/**/*",
     "node_modules/@webgpu/types/**/*"
   ],

assets/shaders/triangle.vert.wgsl renamed to src/shaders/triangle.vert.wgsl

@@ -5,7 +5,8 @@ import { argv } from 'process';
 
 let env = process.env['NODE_ENV'];
 let isProduction =
-    (env && env.match(/production/)) || argv.reduce((prev, cur) => prev || cur === '--production', false);
+    (env && env.match(/production/)) ||
+    argv.reduce((prev, cur) => prev || cur === '--production', false);
 
 let config: webpack.Configuration = {
     context: path.join(__dirname, 'src'),
@@ -17,9 +18,8 @@ let config: webpack.Configuration = {
         path: path.resolve(__dirname, 'dist')
     },
     resolve: {
-        extensions: [ '.ts', '.tsx', 'js' ],
-        modules: [ path.resolve(__dirname, 'src'), 'node_modules' ],
-
+        extensions: ['.ts', '.tsx', 'js'],
+        modules: [path.resolve(__dirname, 'src'), 'node_modules']
     },
     module: {
         rules: [
@@ -33,6 +33,10 @@ let config: webpack.Configuration = {
                         isolatedModules: true
                     }
                 }
+            },
+            {
+                test: /\.wgsl/,
+                type: 'asset/source'
             }
         ]
     },
@@ -41,7 +45,9 @@ let config: webpack.Configuration = {
         new CleanWebpackPlugin(),
         new webpack.DefinePlugin({
             'process.env': {
-                NODE_ENV: JSON.stringify(isProduction ? 'production' : 'development')
+                NODE_ENV: JSON.stringify(
+                    isProduction ? 'production' : 'development'
+                )
             }
         })
     ],
@@ -61,7 +67,9 @@ if (!argv.reduce((prev, cur) => prev || cur === '--watch', false)) {
 
         if (stats.hasErrors()) {
             let statsJson = stats.toJson();
-            console.log('❌' + ' · Error · ' + 'webgpu-seed failed to compile:');
+            console.log(
+                '❌' + ' · Error · ' + 'webgpu-seed failed to compile:'
+            );
             for (let error of statsJson.errors) {
                 console.log(error.message);
             }
@@ -82,7 +90,9 @@ if (!argv.reduce((prev, cur) => prev || cur === '--watch', false)) {
 
         if (stats.hasErrors()) {
             let statsJson = stats.toJson();
-            console.log('❌' + ' · Error · ' + 'webgpu-seed failed to compile:');
+            console.log(
+                '❌' + ' · Error · ' + 'webgpu-seed failed to compile:'
+            );
             for (let error of statsJson.errors) {
                 console.log(error.message);
             }