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

Wrote another utility method for cramming an array of resources into a bind group.

Browse Source
This commit is contained in:
Rezmason
2021-11-08 08:05:56 -08:00
parent 1528ca39a5
commit bbe3d62331
6 changed files with 36 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
js/webgpu/imagePass.js
View File

@@ -1,5 +1,5 @@
import uniforms from "/lib/gpu-uniforms.js"; 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 // Multiplies the rendered rain and bloom by a loaded in image
@@ -68,16 +68,7 @@ export default (context, getInputs) => {
const inputs = getInputs(); const inputs = getInputs();
const tex = inputs.primary; const tex = inputs.primary;
const bloomTex = inputs.primary; // TODO: bloom const bloomTex = inputs.primary; // TODO: bloom
const renderBindGroup = device.createBindGroup({ const renderBindGroup = makeBindGroup(device, renderPipeline, 0, [linearSampler, tex.createView(), bloomTex.createView(), backgroundTex.createView()]);
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,
})),
});
renderPassConfig.colorAttachments[0].view = output.createView(); renderPassConfig.colorAttachments[0].view = output.createView();
const renderPass = encoder.beginRenderPass(renderPassConfig); const renderPass = encoder.beginRenderPass(renderPassConfig);
renderPass.setPipeline(renderPipeline); renderPass.setPipeline(renderPipeline);

19
js/webgpu/palettePass.js
View File

@@ -1,5 +1,5 @@
import uniforms from "/lib/gpu-uniforms.js"; 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 // Maps the brightness of the rendered rain and bloom to colors
// in a linear gradient buffer generated from the passed-in color sequence // in a linear gradient buffer generated from the passed-in color sequence
@@ -144,15 +144,14 @@ export default (context, getInputs) => {
const inputs = getInputs(); const inputs = getInputs();
const tex = inputs.primary; const tex = inputs.primary;
const bloomTex = inputs.primary; // TODO: bloom const bloomTex = inputs.primary; // TODO: bloom
const renderBindGroup = device.createBindGroup({ const renderBindGroup = makeBindGroup(device, renderPipeline, 0, [
layout: renderPipeline.getBindGroupLayout(0), configBuffer,
entries: [configBuffer, paletteBuffer, timeBuffer, linearSampler, tex.createView(), bloomTex.createView()] paletteBuffer,
.map((resource) => (resource instanceof GPUBuffer ? { buffer: resource } : resource)) timeBuffer,
.map((resource, binding) => ({ linearSampler,
binding, tex.createView(),
resource, bloomTex.createView(),
})), ]);
});
renderPassConfig.colorAttachments[0].view = output.createView(); renderPassConfig.colorAttachments[0].view = output.createView();
const renderPass = encoder.beginRenderPass(renderPassConfig); const renderPass = encoder.beginRenderPass(renderPassConfig);

23
js/webgpu/rainPass.js
View File

@@ -1,5 +1,5 @@
import uniforms from "/lib/gpu-uniforms.js"; 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; const { mat4, vec3 } = glMatrix;
@@ -123,25 +123,8 @@ export default (context, getInputs) => {
}, },
}); });
computeBindGroup = device.createBindGroup({ computeBindGroup = makeBindGroup(device, computePipeline, 0, [configBuffer, timeBuffer, cellsBuffer]);
layout: computePipeline.getBindGroupLayout(0), renderBindGroup = makeBindGroup(device, renderPipeline, 0, [configBuffer, timeBuffer, sceneBuffer, linearSampler, msdfTexture.createView(), cellsBuffer]);
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,
})),
});
})(); })();
const setSize = (width, height) => { const setSize = (width, height) => {

10
js/webgpu/resurrectionPass.js
View File

@@ -73,15 +73,7 @@ export default (context, getInputs) => {
const inputs = getInputs(); const inputs = getInputs();
const tex = inputs.primary; const tex = inputs.primary;
const bloomTex = inputs.primary; // TODO: bloom const bloomTex = inputs.primary; // TODO: bloom
const renderBindGroup = device.createBindGroup({ const renderBindGroup = makeBindGroup(device, renderPipeline, 0, [configBuffer, timeBuffer, linearSampler, tex.createView(), bloomTex.createView()]);
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,
})),
});
renderPassConfig.colorAttachments[0].view = output.createView(); renderPassConfig.colorAttachments[0].view = output.createView();
const renderPass = encoder.beginRenderPass(renderPassConfig); const renderPass = encoder.beginRenderPass(renderPassConfig);

19
js/webgpu/stripePass.js
View File

@@ -1,5 +1,5 @@
import uniforms from "/lib/gpu-uniforms.js"; 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 // Multiplies the rendered rain and bloom by a 1D gradient texture
// generated from the passed-in color sequence // generated from the passed-in color sequence
@@ -108,15 +108,14 @@ export default (context, getInputs) => {
const inputs = getInputs(); const inputs = getInputs();
const tex = inputs.primary; const tex = inputs.primary;
const bloomTex = inputs.primary; // TODO: bloom const bloomTex = inputs.primary; // TODO: bloom
const renderBindGroup = device.createBindGroup({ const renderBindGroup = makeBindGroup(device, renderPipeline, 0, [
layout: renderPipeline.getBindGroupLayout(0), configBuffer,
entries: [configBuffer, timeBuffer, linearSampler, tex.createView(), bloomTex.createView(), stripeTexture.createView()] timeBuffer,
.map((resource) => (resource instanceof GPUBuffer ? { buffer: resource } : resource)) linearSampler,
.map((resource, binding) => ({ tex.createView(),
binding, bloomTex.createView(),
resource, stripeTexture.createView(),
})), ]);
});
renderPassConfig.colorAttachments[0].view = output.createView(); renderPassConfig.colorAttachments[0].view = output.createView();
const renderPass = encoder.beginRenderPass(renderPassConfig); const renderPass = encoder.beginRenderPass(renderPassConfig);

13
js/webgpu/utils.js
View File

@@ -69,6 +69,17 @@ const make1DTexture = (device, rgbas) => {
return texture; 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) => ({ const makePass = (ready, setSize, getOutputs, execute) => ({
ready: ready ?? Promise.resolve(), ready: ready ?? Promise.resolve(),
setSize: setSize ?? (() => {}), setSize: setSize ?? (() => {}),
@@ -79,4 +90,4 @@ const makePass = (ready, setSize, getOutputs, execute) => ({
const makePipeline = (context, steps) => const makePipeline = (context, steps) =>
steps.filter((f) => f != null).reduce((pipeline, f, i) => [...pipeline, f(context, i == 0 ? null : pipeline[i - 1].getOutputs)], []); 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 };