diff --git a/src/lib/renderers/pipelines/instancer.ts b/src/lib/renderers/pipelines/instancer.ts index ed66681..8794480 100644 --- a/src/lib/renderers/pipelines/instancer.ts +++ b/src/lib/renderers/pipelines/instancer.ts @@ -216,7 +216,7 @@ export class IndirectInstancer { // create buffers for the image bitmaps const firstSource = imageBitmaps![0]; this.textureArray = this.device.createTexture({ - label: 'FAT FUCKING TEXTURE!!!!', + label: 'material texture', format: 'rgba8unorm', size: { width: firstSource.width, diff --git a/src/lib/renderers/terrain-renderer.ts b/src/lib/renderers/terrain-renderer.ts index 54659c3..352d8b1 100644 --- a/src/lib/renderers/terrain-renderer.ts +++ b/src/lib/renderers/terrain-renderer.ts @@ -628,6 +628,15 @@ export class TerrainRenderer implements IRenderer { return; } + // unused for now + /* + const customInstanceShader = jit.generateInstanceShaderCode( + config, + instanceComputeShaderTemplate, + ); + console.log('custom instance shader:', customInstanceShader); + */ + // Create buffers for mesh const instanceVertexBuffer = this.device.createBuffer({ size: mesh.vertices.byteLength, diff --git a/src/lib/scene/mesh.ts b/src/lib/scene/mesh.ts index ce02d5b..6496c3f 100644 --- a/src/lib/scene/mesh.ts +++ b/src/lib/scene/mesh.ts @@ -393,10 +393,64 @@ export class OBJ extends Mesh { } } + // load textures here... + for (const gltfMaterial of gltf.materials!) { + // base color + if (gltfMaterial.pbrMetallicRoughness?.baseColorTexture) { + const texInfo = gltfMaterial.pbrMetallicRoughness?.baseColorTexture; + const gltfTexture = gltf.textures![texInfo.index]; + + const imageIndex = gltfTexture.source!; + const imageDef = gltf.images![imageIndex]; + + const view = gltf.bufferViews![imageDef.bufferView!]; + const buffer = gltfWithBuffers.buffers[view.buffer]; + + const byteOffset = (view.byteOffset ?? 0) + buffer.byteOffset; + const byteLength = view.byteLength; + + const imageBytes = new Uint8Array(buffer.arrayBuffer, byteOffset, byteLength); + + // create image (sus) + const imageBitmap = await createImageBitmap( + new Blob([imageBytes], { type: imageDef.mimeType ?? 'image/png' }), + ); + + finalBitmaps.push(imageBitmap); + } else { + // if there is no texture for base color, create a base color bitmap + let baseColor: number[] = [0.5, 0.5, 0.5, 1.0]; + + if ( + gltfMaterial.pbrMetallicRoughness && + gltfMaterial.pbrMetallicRoughness.baseColorFactor + ) { + baseColor = gltfMaterial.pbrMetallicRoughness.baseColorFactor; + } + + const [r, g, b, a] = baseColor.map((v) => Math.round(v * 255)); + + const canvas = document.createElement('canvas'); + canvas.width = canvas.height = 1; + + const ctx = canvas.getContext('2d')!; + ctx.fillStyle = `rgba(${r},${g},${b},${a})`; + ctx.fillRect(0, 0, 1, 1); + + const blob = await new Promise((resolve, reject) => { + canvas.toBlob((blob) => { + if (blob) resolve(blob); + else reject(new Error('Canvas toBlob() returned null')); + }, 'image/png'); + }); + const imageBitmap = await createImageBitmap(blob); + + finalBitmaps.push(imageBitmap); + } + } + this.vertices = new Float32Array(finalVertices); this.indices = new Uint32Array(finalIndices); this.textures = finalBitmaps; - - console.log('textures', finalBitmaps); } } diff --git a/src/lib/shaders/instancing.wgsl b/src/lib/shaders/instancing.wgsl index f26604b..9723a01 100644 --- a/src/lib/shaders/instancing.wgsl +++ b/src/lib/shaders/instancing.wgsl @@ -17,7 +17,6 @@ var indices: array; @group(2) @binding(1) var ourTexture: texture_2d_array; @group(3) @binding(0) - var transform_matrix: mat4x4; struct VertexIn { @@ -105,7 +104,7 @@ fn fs_main(in: VertexOut) -> @location(0) vec4f if (color.a < 0.5) { discard; -} + } return color;