From bbe3d62331ee58b11316fe6f77e986b5af63379d Mon Sep 17 00:00:00 2001 From: Rezmason Date: Mon, 8 Nov 2021 08:05:56 -0800 Subject: [PATCH] Wrote another utility method for cramming an array of resources into a bind group. --- js/webgpu/imagePass.js | 13 ++----------- js/webgpu/palettePass.js | 19 +++++++++---------- js/webgpu/rainPass.js | 23 +++-------------------- js/webgpu/resurrectionPass.js | 10 +--------- js/webgpu/stripePass.js | 19 +++++++++---------- js/webgpu/utils.js | 13 ++++++++++++- 6 files changed, 36 insertions(+), 61 deletions(-) diff --git a/js/webgpu/imagePass.js b/js/webgpu/imagePass.js index 56ffbd7..3cbd147 100644 --- a/js/webgpu/imagePass.js +++ b/js/webgpu/imagePass.js @@ -1,5 +1,5 @@ import uniforms from "/lib/gpu-uniforms.js"; -import { loadTexture, loadShader, makeUniformBuffer, makePassFBO, makePass } from "./utils.js"; +import { loadTexture, loadShader, makeUniformBuffer, makeBindGroup, makePassFBO, makePass } from "./utils.js"; // Multiplies the rendered rain and bloom by a loaded in image @@ -68,16 +68,7 @@ export default (context, getInputs) => { const inputs = getInputs(); const tex = inputs.primary; const bloomTex = inputs.primary; // TODO: bloom - const renderBindGroup = device.createBindGroup({ - layout: renderPipeline.getBindGroupLayout(0), - entries: [linearSampler, tex.createView(), bloomTex.createView(), backgroundTex.createView()] - .map((resource) => (resource instanceof GPUBuffer ? { buffer: resource } : resource)) - .map((resource, binding) => ({ - binding, - resource, - })), - }); - + const renderBindGroup = makeBindGroup(device, renderPipeline, 0, [linearSampler, tex.createView(), bloomTex.createView(), backgroundTex.createView()]); renderPassConfig.colorAttachments[0].view = output.createView(); const renderPass = encoder.beginRenderPass(renderPassConfig); renderPass.setPipeline(renderPipeline); diff --git a/js/webgpu/palettePass.js b/js/webgpu/palettePass.js index 96d923c..5c8d494 100644 --- a/js/webgpu/palettePass.js +++ b/js/webgpu/palettePass.js @@ -1,5 +1,5 @@ import uniforms from "/lib/gpu-uniforms.js"; -import { loadShader, makeUniformBuffer, makePassFBO, makePass } from "./utils.js"; +import { loadShader, makeUniformBuffer, makeBindGroup, makePassFBO, makePass } from "./utils.js"; // Maps the brightness of the rendered rain and bloom to colors // in a linear gradient buffer generated from the passed-in color sequence @@ -144,15 +144,14 @@ export default (context, getInputs) => { const inputs = getInputs(); const tex = inputs.primary; const bloomTex = inputs.primary; // TODO: bloom - const renderBindGroup = device.createBindGroup({ - layout: renderPipeline.getBindGroupLayout(0), - entries: [configBuffer, paletteBuffer, timeBuffer, linearSampler, tex.createView(), bloomTex.createView()] - .map((resource) => (resource instanceof GPUBuffer ? { buffer: resource } : resource)) - .map((resource, binding) => ({ - binding, - resource, - })), - }); + const renderBindGroup = makeBindGroup(device, renderPipeline, 0, [ + configBuffer, + paletteBuffer, + timeBuffer, + linearSampler, + tex.createView(), + bloomTex.createView(), + ]); renderPassConfig.colorAttachments[0].view = output.createView(); const renderPass = encoder.beginRenderPass(renderPassConfig); diff --git a/js/webgpu/rainPass.js b/js/webgpu/rainPass.js index 9121537..20f4d64 100644 --- a/js/webgpu/rainPass.js +++ b/js/webgpu/rainPass.js @@ -1,5 +1,5 @@ import uniforms from "/lib/gpu-uniforms.js"; -import { makePassFBO, loadTexture, loadShader, makeUniformBuffer, makePass } from "./utils.js"; +import { makePassFBO, loadTexture, loadShader, makeUniformBuffer, makeBindGroup, makePass } from "./utils.js"; const { mat4, vec3 } = glMatrix; @@ -123,25 +123,8 @@ export default (context, getInputs) => { }, }); - computeBindGroup = device.createBindGroup({ - layout: computePipeline.getBindGroupLayout(0), - entries: [configBuffer, timeBuffer, cellsBuffer] - .map((resource) => (resource instanceof GPUBuffer ? { buffer: resource } : resource)) - .map((resource, binding) => ({ - binding, - resource, - })), - }); - - renderBindGroup = device.createBindGroup({ - layout: renderPipeline.getBindGroupLayout(0), - entries: [configBuffer, timeBuffer, sceneBuffer, linearSampler, msdfTexture.createView(), cellsBuffer] - .map((resource) => (resource instanceof GPUBuffer ? { buffer: resource } : resource)) - .map((resource, binding) => ({ - binding, - resource, - })), - }); + computeBindGroup = makeBindGroup(device, computePipeline, 0, [configBuffer, timeBuffer, cellsBuffer]); + renderBindGroup = makeBindGroup(device, renderPipeline, 0, [configBuffer, timeBuffer, sceneBuffer, linearSampler, msdfTexture.createView(), cellsBuffer]); })(); const setSize = (width, height) => { diff --git a/js/webgpu/resurrectionPass.js b/js/webgpu/resurrectionPass.js index f4b8eb7..ab56da4 100644 --- a/js/webgpu/resurrectionPass.js +++ b/js/webgpu/resurrectionPass.js @@ -73,15 +73,7 @@ export default (context, getInputs) => { const inputs = getInputs(); const tex = inputs.primary; const bloomTex = inputs.primary; // TODO: bloom - const renderBindGroup = device.createBindGroup({ - layout: renderPipeline.getBindGroupLayout(0), - entries: [configBuffer, timeBuffer, linearSampler, tex.createView(), bloomTex.createView()] - .map((resource) => (resource instanceof GPUBuffer ? { buffer: resource } : resource)) - .map((resource, binding) => ({ - binding, - resource, - })), - }); + const renderBindGroup = makeBindGroup(device, renderPipeline, 0, [configBuffer, timeBuffer, linearSampler, tex.createView(), bloomTex.createView()]); renderPassConfig.colorAttachments[0].view = output.createView(); const renderPass = encoder.beginRenderPass(renderPassConfig); diff --git a/js/webgpu/stripePass.js b/js/webgpu/stripePass.js index 3320545..2009da2 100644 --- a/js/webgpu/stripePass.js +++ b/js/webgpu/stripePass.js @@ -1,5 +1,5 @@ import uniforms from "/lib/gpu-uniforms.js"; -import { loadShader, make1DTexture, makeUniformBuffer, makePassFBO, makePass } from "./utils.js"; +import { loadShader, make1DTexture, makeUniformBuffer, makeBindGroup, makePassFBO, makePass } from "./utils.js"; // Multiplies the rendered rain and bloom by a 1D gradient texture // generated from the passed-in color sequence @@ -108,15 +108,14 @@ export default (context, getInputs) => { const inputs = getInputs(); const tex = inputs.primary; const bloomTex = inputs.primary; // TODO: bloom - const renderBindGroup = device.createBindGroup({ - layout: renderPipeline.getBindGroupLayout(0), - entries: [configBuffer, timeBuffer, linearSampler, tex.createView(), bloomTex.createView(), stripeTexture.createView()] - .map((resource) => (resource instanceof GPUBuffer ? { buffer: resource } : resource)) - .map((resource, binding) => ({ - binding, - resource, - })), - }); + const renderBindGroup = makeBindGroup(device, renderPipeline, 0, [ + configBuffer, + timeBuffer, + linearSampler, + tex.createView(), + bloomTex.createView(), + stripeTexture.createView(), + ]); renderPassConfig.colorAttachments[0].view = output.createView(); const renderPass = encoder.beginRenderPass(renderPassConfig); diff --git a/js/webgpu/utils.js b/js/webgpu/utils.js index a180f65..0d6a398 100644 --- a/js/webgpu/utils.js +++ b/js/webgpu/utils.js @@ -69,6 +69,17 @@ const make1DTexture = (device, rgbas) => { return texture; }; +const makeBindGroup = (device, pipeline, index, entries) => + device.createBindGroup({ + layout: pipeline.getBindGroupLayout(index), + entries: entries + .map((resource) => (resource instanceof GPUBuffer ? { buffer: resource } : resource)) + .map((resource, binding) => ({ + binding, + resource, + })), + }); + const makePass = (ready, setSize, getOutputs, execute) => ({ ready: ready ?? Promise.resolve(), setSize: setSize ?? (() => {}), @@ -79,4 +90,4 @@ const makePass = (ready, setSize, getOutputs, execute) => ({ const makePipeline = (context, steps) => steps.filter((f) => f != null).reduce((pipeline, f, i) => [...pipeline, f(context, i == 0 ? null : pipeline[i - 1].getOutputs)], []); -export { getCanvasSize, makePassFBO, make1DTexture, loadTexture, loadShader, makeUniformBuffer, makePass, makePipeline }; +export { getCanvasSize, makePassFBO, make1DTexture, loadTexture, loadShader, makeUniformBuffer, makePass, makePipeline, makeBindGroup };