diff --git a/assets/img/brickwall_diffuse.png b/assets/img/brickwall_diffuse.png new file mode 100644 index 00000000..35835088 Binary files /dev/null and b/assets/img/brickwall_diffuse.png differ diff --git a/assets/img/brickwall_height.png b/assets/img/brickwall_height.png new file mode 100644 index 00000000..48ab26fa Binary files /dev/null and b/assets/img/brickwall_height.png differ diff --git a/assets/img/brickwall_normal.png b/assets/img/brickwall_normal.png new file mode 100644 index 00000000..aa6643de Binary files /dev/null and b/assets/img/brickwall_normal.png differ diff --git a/assets/img/spiral_height.png b/assets/img/spiral_height.png new file mode 100644 index 00000000..1f1680ff Binary files /dev/null and b/assets/img/spiral_height.png differ diff --git a/assets/img/spiral_normal.png b/assets/img/spiral_normal.png new file mode 100644 index 00000000..5cba15cf Binary files /dev/null and b/assets/img/spiral_normal.png differ diff --git a/assets/img/toybox_height.png b/assets/img/toybox_height.png new file mode 100644 index 00000000..9977210b Binary files /dev/null and b/assets/img/toybox_height.png differ diff --git a/assets/img/toybox_normal.png b/assets/img/toybox_normal.png new file mode 100644 index 00000000..91bcb56a Binary files /dev/null and b/assets/img/toybox_normal.png differ diff --git a/assets/img/wood_diffuse.png b/assets/img/wood_diffuse.png new file mode 100644 index 00000000..e28e2aee Binary files /dev/null and b/assets/img/wood_diffuse.png differ diff --git a/src/sample/normalMap/main.ts b/src/sample/normalMap/main.ts index 624f3a15..18467adb 100644 --- a/src/sample/normalMap/main.ts +++ b/src/sample/normalMap/main.ts @@ -4,10 +4,9 @@ import normalMapWGSL from './normalMap.wgsl'; import { createMeshRenderable } from '../../meshes/mesh'; import { createBoxMeshWithTangents } from '../../meshes/box'; import { - PBRDescriptor, - createPBRDescriptor, createBindGroupDescriptor, create3DRenderPipeline, + createTextureFromImage, } from './utils'; const MAT4X4_BYTES = 64; @@ -89,35 +88,101 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => { usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST, }); - // Create PBR info (diffuse, normal, and depth/height textures) - let spiralPBR: Required; + // Fetch the image and upload it into a GPUTexture. + let woodDiffuseTexture: GPUTexture; { - const response = await createPBRDescriptor(device, [ - 'wood_diffuse.png', - 'spiral_normal.png', - 'spiral_height.png', - ]); - spiralPBR = response as Required; + const response = await fetch( + new URL( + '../../../assets/img/wood_diffuse.png', + import.meta.url + ).toString() + ); + const imageBitmap = await createImageBitmap(await response.blob()); + woodDiffuseTexture = createTextureFromImage(device, imageBitmap); } - let toyboxPBR: Required; + let spiralNormalTexture: GPUTexture; { - const response = await createPBRDescriptor(device, [ - 'wood_diffuse.png', - 'toybox_normal.png', - 'toybox_height.png', - ]); - toyboxPBR = response as Required; + const response = await fetch( + new URL( + '../../../assets/img/spiral_normal.png', + import.meta.url + ).toString() + ); + const imageBitmap = await createImageBitmap(await response.blob()); + spiralNormalTexture = createTextureFromImage(device, imageBitmap); } - let brickWallPBR: Required; + let spiralHeightTexture: GPUTexture; { - const response = await createPBRDescriptor(device, [ - 'brickwall_diffuse.png', - 'brickwall_normal.png', - 'brickwall_height.png', - ]); - brickWallPBR = response as Required; + const response = await fetch( + new URL( + '../../../assets/img/spiral_height.png', + import.meta.url + ).toString() + ); + 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 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 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 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 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 imageBitmap = await createImageBitmap(await response.blob()); + brickwallHeightTexture = createTextureFromImage(device, imageBitmap); } // Create a sampler with linear filtering for smooth interpolation. @@ -179,21 +244,21 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => { [ [ sampler, - spiralPBR.diffuse.createView(), - spiralPBR.normal.createView(), - spiralPBR.height.createView(), + woodDiffuseTexture.createView(), + spiralNormalTexture.createView(), + spiralHeightTexture.createView(), ], [ sampler, - toyboxPBR.diffuse.createView(), - toyboxPBR.normal.createView(), - toyboxPBR.height.createView(), + woodDiffuseTexture.createView(), + toyboxNormalTexture.createView(), + toyboxHeightTexture.createView(), ], [ sampler, - brickWallPBR.diffuse.createView(), - brickWallPBR.normal.createView(), - brickWallPBR.height.createView(), + brickwallDiffuseTexture.createView(), + brickwallNormalTexture.createView(), + brickwallHeightTexture.createView(), ], ], 'Surface', @@ -219,7 +284,6 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => { function getModelMatrix() { const modelMatrix = mat4.create(); mat4.identity(modelMatrix); - mat4.rotateX(modelMatrix, 10, modelMatrix); const now = Date.now() / 1000; mat4.rotateY(modelMatrix, now * -0.5, modelMatrix); return modelMatrix; @@ -275,8 +339,8 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => { const depthFolder = gui.addFolder('Depth'); lightFolder.add(settings, 'Reset Light').onChange(() => { lightPosXController.setValue(1.7); - lightPosYController.setValue(-0.7); - lightPosZController.setValue(1.9); + lightPosYController.setValue(0.7); + lightPosZController.setValue(-1.9); lightIntensityController.setValue(0.02); }); const lightPosXController = lightFolder diff --git a/src/sample/normalMap/utils.ts b/src/sample/normalMap/utils.ts index f0742be9..6161a41a 100644 --- a/src/sample/normalMap/utils.ts +++ b/src/sample/normalMap/utils.ts @@ -205,63 +205,3 @@ export const createTextureFromImage = ( ); return texture; }; - -export interface PBRDescriptor { - diffuse?: GPUTexture; - normal?: GPUTexture; - height?: GPUTexture; -} - -interface URLLoad { - url: string; - type: keyof PBRDescriptor; -} - -export const createPBRDescriptor = async ( - device: GPUDevice, - urls: string[] -): Promise => { - const imgAssetPrepend = '/img/'; - const loads = urls.map((url) => { - const splits = url.split('_'); - const ttype = splits[splits.length - 1].split('.')[0]; - const load: URLLoad = { - url: imgAssetPrepend + url, - type: ttype as keyof PBRDescriptor, - }; - return load; - }); - console.log(loads); - const pbr: PBRDescriptor = {}; - for (let i = 0; i < loads.length; i++) { - console.log(loads[i].url); - console.log(import.meta.url); - let texture: GPUTexture; - { - const response = await fetch(loads[i].url); - const imageBitmap = await createImageBitmap(await response.blob()); - texture = createTextureFromImage(device, imageBitmap); - } - - console.log(loads[i].type); - - switch (loads[i].type) { - case 'diffuse': - { - pbr.diffuse = texture; - } - break; - case 'height': - { - pbr.height = texture; - } - break; - case 'normal': - { - pbr.normal = texture; - } - break; - } - } - return pbr; -};