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 { 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);

19
js/webgpu/palettePass.js
View File

@@ -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);

23
js/webgpu/rainPass.js
View File

@@ -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) => {

10
js/webgpu/resurrectionPass.js
View File

@@ -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);

19
js/webgpu/stripePass.js
View File

@@ -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);

13
js/webgpu/utils.js
View File

@@ -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 };