diff --git a/rollup.config.js b/rollup.config.js index b45f3857..33d1fa91 100644 --- 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, + `\ @@ -44,7 +65,8 @@ function writeRedirect(filename) { > -`); +` + ); } const sampleFiles = readDirSyncRecursive('sample'); @@ -52,8 +74,7 @@ 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 index d06443ae..f5bbd698 100644 --- 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 index 80dfbaaa..9390a983 100644 --- 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 index 0aa081a1..8b477e4e 100644 --- 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 index bb84951f..a20e5b5a 100644 --- 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 index 48c22656..03288cac 100644 --- 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 index fb83b240..44e329df 100644 --- 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 index e60407f3..91f5b56a 100644 --- 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 index 47c85ed4..962bc4aa 100644 --- 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 index 646bcfde..e82e0c72 100644 --- 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 index 54d31f45..87cbd0c5 100644 --- 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 index dc325d07..3ee51ba5 100644 --- 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 index 7b5e99b5..2b7c461e 100644 --- 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 index 955a4cc4..44ee094d 100644 --- 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 index 4c7a130d..ac71307e 100644 --- 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 index 6732bc7b..2ad32a6d 100644 --- 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 index 70e20722..0f687778 100644 --- 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 index 16941ccd..be186972 100644 --- 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 index 597dacba..4f3df99c 100644 --- 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 index eace7265..ee749fb5 100644 --- 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 index 5ed87eba..2b95ec9e 100644 --- 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 index 610af91b..4c97c0ef 100644 --- 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 index cc958524..7e519a2d 100644 --- 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 index 65843c88..c2038e00 100644 --- 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 index 25e635b3..13e80d9a 100644 --- 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 index 4b1df520..0e184a07 100644 --- 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 index 99d3d6cf..c4ced432 100644 --- 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 index 1a23d09f..184fdd7a 100644 --- 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 index e983166f..687df449 100644 --- a/src/types.d.ts +++ b/src/types.d.ts @@ -1,4 +1,5 @@ /// +declare const __DIRNAME__; declare module '*.wgsl' { const shader: string;