diff --git a/js/webgpu_main.js b/js/webgpu_main.js index 82be69c..f3875cd 100644 --- a/js/webgpu_main.js +++ b/js/webgpu_main.js @@ -143,13 +143,13 @@ export default async (canvas, config) => { configBuffer.unmap(); // prettier-ignore - const msdfStructLayout = computeStructLayout(["f32"]); + const msdfStructLayout = computeStructLayout(["i32", "i32"]); const msdfBuffer = device.createBuffer({ size: msdfStructLayout.size, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.FRAGMENT, // Which of these are necessary? mappedAtCreation: true, }); - new Int32Array(msdfBuffer.getMappedRange()).set(buildStruct(msdfStructLayout, [config.glyphTextureColumns])); + new Int32Array(msdfBuffer.getMappedRange()).set(buildStruct(msdfStructLayout, [config.glyphTextureColumns, config.glyphSequenceLength])); msdfBuffer.unmap(); // prettier-ignore @@ -160,9 +160,9 @@ export default async (canvas, config) => { }); // prettier-ignore - const cameraStructLayout = computeStructLayout(["vec2", "mat4x4", "mat4x4"]); - const cameraBuffer = device.createBuffer({ - size: cameraStructLayout.size, + const sceneStructLayout = computeStructLayout(["vec2", "mat4x4", "mat4x4"]); + const sceneBuffer = device.createBuffer({ + size: sceneStructLayout.size, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.VERTEX | GPUBufferUsage.COMPUTE | GPUBufferUsage.COPY_DST, // Which of these are necessary? }); @@ -178,7 +178,7 @@ export default async (canvas, config) => { const aspectRatio = canvasSize[0] / canvasSize[1]; mat4.perspectiveZO(camera, (Math.PI / 180) * 90, aspectRatio, 0.0001, 1000); const screenSize = aspectRatio > 1 ? [1, aspectRatio] : [1 / aspectRatio, 1]; - queue.writeBuffer(cameraBuffer, 0, new Float32Array(buildStruct(cameraStructLayout, [screenSize, camera, transform]))); + queue.writeBuffer(sceneBuffer, 0, new Float32Array(buildStruct(sceneStructLayout, [screenSize, camera, transform]))); }; updateCameraBuffer(); @@ -253,7 +253,7 @@ export default async (canvas, config) => { { binding: 5, resource: { - buffer: cameraBuffer, + buffer: sceneBuffer, }, }, ], diff --git a/shaders/rainRenderPass.wgsl b/shaders/rainRenderPass.wgsl index d745aea..8160012 100644 --- a/shaders/rainRenderPass.wgsl +++ b/shaders/rainRenderPass.wgsl @@ -1,32 +1,33 @@ let NUM_VERTICES_PER_QUAD:i32 = 6; let PI:f32 = 3.14159265359; -let TWO_PI:f32 = 6.28318530718; // No, I'm not using Tau. +let TWO_PI:f32 = 6.28318530718; -[[block]] struct Uniforms { +[[block]] struct Config { numColumns: i32; numRows: i32; }; -[[group(0), binding(0)]] var uniforms:Uniforms; +[[group(0), binding(0)]] var config:Config; -[[block]] struct MSDFUniforms { - numColumns: i32; +[[block]] struct MSDF { + glyphTextureColumns: i32; + glyphSequenceLength: i32; }; -[[group(0), binding(1)]] var msdfUniforms:MSDFUniforms; +[[group(0), binding(1)]] var msdf:MSDF; [[group(0), binding(2)]] var msdfSampler: sampler; [[group(0), binding(3)]] var msdfTexture: texture_2d; -[[block]] struct TimeUniforms { +[[block]] struct Time { now: i32; frame: i32; }; -[[group(0), binding(4)]] var timeUniforms:TimeUniforms; +[[group(0), binding(4)]] var time:Time; -[[block]] struct CameraUniforms { +[[block]] struct Scene { screenSize: vec2; camera: mat4x4; transform: mat4x4; }; -[[group(0), binding(5)]] var cameraUniforms:CameraUniforms; +[[group(0), binding(5)]] var scene:Scene; // Vertex shader @@ -45,20 +46,29 @@ struct VertexOutput { f32(((i + 1) % NUM_VERTICES_PER_QUAD / 3)) ); - var position = cornerPosition; - position = position + vec2( - f32(quadIndex % uniforms.numColumns), - f32(quadIndex / uniforms.numColumns) + var cellPosition = vec2( + quadIndex % config.numColumns, + quadIndex / config.numColumns ); + + var position = cornerPosition; + position = position + vec2(cellPosition); position = position / vec2( - f32(uniforms.numColumns), - f32(uniforms.numRows) + f32(config.numColumns), + f32(config.numRows) ); position = 1.0 - position * 2.0; - position = position * cameraUniforms.screenSize; + position = position * scene.screenSize; + + var depth:f32 = 0.0; + + var pos: vec4 = vec4(position, depth, 1.0); + + // pos.x = pos.x / glyphHeightToWidth; + // pos = scene.camera * scene.transform * pos; return VertexOutput( - vec4(position, 1.0, 1.0), + pos, cornerPosition ); } @@ -66,10 +76,10 @@ struct VertexOutput { // Fragment shader [[stage(fragment)]] fn fragMain([[location(0)]] UV:vec2) -> [[location(0)]] vec4 { - var msdf:vec4 = textureSample(msdfTexture, msdfSampler, UV / f32(msdfUniforms.numColumns)); - // msdf.b = msdf.b * (sin(f32(timeUniforms.now) / 1000.0 * TWO_PI) * 0.5 + 0.5); - msdf.b = msdf.b * f32(timeUniforms.frame / 60 % 2); - var now = timeUniforms.now; + var color:vec4 = textureSample(msdfTexture, msdfSampler, UV / f32(msdf.glyphTextureColumns)); + // color.b = color.b * (sin(f32(time.now) / 1000.0 * TWO_PI) * 0.5 + 0.5); + color.b = color.b * f32(time.frame / 60 % 2); + var now = time.now; - return msdf; + return color; }