From e41016892304fabe6f870babeed9cc75324622d0 Mon Sep 17 00:00:00 2001 From: Zack Buhman Date: Sun, 26 Jul 2026 20:51:02 -0500 Subject: [PATCH] gltf emission texture --- gltf.js | 1 - gltf.wgsl | 11 +++++++---- index2.js | 45 ++++++++++++++++++++++++++++++++++----------- light.wgsl | 2 +- 4 files changed, 42 insertions(+), 17 deletions(-) diff --git a/gltf.js b/gltf.js index d852bde..794e08a 100644 --- a/gltf.js +++ b/gltf.js @@ -27,7 +27,6 @@ function transformMatrix() function buildTransfomMatrices(json) { - } function parseGltfChunks(buffer) diff --git a/gltf.wgsl b/gltf.wgsl index 4738cd1..b6375c9 100644 --- a/gltf.wgsl +++ b/gltf.wgsl @@ -8,7 +8,9 @@ struct Configuration { @group(0) @binding(0) var config: Configuration; @group(0) @binding(1) var nodeMatrix: array; @group(0) @binding(2) var linearSampler: sampler; -@group(0) @binding(3) var colorTexture: texture_2d; + +@group(1) @binding(0) var baseTexture: texture_2d; +@group(1) @binding(1) var emissionTexture: texture_2d; /* 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); } diff --git a/index2.js b/index2.js index 7da1713..f6916c3 100644 --- a/index2.js +++ b/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); diff --git a/light.wgsl b/light.wgsl index 2b32cca..667c3cd 100644 --- a/light.wgsl +++ b/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); }