diff --git a/js/webgpu/main.js b/js/webgpu/main.js index ff8210f..01fb342 100644 --- a/js/webgpu/main.js +++ b/js/webgpu/main.js @@ -1,5 +1,5 @@ import std140 from "./std140.js"; -import { getCanvasSize, makeUniformBuffer } from "./utils.js"; +import { getCanvasSize, makeUniformBuffer, makePipeline } from "./utils.js"; import makeRain from "./rainPass.js"; export default async (canvas, config) => { @@ -27,9 +27,9 @@ export default async (canvas, config) => { 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; @@ -38,14 +38,14 @@ export default async (canvas, config) => { if (canvasSize[0] !== canvasConfig.size[0] || canvasSize[1] !== canvasConfig.size[1]) { canvasConfig.size = canvasSize; 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])); frame++; const encoder = device.createCommandEncoder(); - passes.forEach((pass) => pass.execute(encoder)); + pipeline.forEach((step) => step.execute(encoder)); device.queue.submit([encoder.finish()]); requestAnimationFrame(renderLoop); }; diff --git a/js/webgpu/rainPass.js b/js/webgpu/rainPass.js index bea34be..e6c721b 100644 --- a/js/webgpu/rainPass.js +++ b/js/webgpu/rainPass.js @@ -15,7 +15,7 @@ const cycleStyles = { const numVerticesPerQuad = 2 * 3; -export default (context) => { +export default (context, inputs) => { const { config, adapter, device, canvasContext, timeBuffer } = context; const assets = [loadTexture(device, config.glyphTexURL), loadShaderModule(device, "shaders/wgsl/rainPass.wgsl")]; diff --git a/js/webgpu/utils.js b/js/webgpu/utils.js index c4d10d9..11fd30e 100644 --- a/js/webgpu/utils.js +++ b/js/webgpu/utils.js @@ -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 };