Skip to content

Commit

Permalink
Fixed image loading
Browse files Browse the repository at this point in the history
  • Loading branch information
@cmhhelgeson
cmhhelgeson committed Oct 27, 2023
1 parent 02a942d commit 8d98133
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 94 deletions.
133 changes: 99 additions & 34 deletions src/sample/normalMap/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@ import { createBoxMeshWithTangents } from '../../meshes/box';
import {
createBindGroupDescriptor,
create3DRenderPipeline,
createPBRDescriptor,
PBRDescriptor,
createTextureFromImage,
} from './utils';

const MAT4X4_BYTES = 64;
Expand Down Expand Up @@ -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<PBRDescriptor>;
// 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<PBRDescriptor>;
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<PBRDescriptor>;
let spiralNormalTexture: GPUTexture;
{
const response = await createPBRDescriptor(device, [
'wood_diffuse.png',
'toybox_normal.png',
'toybox_height.png',
]);
toyboxPBR = response as Required<PBRDescriptor>;
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<PBRDescriptor>;
let spiralHeightTexture: GPUTexture;
{
const response = await createPBRDescriptor(device, [
'brickwall_diffuse.png',
'brickwall_normal.png',
'brickwall_height.png',
]);
brickWallPBR = response as Required<PBRDescriptor>;
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.
Expand Down Expand Up @@ -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',
Expand All @@ -219,7 +284,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => {
function getModelMatrix() {
const modelMatrix = mat4.create();
mat4.identity(modelMatrix);
mat4.rotateX(modelMatrix, 10, modelMatrix);
mat4.rotateX(modelMatrix, 0, modelMatrix);
const now = Date.now() / 1000;
mat4.rotateY(modelMatrix, now * -0.5, modelMatrix);
return modelMatrix;
Expand Down
60 changes: 0 additions & 60 deletions src/sample/normalMap/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<PBRDescriptor> => {
const imgAssetPrepend = '../../../assets/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++) {
let texture: GPUTexture;
{
const url = new URL(loads[i].url, import.meta.url).toString();
console.log(url);
const response = await fetch(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;
};

0 comments on commit 8d98133

Please sign in to comment.