gltf emission texture

gltf.js

@@ -27,7 +27,6 @@ function transformMatrix()
 
 function buildTransfomMatrices(json)
 {
-
 }
 
 function parseGltfChunks(buffer)

gltf.wgsl

@@ -8,7 +8,9 @@ struct Configuration {
 @group(0) @binding(0) var<uniform> config: Configuration;
 @group(0) @binding(1) var<storage> nodeMatrix: array<mat4x4f>;
 @group(0) @binding(2) var linearSampler: sampler;
-@group(0) @binding(3) var colorTexture: texture_2d<f32>;
+
+@group(1) @binding(0) var baseTexture: texture_2d<f32>;
+@group(1) @binding(1) var emissionTexture: texture_2d<f32>;
 
 /*
 struct Imm {
@@ -79,7 +81,7 @@ fn lighting(position: vec3f, lightPosition: vec3f, eyePosition: vec3f, normal: v
 {
   let lightVector = normalize(lightPosition - position);
   let ndotl = max(dot(lightVector, normal), 0.0);
-  let intensity = (ndotl + 0.3) / 1.3;
+  let intensity = (ndotl + 0.2) / 1.2;
 
   let toEye = normalize(eyePosition - position);
 
@@ -90,7 +92,8 @@ fn lighting(position: vec3f, lightPosition: vec3f, eyePosition: vec3f, normal: v
 fn fragmentMain(input: VertexOutput) -> @location(0) vec4f
 {
   let intensity = lighting(input.positionWorld, input.lightPosition, input.eyePosition, normalize(input.normal));
-  let color = textureSample(colorTexture, linearSampler, input.texture);
+  let base = textureSample(baseTexture, linearSampler, input.texture);
+  let emission = textureSample(emissionTexture, linearSampler, input.texture);
 
-  return vec4(color.xyz * intensity, 1.0);
+  return vec4(base.xyz * intensity + emission.xyz, 1.0);
 }

index2.js

@@ -36,7 +36,7 @@ function printMatrix(m, o)
 }
 
 class GltfRenderer {
-  constructor(device, canvasFormat, viewUniformBuffer, shaderModule, gltf, texture)
+  constructor(device, canvasFormat, viewUniformBuffer, shaderModule, gltf, textures)
   {
     this.gltf = gltf;
 
@@ -45,7 +45,7 @@ class GltfRenderer {
     //////////////////////////////////////////////////////////////////////
 
     this.sampler = device.createSampler();
-    this.texture = texture;
+    this.textures = textures;
 
     //////////////////////////////////////////////////////////////////////
     // buffer
@@ -85,8 +85,16 @@ class GltfRenderer {
           binding: 2,
           visibility: GPUShaderStage.FRAGMENT,
           sampler: {}
+        }]
+      }),
+      device.createBindGroupLayout({
+        label: "gltf bind group layout 1",
+        entries: [{
+          binding: 0,
+          visibility: GPUShaderStage.FRAGMENT,
+          texture: {},
         }, {
-          binding: 3,
+          binding: 1,
           visibility: GPUShaderStage.FRAGMENT,
           texture: {},
         }]
@@ -161,7 +169,7 @@ class GltfRenderer {
 
     this.bindGroups = [
       device.createBindGroup({
-        label: "cell bind group 0",
+        label: "gltf bind group 0",
         layout: bindGroupLayouts[0],
         entries: [{
           binding: 0,
@@ -172,15 +180,29 @@ class GltfRenderer {
         }, {
           binding: 2,
           resource: this.sampler,
-        }, {
-          binding: 3,
-          resource: this.texture,
         }]
       }),
     ];
+
+    this.materialBindGroups = [];
+    for (let i = 0; i < this.gltf.json.materials.length; i++) {
+      const material = this.gltf.json.materials[i];
+      const bindGroup = device.createBindGroup({
+        label: `gltf bind group material ${i}`,
+        layout: bindGroupLayouts[1],
+        entries: [{
+          binding: 0,
+          resource: this.textures[material.pbrMetallicRoughness.baseColorTexture.index],
+        }, {
+          binding: 1,
+          resource: this.textures[material.emissiveTexture.index],
+        }]
+      });
+      this.materialBindGroups.push(bindGroup);
+    }
   }
 
-  renderPrimitive(renderPass, accessors, indices, nodeIndex)
+  renderPrimitive(renderPass, accessors, primitive, nodeIndex)
   {
     for (let i = 0; i < accessors.length; i++) {
       const accessor = accessors[i];
@@ -190,7 +212,7 @@ class GltfRenderer {
       renderPass.setVertexBuffer(i, this.buffers[bufferView.buffer], bufferView.byteOffset, bufferView.byteLength);
     }
 
-    const indicesAccessor = this.gltf.json.accessors[indices];
+    const indicesAccessor = this.gltf.json.accessors[primitive.indices];
     const indicesBufferView = this.gltf.json.bufferViews[indicesAccessor.bufferView];
     renderPass.setIndexBuffer(this.buffers[indicesBufferView.buffer],
                               "uint16",
@@ -198,6 +220,7 @@ class GltfRenderer {
                               indicesBufferView.byteLength);
 
     renderPass.setBindGroup(0, this.bindGroups[0]);
+    renderPass.setBindGroup(1, this.materialBindGroups[primitive.material]);
     //console.log("drawIndexed", nodeIndex);
     renderPass.drawIndexed(indicesAccessor.count, 1, 0, 0, nodeIndex);
     //renderPass.drawIndexed(indicesAccessor.count);
@@ -215,7 +238,7 @@ class GltfRenderer {
           renderPass.setPipeline(this.renderPipelines[key]);
         lastKey = key;
         const primitive = mesh.primitives[j];
-        this.renderPrimitive(renderPass, accessors, primitive.indices, nodeIndex);
+        this.renderPrimitive(renderPass, accessors, primitive, nodeIndex);
       }
     }
 
@@ -325,7 +348,7 @@ async function loadGltf(device, canvasFormat, viewUniformBuffer, memory, module)
 
   const textures = await loadTextures(device, memory, module, gltf);
 
-  const renderer = new GltfRenderer(device, canvasFormat, viewUniformBuffer, shaderModule, gltf, textures[2]);
+  const renderer = new GltfRenderer(device, canvasFormat, viewUniformBuffer, shaderModule, gltf, textures);
   console.log(renderer.nodeBuffer);
   device.queue.writeBuffer(renderer.nodeBuffer, 0,
                            memory.buffer, nodesHandle, (4 * 4 * 4) * gltf.json.nodes.length);

light.wgsl

@@ -33,5 +33,5 @@ fn vertexMain(input: VertexInput) -> VertexOutput
 @fragment
 fn fragmentMain(input: VertexOutput) -> @location(0) vec4f
 {
-  return vec4(1, 0, 0, 1.0);
+  return vec4(1, 1, 1, 1.0);
 }