Automate filename

This was the single biggest issue I had making a new sample. I'd copy an existing meta.ts and forget to change this.
webgpu · Mar 8, 2024 · 2d47334 · 2d47334
1 parent a7ded1b
commit 2d47334
Show file tree

Hide file tree

Showing 29 changed files with 59 additions and 33 deletions.
diff --git a/rollup.config.js b/rollup.config.js
@@ -21,6 +21,25 @@ function wgslPlugin() {
   };
 }
 
+function makeRelativeToCWD(id) {
+  return path.relative(process.cwd(), path.normalize(id)).replaceAll('\\', '/');
+}
+
+function filenamePlugin() {
+  return {
+    name: 'filename-plugin',
+    transform(code, id) {
+      return {
+        code: code.replaceAll(
+          '__DIRNAME__',
+          () => `${JSON.stringify(makeRelativeToCWD(path.dirname(id)))}`
+        ),
+        map: { mappings: '' },
+      };
+    },
+  };
+}
+
 /**
  * Given a path like sample/foo/main.ts then, if an index.html doesn't exist
  * in the same folder, generate a redirect index.html in the out folder.
@@ -33,8 +52,10 @@ function writeRedirect(filename) {
   const dirname = path.join(outPath, 'samples', sampleName);
   const filepath = path.join(dirname, 'index.html');
   fs.mkdirSync(dirname, { recursive: true });
-  console.log('created', filepath)
-  fs.writeFileSync(filepath, `\
+  console.log('created', filepath);
+  fs.writeFileSync(
+    filepath,
+    `\
 <!DOCTYPE html>
 <html>
   <head>
@@ -44,16 +65,16 @@ function writeRedirect(filename) {
       ></meta> 
   </head>
 </html>
-`);
+`
+  );
 }
 
 const sampleFiles = readDirSyncRecursive('sample');
 
 // Generate redirects for all samples
 sampleFiles
   .filter((n) => n.endsWith('/index.html'))
-  .forEach(n => writeRedirect(n));
-
+  .forEach((n) => writeRedirect(n));
 
 const samplePlugins = [
   wgslPlugin(),
@@ -89,7 +110,11 @@ export default [
         sourcemap: true,
       },
     ],
-    plugins: [nodeResolve(), typescript({ tsconfig: './src/tsconfig.json' })],
+    plugins: [
+      nodeResolve(),
+      filenamePlugin(),
+      typescript({ tsconfig: './src/tsconfig.json' }),
+    ],
     watch: {
       clearScreen: false,
     },

diff --git a/sample/a-buffer/meta.ts b/sample/a-buffer/meta.ts
@@ -3,7 +3,7 @@ export default {
   description: `Demonstrates order independent transparency using a per-pixel 
      linked-list of translucent fragments. Provides a choice for 
      limiting memory usage (when required).`,
-  filename: 'sample/a-buffer',
+  filename: __DIRNAME__,
   sources: [
     { path: 'main.ts' },
     { path: 'opaque.wgsl' },

diff --git a/sample/animometer/meta.ts b/sample/animometer/meta.ts
@@ -1,6 +1,6 @@
 export default {
   name: 'Animometer',
   description: 'A WebGPU port of the Animometer MotionMark benchmark.',
-  filename: 'sample/animometer',
+  filename: __DIRNAME__,
   sources: [{ path: 'main.ts' }, { path: 'animometer.wgsl' }],
 };
diff --git a/sample/bitonicSort/meta.ts b/sample/bitonicSort/meta.ts
@@ -2,7 +2,7 @@ export default {
   name: 'Bitonic Sort',
   description:
     "A naive bitonic sort algorithm executed on the GPU, based on tgfrerer's implementation at poniesandlight.co.uk/reflect/bitonic_merge_sort/. Each dispatch of the bitonic sort shader dispatches a workgroup containing elements/2 invocations. The GUI's Execution Information folder contains information about the sort's current state. The visualizer displays the sort's results as colored cells sorted from brightest to darkest.",
-  filename: 'sample/bitonicSort',
+  filename: __DIRNAME__,
   sources: [
     { path: 'main.ts' },
     { path: 'bitonicDisplay.ts' },

diff --git a/sample/cameras/meta.ts b/sample/cameras/meta.ts
@@ -1,7 +1,7 @@
 export default {
   name: 'Cameras',
   description: 'This example provides example camera implementations',
-  filename: 'sample/cameras',
+  filename: __DIRNAME__,
   sources: [
     { path: 'main.ts' },
     { path: 'camera.ts' },

diff --git a/sample/computeBoids/meta.ts b/sample/computeBoids/meta.ts
@@ -5,7 +5,7 @@ export default {
 the flocking behavior of birds. A compute shader updates \
 two ping-pong buffers which store particle data. The data \
 is used to draw instanced particles.',
-  filename: 'sample/computeBoids',
+  filename: __DIRNAME__,
   sources: [
     { path: 'main.ts' },
     { path: 'updateSprites.wgsl' },

diff --git a/sample/cornell/meta.ts b/sample/cornell/meta.ts
@@ -2,7 +2,7 @@ export default {
   name: 'Cornell box',
   description:
     'A classic Cornell box, using a lightmap generated using software ray-tracing.',
-  filename: 'sample/cornell',
+  filename: __DIRNAME__,
   sources: [
     { path: 'main.ts' },
     { path: 'common.ts' },

diff --git a/sample/cubemap/meta.ts b/sample/cubemap/meta.ts
@@ -2,7 +2,7 @@ export default {
   name: 'Cubemap',
   description:
     'This example shows how to render and sample from a cubemap texture.',
-  filename: 'sample/cubemap',
+  filename: __DIRNAME__,
   sources: [
     { path: 'main.ts' },
     { path: '../../shaders/basic.vert.wgsl' },

diff --git a/sample/deferredRendering/meta.ts b/sample/deferredRendering/meta.ts
@@ -9,7 +9,7 @@ export default {
     The debug view shows the depth buffer on the left (flipped and scaled a bit to make it more visible), the normal G buffer
     in the middle, and the albedo G-buffer on the right side of the screen.
     `,
-  filename: 'sample/deferredRendering',
+  filename: __DIRNAME__,
   sources: [
     { path: 'main.ts' },
     { path: 'vertexWriteGBuffers.wgsl' },

diff --git a/sample/fractalCube/meta.ts b/sample/fractalCube/meta.ts
@@ -3,7 +3,7 @@ export default {
   description:
     "This example uses the previous frame's rendering result \
      as the source texture for the next frame.",
-  filename: 'sample/fractalCube',
+  filename: __DIRNAME__,
   sources: [
     { path: 'main.ts' },
     { path: '../../shaders/basic.vert.wgsl' },

diff --git a/sample/gameOfLife/meta.ts b/sample/gameOfLife/meta.ts
@@ -2,7 +2,7 @@ export default {
   name: "Conway's Game of Life",
   description:
     "This example shows how to make Conway's game of life. First, use compute shader to calculate how cells grow or die. Then use render pipeline to draw cells by using instance mesh.",
-  filename: 'sample/gameOfLife',
+  filename: __DIRNAME__,
   sources: [
     { path: 'main.ts' },
     { path: 'compute.wgsl' },

diff --git a/sample/helloTriangle/meta.ts b/sample/helloTriangle/meta.ts
@@ -1,7 +1,7 @@
 export default {
   name: 'Hello Triangle',
   description: 'Shows rendering a basic triangle.',
-  filename: 'sample/helloTriangle',
+  filename: __DIRNAME__,
   sources: [
     { path: 'main.ts' },
     { path: '../../shaders/triangle.vert.wgsl' },

diff --git a/sample/helloTriangleMSAA/meta.ts b/sample/helloTriangleMSAA/meta.ts
@@ -1,7 +1,7 @@
 export default {
   name: 'Hello Triangle MSAA',
   description: 'Shows multisampled rendering a basic triangle.',
-  filename: 'sample/helloTriangleMSAA',
+  filename: __DIRNAME__,
   sources: [
     { path: 'main.ts' },
     { path: '../../shaders/triangle.vert.wgsl' },

diff --git a/sample/imageBlur/meta.ts b/sample/imageBlur/meta.ts
@@ -2,7 +2,7 @@ export default {
   name: 'Image Blur',
   description:
     'This example shows how to blur an image using a WebGPU compute shader.',
-  filename: 'sample/imageBlur',
+  filename: __DIRNAME__,
   sources: [
     { path: 'main.ts' },
     { path: 'blur.wgsl' },

diff --git a/sample/instancedCube/meta.ts b/sample/instancedCube/meta.ts
@@ -1,7 +1,7 @@
 export default {
   name: 'Instanced Cube',
   description: 'This example shows the use of instancing.',
-  filename: 'sample/instancedCube',
+  filename: __DIRNAME__,
   sources: [
     { path: 'main.ts' },
     { path: 'instanced.vert.wgsl' },

diff --git a/sample/normalMap/meta.ts b/sample/normalMap/meta.ts
@@ -2,7 +2,7 @@ export default {
   name: 'Normal Mapping',
   description:
     'This example demonstrates multiple different methods that employ fragment shaders to achieve additional perceptual depth on the surface of a cube mesh. Demonstrated methods include normal mapping, parallax mapping, and steep parallax mapping.',
-  filename: 'sample/normalMap',
+  filename: __DIRNAME__,
   sources: [
     { path: 'main.ts' },
     { path: 'normalMap.wgsl' },

diff --git a/sample/particles/meta.ts b/sample/particles/meta.ts
@@ -2,7 +2,7 @@ export default {
   name: 'Particles',
   description:
     'This example demonstrates rendering of particles simulated with compute shaders.',
-  filename: 'sample/particles',
+  filename: __DIRNAME__,
   sources: [
     { path: 'main.ts' },
     { path: './particle.wgsl' },

diff --git a/sample/renderBundles/meta.ts b/sample/renderBundles/meta.ts
@@ -4,7 +4,7 @@ export default {
     meshes individually as a proxy for a more complex scene in order to demonstrate the reduction
     in JavaScript time spent to issue render commands. (Typically a scene like this would make use
     of instancing to reduce draw overhead.)`,
-  filename: 'sample/renderBundles',
+  filename: __DIRNAME__,
   sources: [
     { path: 'main.ts' },
     { path: 'mesh.wgsl' },

diff --git a/sample/resizeCanvas/meta.ts b/sample/resizeCanvas/meta.ts
@@ -2,7 +2,7 @@ export default {
   name: 'Resize Canvas',
   description:
     'Shows multisampled rendering a basic triangle on a dynamically sized canvas.',
-  filename: 'sample/resizeCanvas',
+  filename: __DIRNAME__,
   sources: [
     { path: 'main.ts' },
     { path: '../../shaders/triangle.vert.wgsl' },

diff --git a/sample/reversedZ/meta.ts b/sample/reversedZ/meta.ts
@@ -10,7 +10,7 @@ export default {
     https://developer.nvidia.com/content/depth-precision-visualized
     https://web.archive.org/web/20220724174000/https://thxforthefish.com/posts/reverse_z/
     `,
-  filename: 'sample/reversedZ',
+  filename: __DIRNAME__,
   sources: [
     { path: 'main.ts' },
     { path: 'vertex.wgsl' },

diff --git a/sample/rotatingCube/meta.ts b/sample/rotatingCube/meta.ts
@@ -2,7 +2,7 @@ export default {
   name: 'Rotating Cube',
   description:
     'This example shows how to upload uniform data every frame to render a rotating object.',
-  filename: 'sample/rotatingCube',
+  filename: __DIRNAME__,
   sources: [
     { path: 'main.ts' },
     { path: '../../shaders/basic.vert.wgsl' },

diff --git a/sample/samplerParameters/meta.ts b/sample/samplerParameters/meta.ts
@@ -2,7 +2,7 @@ export default {
   name: 'Sampler Parameters',
   description:
     'Visualizes what all the sampler parameters do. Shows a textured plane at various scales (rotated, head-on, in perspective, and in vanishing perspective). The bottom-right view shows the raw contents of the 4 mipmap levels of the test texture (16x16, 8x8, 4x4, and 2x2).',
-  filename: 'sample/samplerParameters',
+  filename: __DIRNAME__,
   sources: [
     { path: 'main.ts' },
     { path: './texturedSquare.wgsl' },

diff --git a/sample/shadowMapping/meta.ts b/sample/shadowMapping/meta.ts
@@ -2,7 +2,7 @@ export default {
   name: 'Shadow Mapping',
   description:
     'This example shows how to sample from a depth texture to render shadows.',
-  filename: 'sample/shadowMapping',
+  filename: __DIRNAME__,
   sources: [
     { path: 'main.ts' },
     { path: 'vertexShadow.wgsl' },

diff --git a/sample/skinnedMesh/meta.ts b/sample/skinnedMesh/meta.ts
@@ -2,7 +2,7 @@ export default {
   name: 'Skinned Mesh',
   description:
     'A demonstration of basic gltf loading and mesh skinning, ported from https://webgl2fundamentals.org/webgl/lessons/webgl-skinning.html. Mesh data, per vertex attributes, and skin inverseBindMatrices are taken from the json parsed from the binary output of the .glb file. Animations are generated progrmatically, with animated joint matrices updated and passed to shaders per frame via uniform buffers.',
-  filename: 'sample/skinnedMesh',
+  filename: __DIRNAME__,
   sources: [
     { path: 'main.ts' },
     { path: 'gridData.ts' },

diff --git a/sample/texturedCube/meta.ts b/sample/texturedCube/meta.ts
@@ -1,7 +1,7 @@
 export default {
   name: 'Textured Cube',
   description: 'This example shows how to bind and sample textures.',
-  filename: 'sample/texturedCube',
+  filename: __DIRNAME__,
   sources: [
     { path: 'main.ts' },
     { path: '../../shaders/basic.vert.wgsl' },

diff --git a/sample/twoCubes/meta.ts b/sample/twoCubes/meta.ts
@@ -5,7 +5,7 @@ export default {
      involved when updating and binding multiple slices of a \
      uniform buffer. It renders two rotating cubes which have transform \
      matrices at different offsets in a uniform buffer.',
-  filename: 'sample/twoCubes',
+  filename: __DIRNAME__,
   sources: [
     { path: 'main.ts' },
     { path: '../../shaders/basic.vert.wgsl' },

diff --git a/sample/videoUploading/meta.ts b/sample/videoUploading/meta.ts
@@ -1,7 +1,7 @@
 export default {
   name: 'Video Uploading',
   description: 'This example shows how to upload video frame to WebGPU.',
-  filename: 'sample/videoUploading',
+  filename: __DIRNAME__,
   sources: [
     { path: 'main.ts' },
     { path: '../../shaders/fullscreenTexturedQuad.wgsl' },

diff --git a/sample/worker/meta.ts b/sample/worker/meta.ts
@@ -3,7 +3,7 @@ export default {
   description: `This example shows one method of using WebGPU in a web worker and presenting to
     the main thread. It uses canvas.transferControlToOffscreen() to produce an offscreen canvas
     which is then transferred to the worker where all the WebGPU calls are made.`,
-  filename: 'sample/worker',
+  filename: __DIRNAME__,
   sources: [
     { path: 'main.ts' },
     { path: 'worker.ts' },

diff --git a/src/types.d.ts b/src/types.d.ts
@@ -1,4 +1,5 @@
 /// <reference types="@webgpu/types" />
+declare const __DIRNAME__;
 
 declare module '*.wgsl' {
   const shader: string;