feat: updated readme

Author: Hazingoo

README.md

@@ -14,7 +14,7 @@ WebGL Forward+ and Clustered Deferred Shading
 
 [![](img/video.mp4)](TODO)
 
-### (TODO: Your README)
+## Forward+
 
 *DO NOT* leave the README to the last minute! It is a crucial part of the
 project, and we will not be able to grade you without a good README.

src/shaders/shaders.ts

@@ -42,10 +42,14 @@ export const constants = {
 
 function evalShaderRaw(raw: string) {
     let processed = raw;
-    for (const [key, value] of Object.entries(constants)) {
-        const regex = new RegExp(`\\$\\{${key}\\}`, 'g');
-        processed = processed.replace(regex, String(value));
+
+    const sortedEntries = Object.entries(constants).sort((a, b) => b[0].length - a[0].length);
+
+    for (const [key, value] of sortedEntries) {
+        const placeholder = '${' + key + '}';
+        processed = processed.replaceAll(placeholder, String(value));
     }
+
     return processed;
 }
 
@@ -66,3 +70,4 @@ export const clusteredDeferredFullscreenFragSrc: string = processShaderRaw(clust
 
 export const moveLightsComputeSrc: string = processShaderRaw(moveLightsComputeRaw);
 export const clusteringComputeSrc: string = processShaderRaw(clusteringComputeRaw);
+

vite.config.ts

@@ -4,5 +4,35 @@ export default defineConfig({
     build: {
         target: 'esnext'
     },
-    base: process.env.GITHUB_ACTIONS_BASE || undefined
+    base: process.env.GITHUB_ACTIONS_BASE || undefined,
+    plugins: [{
+        name: 'wgsl-shader-preprocessor',
+        transform(code, id) {
+            if (id.includes('.wgsl') && id.includes('?raw')) {
+                const constants = {
+                    bindGroup_scene: 0,
+                    bindGroup_model: 1,
+                    bindGroup_material: 2,
+                    moveLightsWorkgroupSize: 128,
+                    lightRadius: 2,
+                    clusterSizeX: 16,
+                    clusterSizeY: 9,
+                    clusterSizeZ: 24,
+                    clusteringWorkgroupSize: 64,
+                    maxLightsPerCluster: 500
+                };
+
+                let processed = code;
+                for (const [key, value] of Object.entries(constants)) {
+                    const placeholder = '${' + key + '}';
+                    processed = processed.replaceAll(placeholder, String(value));
+                }
+
+                return {
+                    code: processed,
+                    map: null
+                };
+            }
+        }
+    }]
 })