From c8195de64e442bf8da6e9484e84c5a7957d75f80 Mon Sep 17 00:00:00 2001 From: Gregg Tavares Date: Sun, 29 Oct 2023 08:39:08 +0900 Subject: [PATCH] Move assets to public folder so the code is more idomatic --- {assets => public/assets}/img/Di-3d.png | Bin .../assets}/img/brickwall_diffuse.png | Bin .../assets}/img/brickwall_height.png | Bin .../assets}/img/brickwall_normal.png | Bin .../assets}/img/cubemap/negx.jpg | Bin .../assets}/img/cubemap/negy.jpg | Bin .../assets}/img/cubemap/negz.jpg | Bin .../assets}/img/cubemap/posx.jpg | Bin .../assets}/img/cubemap/posy.jpg | Bin .../assets}/img/cubemap/posz.jpg | Bin .../assets}/img/cubemap/readme.txt | 0 {assets => public/assets}/img/moon.jpg | Bin {assets => public/assets}/img/saturn.jpg | Bin .../assets}/img/spiral_height.png | Bin .../assets}/img/spiral_normal.png | Bin .../assets}/img/toybox_height.png | Bin .../assets}/img/toybox_normal.png | Bin {assets => public/assets}/img/webgpu.png | Bin .../assets}/img/wood_diffuse.png | Bin {assets => public/assets}/video/pano.webm | Bin public/examples/base.css | 11 ++++ src/sample/cameras/main.ts | 4 +- src/sample/cubemap/main.ts | 30 ++-------- src/sample/imageBlur/main.ts | 4 +- src/sample/normalMap/main.ts | 56 +++--------------- src/sample/particles/main.ts | 4 +- src/sample/renderBundles/main.ts | 8 +-- src/sample/texturedCube/main.ts | 4 +- src/sample/videoUploading/main.ts | 5 +- src/sample/videoUploadingWebCodecs/main.ts | 5 +- 30 files changed, 33 insertions(+), 98 deletions(-) rename {assets => public/assets}/img/Di-3d.png (100%) rename {assets => public/assets}/img/brickwall_diffuse.png (100%) rename {assets => public/assets}/img/brickwall_height.png (100%) rename {assets => public/assets}/img/brickwall_normal.png (100%) rename {assets => public/assets}/img/cubemap/negx.jpg (100%) rename {assets => public/assets}/img/cubemap/negy.jpg (100%) rename {assets => public/assets}/img/cubemap/negz.jpg (100%) rename {assets => public/assets}/img/cubemap/posx.jpg (100%) rename {assets => public/assets}/img/cubemap/posy.jpg (100%) rename {assets => public/assets}/img/cubemap/posz.jpg (100%) rename {assets => public/assets}/img/cubemap/readme.txt (100%) rename {assets => public/assets}/img/moon.jpg (100%) rename {assets => public/assets}/img/saturn.jpg (100%) rename {assets => public/assets}/img/spiral_height.png (100%) rename {assets => public/assets}/img/spiral_normal.png (100%) rename {assets => public/assets}/img/toybox_height.png (100%) rename {assets => public/assets}/img/toybox_normal.png (100%) rename {assets => public/assets}/img/webgpu.png (100%) rename {assets => public/assets}/img/wood_diffuse.png (100%) rename {assets => public/assets}/video/pano.webm (100%) create mode 100644 public/examples/base.css diff --git a/assets/img/Di-3d.png b/public/assets/img/Di-3d.png similarity index 100% rename from assets/img/Di-3d.png rename to public/assets/img/Di-3d.png diff --git a/assets/img/brickwall_diffuse.png b/public/assets/img/brickwall_diffuse.png similarity index 100% rename from assets/img/brickwall_diffuse.png rename to public/assets/img/brickwall_diffuse.png diff --git a/assets/img/brickwall_height.png b/public/assets/img/brickwall_height.png similarity index 100% rename from assets/img/brickwall_height.png rename to public/assets/img/brickwall_height.png diff --git a/assets/img/brickwall_normal.png b/public/assets/img/brickwall_normal.png similarity index 100% rename from assets/img/brickwall_normal.png rename to public/assets/img/brickwall_normal.png diff --git a/assets/img/cubemap/negx.jpg b/public/assets/img/cubemap/negx.jpg similarity index 100% rename from assets/img/cubemap/negx.jpg rename to public/assets/img/cubemap/negx.jpg diff --git a/assets/img/cubemap/negy.jpg b/public/assets/img/cubemap/negy.jpg similarity index 100% rename from assets/img/cubemap/negy.jpg rename to public/assets/img/cubemap/negy.jpg diff --git a/assets/img/cubemap/negz.jpg b/public/assets/img/cubemap/negz.jpg similarity index 100% rename from assets/img/cubemap/negz.jpg rename to public/assets/img/cubemap/negz.jpg diff --git a/assets/img/cubemap/posx.jpg b/public/assets/img/cubemap/posx.jpg similarity index 100% rename from assets/img/cubemap/posx.jpg rename to public/assets/img/cubemap/posx.jpg diff --git a/assets/img/cubemap/posy.jpg b/public/assets/img/cubemap/posy.jpg similarity index 100% rename from assets/img/cubemap/posy.jpg rename to public/assets/img/cubemap/posy.jpg diff --git a/assets/img/cubemap/posz.jpg b/public/assets/img/cubemap/posz.jpg similarity index 100% rename from assets/img/cubemap/posz.jpg rename to public/assets/img/cubemap/posz.jpg diff --git a/assets/img/cubemap/readme.txt b/public/assets/img/cubemap/readme.txt similarity index 100% rename from assets/img/cubemap/readme.txt rename to public/assets/img/cubemap/readme.txt diff --git a/assets/img/moon.jpg b/public/assets/img/moon.jpg similarity index 100% rename from assets/img/moon.jpg rename to public/assets/img/moon.jpg diff --git a/assets/img/saturn.jpg b/public/assets/img/saturn.jpg similarity index 100% rename from assets/img/saturn.jpg rename to public/assets/img/saturn.jpg diff --git a/assets/img/spiral_height.png b/public/assets/img/spiral_height.png similarity index 100% rename from assets/img/spiral_height.png rename to public/assets/img/spiral_height.png diff --git a/assets/img/spiral_normal.png b/public/assets/img/spiral_normal.png similarity index 100% rename from assets/img/spiral_normal.png rename to public/assets/img/spiral_normal.png diff --git a/assets/img/toybox_height.png b/public/assets/img/toybox_height.png similarity index 100% rename from assets/img/toybox_height.png rename to public/assets/img/toybox_height.png diff --git a/assets/img/toybox_normal.png b/public/assets/img/toybox_normal.png similarity index 100% rename from assets/img/toybox_normal.png rename to public/assets/img/toybox_normal.png diff --git a/assets/img/webgpu.png b/public/assets/img/webgpu.png similarity index 100% rename from assets/img/webgpu.png rename to public/assets/img/webgpu.png diff --git a/assets/img/wood_diffuse.png b/public/assets/img/wood_diffuse.png similarity index 100% rename from assets/img/wood_diffuse.png rename to public/assets/img/wood_diffuse.png diff --git a/assets/video/pano.webm b/public/assets/video/pano.webm similarity index 100% rename from assets/video/pano.webm rename to public/assets/video/pano.webm diff --git a/public/examples/base.css b/public/examples/base.css new file mode 100644 index 00000000..cc554439 --- /dev/null +++ b/public/examples/base.css @@ -0,0 +1,11 @@ +html, body { + margin: 0; + height: 100%; +} +#canvas { + width: 100%; + max-width: 600px; + aspect-ratio: 1; + display: block; + margin: 0 auto; +} diff --git a/src/sample/cameras/main.ts b/src/sample/cameras/main.ts index e4c59c8f..fabd4797 100644 --- a/src/sample/cameras/main.ts +++ b/src/sample/cameras/main.ts @@ -128,9 +128,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => { // Fetch the image and upload it into a GPUTexture. let cubeTexture: GPUTexture; { - const response = await fetch( - new URL('../../../assets/img/Di-3d.png', import.meta.url).toString() - ); + const response = await fetch('/assets/img/Di-3d.png'); const imageBitmap = await createImageBitmap(await response.blob()); cubeTexture = device.createTexture({ diff --git a/src/sample/cubemap/main.ts b/src/sample/cubemap/main.ts index 7524fbea..ba97f210 100644 --- a/src/sample/cubemap/main.ts +++ b/src/sample/cubemap/main.ts @@ -107,30 +107,12 @@ const init: SampleInit = async ({ canvas, pageState }) => { { // The order of the array layers is [+X, -X, +Y, -Y, +Z, -Z] const imgSrcs = [ - new URL( - `../../../assets/img/cubemap/posx.jpg`, - import.meta.url - ).toString(), - new URL( - `../../../assets/img/cubemap/negx.jpg`, - import.meta.url - ).toString(), - new URL( - `../../../assets/img/cubemap/posy.jpg`, - import.meta.url - ).toString(), - new URL( - `../../../assets/img/cubemap/negy.jpg`, - import.meta.url - ).toString(), - new URL( - `../../../assets/img/cubemap/posz.jpg`, - import.meta.url - ).toString(), - new URL( - `../../../assets/img/cubemap/negz.jpg`, - import.meta.url - ).toString(), + '/assets/img/cubemap/posx.jpg', + '/assets/img/cubemap/negx.jpg', + '/assets/img/cubemap/posy.jpg', + '/assets/img/cubemap/negy.jpg', + '/assets/img/cubemap/posz.jpg', + '/assets/img/cubemap/negz.jpg', ]; const promises = imgSrcs.map(async (src) => { const response = await fetch(src); diff --git a/src/sample/imageBlur/main.ts b/src/sample/imageBlur/main.ts index 2807f92f..0f426d63 100644 --- a/src/sample/imageBlur/main.ts +++ b/src/sample/imageBlur/main.ts @@ -64,9 +64,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => { minFilter: 'linear', }); - const response = await fetch( - new URL('../../../assets/img/Di-3d.png', import.meta.url).toString() - ); + const response = await fetch('/assets/img/Di-3d.png'); const imageBitmap = await createImageBitmap(await response.blob()); const [srcWidth, srcHeight] = [imageBitmap.width, imageBitmap.height]; diff --git a/src/sample/normalMap/main.ts b/src/sample/normalMap/main.ts index 18467adb..047a1d57 100644 --- a/src/sample/normalMap/main.ts +++ b/src/sample/normalMap/main.ts @@ -91,96 +91,56 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => { // Fetch the image and upload it into a GPUTexture. let woodDiffuseTexture: GPUTexture; { - const response = await fetch( - new URL( - '../../../assets/img/wood_diffuse.png', - import.meta.url - ).toString() - ); + const response = await fetch('/assets/img/wood_diffuse.png'); const imageBitmap = await createImageBitmap(await response.blob()); woodDiffuseTexture = createTextureFromImage(device, imageBitmap); } let spiralNormalTexture: GPUTexture; { - const response = await fetch( - new URL( - '../../../assets/img/spiral_normal.png', - import.meta.url - ).toString() - ); + const response = await fetch('/assets/img/spiral_normal.png'); const imageBitmap = await createImageBitmap(await response.blob()); spiralNormalTexture = createTextureFromImage(device, imageBitmap); } let spiralHeightTexture: GPUTexture; { - const response = await fetch( - new URL( - '../../../assets/img/spiral_height.png', - import.meta.url - ).toString() - ); + const response = await fetch('/assets/img/spiral_height.png'); const imageBitmap = await createImageBitmap(await response.blob()); spiralHeightTexture = createTextureFromImage(device, imageBitmap); } let toyboxNormalTexture: GPUTexture; { - const response = await fetch( - new URL( - '../../../assets/img/toybox_normal.png', - import.meta.url - ).toString() - ); + const response = await fetch('/assets/img/toybox_normal.png'); const imageBitmap = await createImageBitmap(await response.blob()); toyboxNormalTexture = createTextureFromImage(device, imageBitmap); } let toyboxHeightTexture: GPUTexture; { - const response = await fetch( - new URL( - '../../../assets/img/toybox_height.png', - import.meta.url - ).toString() - ); + const response = await fetch('/assets/img/toybox_height.png'); const imageBitmap = await createImageBitmap(await response.blob()); toyboxHeightTexture = createTextureFromImage(device, imageBitmap); } let brickwallDiffuseTexture: GPUTexture; { - const response = await fetch( - new URL( - '../../../assets/img/brickwall_diffuse.png', - import.meta.url - ).toString() - ); + const response = await fetch('/assets/img/brickwall_diffuse.png'); const imageBitmap = await createImageBitmap(await response.blob()); brickwallDiffuseTexture = createTextureFromImage(device, imageBitmap); } let brickwallNormalTexture: GPUTexture; { - const response = await fetch( - new URL( - '../../../assets/img/brickwall_normal.png', - import.meta.url - ).toString() - ); + const response = await fetch('/assets/img/brickwall_normal.png'); const imageBitmap = await createImageBitmap(await response.blob()); brickwallNormalTexture = createTextureFromImage(device, imageBitmap); } let brickwallHeightTexture: GPUTexture; { - const response = await fetch( - new URL( - '../../../assets/img/brickwall_height.png', - import.meta.url - ).toString() - ); + const response = await fetch('/assets/img/brickwall_height.png'); const imageBitmap = await createImageBitmap(await response.blob()); brickwallHeightTexture = createTextureFromImage(device, imageBitmap); } diff --git a/src/sample/particles/main.ts b/src/sample/particles/main.ts index 76300b63..d9d1069c 100644 --- a/src/sample/particles/main.ts +++ b/src/sample/particles/main.ts @@ -185,9 +185,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => { let textureHeight = 1; let numMipLevels = 1; { - const response = await fetch( - new URL('../../../assets/img/webgpu.png', import.meta.url).toString() - ); + const response = await fetch('/assets/img/webgpu.png'); const imageBitmap = await createImageBitmap(await response.blob()); // Calculate number of mip levels required to generate the probability map diff --git a/src/sample/renderBundles/main.ts b/src/sample/renderBundles/main.ts index 96d5c541..8eae15ae 100644 --- a/src/sample/renderBundles/main.ts +++ b/src/sample/renderBundles/main.ts @@ -118,9 +118,7 @@ const init: SampleInit = async ({ canvas, pageState, gui, stats }) => { // Fetch the images and upload them into a GPUTexture. let planetTexture: GPUTexture; { - const response = await fetch( - new URL('../../../assets/img/saturn.jpg', import.meta.url).toString() - ); + const response = await fetch('/assets/img/saturn.jpg'); const imageBitmap = await createImageBitmap(await response.blob()); planetTexture = device.createTexture({ @@ -140,9 +138,7 @@ const init: SampleInit = async ({ canvas, pageState, gui, stats }) => { let moonTexture: GPUTexture; { - const response = await fetch( - new URL('../../../assets/img/moon.jpg', import.meta.url).toString() - ); + const response = await fetch('/assets/img/moon.jpg'); const imageBitmap = await createImageBitmap(await response.blob()); moonTexture = device.createTexture({ diff --git a/src/sample/texturedCube/main.ts b/src/sample/texturedCube/main.ts index 750ca142..d052dd2a 100644 --- a/src/sample/texturedCube/main.ts +++ b/src/sample/texturedCube/main.ts @@ -110,9 +110,7 @@ const init: SampleInit = async ({ canvas, pageState }) => { // Fetch the image and upload it into a GPUTexture. let cubeTexture: GPUTexture; { - const response = await fetch( - new URL('../../../assets/img/Di-3d.png', import.meta.url).toString() - ); + const response = await fetch('/assets/img/Di-3d.png'); const imageBitmap = await createImageBitmap(await response.blob()); cubeTexture = device.createTexture({ diff --git a/src/sample/videoUploading/main.ts b/src/sample/videoUploading/main.ts index 8c0f2784..4aed67df 100644 --- a/src/sample/videoUploading/main.ts +++ b/src/sample/videoUploading/main.ts @@ -9,10 +9,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => { video.loop = true; video.autoplay = true; video.muted = true; - video.src = new URL( - '../../../assets/video/pano.webm', - import.meta.url - ).toString(); + video.src = '/assets/video/pano.webm'; await video.play(); const adapter = await navigator.gpu.requestAdapter(); diff --git a/src/sample/videoUploadingWebCodecs/main.ts b/src/sample/videoUploadingWebCodecs/main.ts index c2098fea..867f183b 100644 --- a/src/sample/videoUploadingWebCodecs/main.ts +++ b/src/sample/videoUploadingWebCodecs/main.ts @@ -9,10 +9,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => { video.loop = true; video.autoplay = true; video.muted = true; - video.src = new URL( - '../../../assets/video/pano.webm', - import.meta.url - ).toString(); + video.src = '/assets/video/pano.webm'; await video.play(); const adapter = await navigator.gpu.requestAdapter();