glTF texture loading

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,

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,

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<Blob>((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);
   }
 }

src/lib/shaders/instancing.wgsl

@@ -17,7 +17,6 @@ var<storage, read> indices: array<u32>;
 @group(2) @binding(1) var ourTexture: texture_2d_array<f32>;
 
 @group(3) @binding(0)
-
 var<uniform> transform_matrix: mat4x4<f32>;
 
 struct VertexIn {
@@ -105,7 +104,7 @@ fn fs_main(in: VertexOut) -> @location(0) vec4f
 
   if (color.a < 0.5) {
     discard;
-}
+  }
 
   return color;