eric/matrix
1
0
Fork 0
mirror of https://github.com/Rezmason/matrix.git synced 2026-04-21 07:19:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Consolidating all the bind groups, because I only have four. Stuff shared between render passes will get isolated somehow, but it might be by binding one buffer to multiple render passes' bind group at zero rather than having more than one bind group.

Browse Source
This commit is contained in:
Rezmason
2021-10-27 21:08:20 -07:00
parent a0649bdb34
commit c27c20f2cf
3 changed files with 17 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
js/webgpu_main.js
View File

@@ -105,7 +105,7 @@ export default async (canvas, config) => {
const aspectRatio = canvasSize[0] / canvasSize[1]; const aspectRatio = canvasSize[0] / canvasSize[1];
const screenSize = aspectRatio > 1 ? [1, aspectRatio] : [1 / aspectRatio, 1]; const screenSize = aspectRatio > 1 ? [1, aspectRatio] : [1 / aspectRatio, 1];
queue.writeBuffer(cameraBuffer, 0, new Float32Array(screenSize)); queue.writeBuffer(cameraBuffer, 0, new Float32Array(screenSize));
} };
updateCameraBuffer(); updateCameraBuffer();
const [rainRenderShader] = await Promise.all(["shaders/rainRenderPass.wgsl"].map(async (path) => (await fetch(path)).text())); const [rainRenderShader] = await Promise.all(["shaders/rainRenderPass.wgsl"].map(async (path) => (await fetch(path)).text()));
@@ -145,7 +145,9 @@ export default async (canvas, config) => {
}, },
}); });
const configBindGroup = device.createBindGroup({ console.log(device.limits);
const bindGroup = device.createBindGroup({
layout: rainRenderPipeline.getBindGroupLayout(0), layout: rainRenderPipeline.getBindGroupLayout(0),
entries: [ entries: [
{ {
@@ -154,46 +156,28 @@ export default async (canvas, config) => {
buffer: configBuffer, buffer: configBuffer,
}, },
}, },
],
});
const msdfBindGroup = device.createBindGroup({
layout: rainRenderPipeline.getBindGroupLayout(1),
entries: [
{ {
binding: 0, binding: 1,
resource: { resource: {
buffer: msdfBuffer, buffer: msdfBuffer,
}, },
}, },
{ {
binding: 1, binding: 2,
resource: sampler, resource: sampler,
}, },
{ {
binding: 2, binding: 3,
resource: msdfTexture.createView(), resource: msdfTexture.createView(),
}, },
],
});
const timeBindGroup = device.createBindGroup({
layout: rainRenderPipeline.getBindGroupLayout(2),
entries: [
{ {
binding: 0, binding: 4,
resource: { resource: {
buffer: timeBuffer, buffer: timeBuffer,
}, },
}, },
],
});
const cameraBindGroup = device.createBindGroup({
layout: rainRenderPipeline.getBindGroupLayout(3),
entries: [
{ {
binding: 0, binding: 5,
resource: { resource: {
buffer: cameraBuffer, buffer: cameraBuffer,
}, },
@@ -201,16 +185,12 @@ export default async (canvas, config) => {
], ],
}); });
const rainRenderPipelineBindGroups = [configBindGroup, msdfBindGroup, timeBindGroup, cameraBindGroup];
const bundleEncoder = device.createRenderBundleEncoder({ const bundleEncoder = device.createRenderBundleEncoder({
colorFormats: [presentationFormat], colorFormats: [presentationFormat],
}); });
bundleEncoder.setPipeline(rainRenderPipeline); bundleEncoder.setPipeline(rainRenderPipeline);
rainRenderPipelineBindGroups.forEach((bindGroup, index) => { bundleEncoder.setBindGroup(0, bindGroup);
bundleEncoder.setBindGroup(index, bindGroup);
});
const numQuads = numColumns * numRows; const numQuads = numColumns * numRows;
bundleEncoder.draw(NUM_VERTICES_PER_QUAD * numQuads, 1, 0, 0); bundleEncoder.draw(NUM_VERTICES_PER_QUAD * numQuads, 1, 0, 0);
const renderBundles = [bundleEncoder.finish()]; const renderBundles = [bundleEncoder.finish()];

10
shaders/rainRenderPass.wgsl
View File

@@ -11,20 +11,20 @@ let TWO_PI:f32 = 6.28318530718; // No, I'm not using Tau.
[[block]] struct MSDFUniforms { [[block]] struct MSDFUniforms {
numColumns: i32; numColumns: i32;
}; };
[[group(1), binding(0)]] var<uniform> msdfUniforms:MSDFUniforms; [[group(0), binding(1)]] var<uniform> msdfUniforms:MSDFUniforms;
[[group(1), binding(1)]] var msdfSampler: sampler; [[group(0), binding(2)]] var msdfSampler: sampler;
[[group(1), binding(2)]] var msdfTexture: texture_2d<f32>; [[group(0), binding(3)]] var msdfTexture: texture_2d<f32>;
[[block]] struct TimeUniforms { [[block]] struct TimeUniforms {
now: i32; now: i32;
frame: i32; frame: i32;
}; };
[[group(2), binding(0)]] var<uniform> timeUniforms:TimeUniforms; [[group(0), binding(4)]] var<uniform> timeUniforms:TimeUniforms;
[[block]] struct CameraUniforms { [[block]] struct CameraUniforms {
screenSize: vec2<f32>; screenSize: vec2<f32>;
}; };
[[group(3), binding(0)]] var<uniform> cameraUniforms:CameraUniforms; [[group(0), binding(5)]] var<uniform> cameraUniforms:CameraUniforms;
// Vertex shader // Vertex shader

2
webgpu_notes.txt
View File

@@ -40,3 +40,5 @@ Textures were never resizable, you simply forgot
Bind groups let you bind a bunch of resources at once Bind groups let you bind a bunch of resources at once
Render bundles let you reissue commands Render bundles let you reissue commands
You can only use up to FOUR bind groups on your laptop's device!