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

Adding named debug groups to the WebGPU passes, and switching the pipeline create calls to the async methods

Browse Source
This commit is contained in:
Rezmason
2022-09-11 15:03:51 -07:00
parent c4fe2c53e4
commit ec831ce6f1
10 changed files with 79 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
js/webgpu/bloomPass.js
View File

@@ -44,7 +44,7 @@ export default ({ config, device }) => {
// If there's no bloom to apply, return a no-op pass with an empty bloom texture
if (!enabled) {
const emptyTexture = makeComputeTarget(device, [1, 1]);
return makePass(null, (size, inputs) => ({ ...inputs, bloom: emptyTexture }));
return makePass("No Bloom", null, (size, inputs) => ({ ...inputs, bloom: emptyTexture }));
}
const assets = [loadShader(device, "shaders/wgsl/bloomBlur.wgsl"), loadShader(device, "shaders/wgsl/bloomCombine.wgsl")];
@@ -74,21 +74,23 @@ export default ({ config, device }) => {
const loaded = (async () => {
const [blurShader, combineShader] = await Promise.all(assets);
blurPipeline = device.createComputePipeline({
layout: "auto",
compute: {
module: blurShader.module,
entryPoint: "computeMain",
},
});
[blurPipeline, combinePipeline] = await Promise.all([
device.createComputePipeline({
layout: "auto",
compute: {
module: blurShader.module,
entryPoint: "computeMain",
},
}),
combinePipeline = device.createComputePipeline({
layout: "auto",
compute: {
module: combineShader.module,
entryPoint: "computeMain",
},
});
device.createComputePipeline({
layout: "auto",
compute: {
module: combineShader.module,
entryPoint: "computeMain",
},
}),
]);
const blurUniforms = structs.from(blurShader.code).Config;
hBlurBuffer = makeUniformBuffer(device, blurUniforms, { bloomRadius, direction: [1, 0] });
@@ -152,5 +154,5 @@ export default ({ config, device }) => {
computePass.end();
};
return makePass(loaded, build, run);
return makePass("Bloom", loaded, build, run);
};

4
js/webgpu/endPass.js
View File

@@ -26,7 +26,7 @@ export default ({ device, canvasFormat, canvasContext }) => {
const loaded = (async () => {
const [imageShader] = await Promise.all(assets);
renderPipeline = device.createRenderPipeline({
renderPipeline = await device.createRenderPipelineAsync({
layout: "auto",
vertex: {
module: imageShader.module,
@@ -58,5 +58,5 @@ export default ({ device, canvasFormat, canvasContext }) => {
renderPass.end();
};
return makePass(loaded, build, run);
return makePass("End", loaded, build, run);
};

4
js/webgpu/imagePass.js
View File

@@ -26,7 +26,7 @@ export default ({ config, device }) => {
backgroundTex = bgTex;
computePipeline = device.createComputePipeline({
computePipeline = await device.createComputePipelineAsync({
layout: "auto",
compute: {
module: imageShader.module,
@@ -61,5 +61,5 @@ export default ({ config, device }) => {
computePass.end();
};
return makePass(loaded, build, run);
return makePass("Image", loaded, build, run);
};

12
js/webgpu/mirrorPass.js
View File

@@ -18,14 +18,6 @@ window.onclick = (e) => {
touchesChanged = true;
};
/*
uniforms: {
touches: () => touches,
aspectRatio: () => aspectRatio,
cameraAspectRatio,
}
*/
export default ({ config, device, cameraTex, cameraAspectRatio, timeBuffer }) => {
const assets = [loadShader(device, "shaders/wgsl/mirrorPass.wgsl")];
@@ -47,7 +39,7 @@ export default ({ config, device, cameraTex, cameraAspectRatio, timeBuffer }) =>
const loaded = (async () => {
const [mirrorShader] = await Promise.all(assets);
computePipeline = device.createComputePipeline({
computePipeline = await device.createComputePipelineAsync({
layout: "auto",
compute: {
module: mirrorShader.module,
@@ -105,5 +97,5 @@ export default ({ config, device, cameraTex, cameraAspectRatio, timeBuffer }) =>
start = Date.now();
return makePass(loaded, build, run);
return makePass("Mirror", loaded, build, run);
};

4
js/webgpu/palettePass.js
View File

@@ -93,7 +93,7 @@ export default ({ config, device, timeBuffer }) => {
const loaded = (async () => {
const [paletteShader] = await Promise.all(assets);
computePipeline = device.createComputePipeline({
computePipeline = await device.createComputePipelineAsync({
layout: "auto",
compute: {
module: paletteShader.module,
@@ -137,5 +137,5 @@ export default ({ config, device, timeBuffer }) => {
computePass.end();
};
return makePass(loaded, build, run);
return makePass("Palette", loaded, build, run);
};

70
js/webgpu/rainPass.js
View File

@@ -104,47 +104,49 @@ export default ({ config, device, timeBuffer }) => {
sceneUniforms = rainShaderUniforms.Scene;
sceneBuffer = makeUniformBuffer(device, sceneUniforms);
computePipeline = device.createComputePipeline({
layout: "auto",
compute: {
module: rainShader.module,
entryPoint: "computeMain",
},
});
const additiveBlendComponent = {
operation: "add",
srcFactor: "one",
dstFactor: "one",
};
renderPipeline = device.createRenderPipeline({
layout: "auto",
vertex: {
module: rainShader.module,
entryPoint: "vertMain",
},
fragment: {
module: rainShader.module,
entryPoint: "fragMain",
targets: [
{
format: renderFormat,
blend: {
color: additiveBlendComponent,
alpha: additiveBlendComponent,
[computePipeline, renderPipeline] = await Promise.all([
device.createComputePipelineAsync({
layout: "auto",
compute: {
module: rainShader.module,
entryPoint: "computeMain",
},
}),
device.createRenderPipelineAsync({
layout: "auto",
vertex: {
module: rainShader.module,
entryPoint: "vertMain",
},
fragment: {
module: rainShader.module,
entryPoint: "fragMain",
targets: [
{
format: renderFormat,
blend: {
color: additiveBlendComponent,
alpha: additiveBlendComponent,
},
},
},
{
format: renderFormat,
blend: {
color: additiveBlendComponent,
alpha: additiveBlendComponent,
{
format: renderFormat,
blend: {
color: additiveBlendComponent,
alpha: additiveBlendComponent,
},
},
},
],
},
});
],
},
}),
]);
computeBindGroup = makeBindGroup(device, computePipeline, 0, [configBuffer, timeBuffer, cellsBuffer]);
renderBindGroup = makeBindGroup(device, renderPipeline, 0, [configBuffer, timeBuffer, sceneBuffer, linearSampler, msdfTexture.createView(), cellsBuffer]);
@@ -196,5 +198,5 @@ export default ({ config, device, timeBuffer }) => {
renderPass.end();
};
return makePass(loaded, build, run);
return makePass("Rain", loaded, build, run);
};

5
js/webgpu/stripePass.js
View File

@@ -65,7 +65,8 @@ export default ({ config, device, timeBuffer }) => {
const loaded = (async () => {
const [stripeShader] = await Promise.all(assets);
computePipeline = device.createComputePipeline({
computePipeline = await device.createComputePipelineAsync({
layout: "auto",
compute: {
module: stripeShader.module,
entryPoint: "computeMain",
@@ -110,5 +111,5 @@ export default ({ config, device, timeBuffer }) => {
computePass.end();
};
return makePass(loaded, build, run);
return makePass("Stripe", loaded, build, run);
};

10
js/webgpu/utils.js
View File

@@ -1,4 +1,6 @@
/*
// TODO: switch back to this impl once it doesn't break on FF Nightly
const loadTexture = async (device, url) => {
const response = await fetch(url);
const data = await response.blob();
@@ -105,10 +107,14 @@ const makeBindGroup = (device, pipeline, index, entries) =>
})),
});
const makePass = (loaded, build, run) => ({
const makePass = (name, loaded, build, run) => ({
loaded: loaded ?? Promise.resolve(),
build: build ?? ((size, inputs) => inputs),
run: run ?? (() => {}),
run: (encoder) => {
encoder.pushDebugGroup(`Pass "${name}"`);
run?.(encoder);
encoder.popDebugGroup();
},
});
const makePipeline = async (context, steps) => {