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

The webgpu project's multi-pass pipeline is borrowed from the regl project, but the outputs don't exist yet. Outputs will be tricky, because RTTs are thrown out and recreated when the canvas resizes, which I think means all the bind groups referencing the old texture have to be destroyed and recreated, too.

Browse Source
This commit is contained in:
Rezmason
2021-11-03 21:42:01 -07:00
parent 0b04947425
commit f0ae7731bb
3 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
js/webgpu/main.js
View File

@@ -1,5 +1,5 @@
import std140 from "./std140.js"; import std140 from "./std140.js";
import { getCanvasSize, makeUniformBuffer } from "./utils.js"; import { getCanvasSize, makeUniformBuffer, makePipeline } from "./utils.js";
import makeRain from "./rainPass.js"; import makeRain from "./rainPass.js";
export default async (canvas, config) => { export default async (canvas, config) => {
@@ -27,9 +27,9 @@ export default async (canvas, config) => {
timeBuffer, timeBuffer,
}; };
const passes = [makeRain(context)]; const pipeline = makePipeline([makeRain /*makeBloomPass, effects[effectName]*/], (p) => p.outputs, context);
await Promise.all(passes.map((pass) => pass.ready)); await Promise.all(pipeline.map((step) => step.ready));
let frame = 0; let frame = 0;
@@ -38,14 +38,14 @@ export default async (canvas, config) => {
if (canvasSize[0] !== canvasConfig.size[0] || canvasSize[1] !== canvasConfig.size[1]) { if (canvasSize[0] !== canvasConfig.size[0] || canvasSize[1] !== canvasConfig.size[1]) {
canvasConfig.size = canvasSize; canvasConfig.size = canvasSize;
canvasContext.configure(canvasConfig); canvasContext.configure(canvasConfig);
passes.forEach((pass) => pass.setSize(...canvasSize)); pipeline.forEach((step) => step.setSize(...canvasSize));
} }
device.queue.writeBuffer(timeBuffer, 0, timeLayout.build([now / 1000, frame])); device.queue.writeBuffer(timeBuffer, 0, timeLayout.build([now / 1000, frame]));
frame++; frame++;
const encoder = device.createCommandEncoder(); const encoder = device.createCommandEncoder();
passes.forEach((pass) => pass.execute(encoder)); pipeline.forEach((step) => step.execute(encoder));
device.queue.submit([encoder.finish()]); device.queue.submit([encoder.finish()]);
requestAnimationFrame(renderLoop); requestAnimationFrame(renderLoop);
}; };

2
js/webgpu/rainPass.js
View File

@@ -15,7 +15,7 @@ const cycleStyles = {
const numVerticesPerQuad = 2 * 3; const numVerticesPerQuad = 2 * 3;
export default (context) => { export default (context, inputs) => {
const { config, adapter, device, canvasContext, timeBuffer } = context; const { config, adapter, device, canvasContext, timeBuffer } = context;
const assets = [loadTexture(device, config.glyphTexURL), loadShaderModule(device, "shaders/wgsl/rainPass.wgsl")]; const assets = [loadTexture(device, config.glyphTexURL), loadShaderModule(device, "shaders/wgsl/rainPass.wgsl")];

5
js/webgpu/utils.js
View File

@@ -61,4 +61,7 @@ const makePass = (outputs, ready, setSize, execute) => {
}; };
}; };
export { getCanvasSize, loadTexture, loadShaderModule, makeUniformBuffer, makePass }; const makePipeline = (steps, getInputs, context) =>
steps.filter((f) => f != null).reduce((pipeline, f, i) => [...pipeline, f(context, i == 0 ? null : getInputs(pipeline[i - 1]))], []);
export { getCanvasSize, loadTexture, loadShaderModule, makeUniformBuffer, makePass, makePipeline };