mirror of
https://github.com/Rezmason/matrix.git
synced 2026-04-16 21:39:29 -07:00
My friend recommended a much simpler blur that doesn't build any image pyramids. Unfortunately my work towards an implementation isn't very promising— it doesn't pack the same wollop as the WebGL version— but I can built my pyramids on top of it.
This commit is contained in:
Rezmason
@@ -1,19 +1,13 @@
|
||||
import { structs } from "/lib/gpu-buffer.js";
|
||||
import { loadShader, makeUniformBuffer, makeBindGroup, makeComputeTarget, makePass } from "./utils.js";
|
||||
|
||||
// The bloom pass is basically an added blur of the high-pass rendered output.
|
||||
// The blur approximation is the sum of a pyramid of downscaled textures.
|
||||
|
||||
const pyramidHeight = 5;
|
||||
const levelStrengths = Array(pyramidHeight)
|
||||
.fill()
|
||||
.map((_, index) => Math.pow(index / (pyramidHeight * 2) + 0.5, 1 / 3).toPrecision(5))
|
||||
.reverse();
|
||||
import { makeComputeTarget, loadShader, makeUniformBuffer, makeBindGroup, makePass } from "./utils.js";
|
||||
|
||||
export default (context, getInputs) => {
|
||||
const { config, device } = context;
|
||||
|
||||
const enabled = false; // config.bloomSize > 0 && config.bloomStrength > 0;
|
||||
const bloomSize = config.bloomSize;
|
||||
const bloomStrength = config.newBloomStrength;
|
||||
|
||||
const enabled = bloomSize > 0 && bloomStrength > 0;
|
||||
|
||||
// If there's no bloom to apply, return a no-op pass with an empty bloom texture
|
||||
if (!enabled) {
|
||||
@@ -24,142 +18,57 @@ export default (context, getInputs) => {
|
||||
|
||||
const assets = [loadShader(device, "shaders/wgsl/blur1D.wgsl")];
|
||||
|
||||
// TODO: generate sum shader code
|
||||
const nearestSampler = device.createSampler({});
|
||||
|
||||
const computeTarget = makeComputeTarget(device, 1, 1);
|
||||
const getOutputs = () => ({ ...getInputs(), bloom: computeTarget }); // TODO
|
||||
let computePipeline;
|
||||
let configUniforms;
|
||||
let horizontalConfigBuffer;
|
||||
let verticalConfigBuffer;
|
||||
let intermediate;
|
||||
let output;
|
||||
let screenSize;
|
||||
|
||||
let blurPipeline;
|
||||
let sumPipeline;
|
||||
const getOutputs = () => ({
|
||||
primary: getInputs().primary,
|
||||
bloom: output,
|
||||
});
|
||||
|
||||
const ready = (async () => {
|
||||
const [blurShader] = await Promise.all(assets);
|
||||
// TODO: create sum shader
|
||||
// TODO: create config buffer
|
||||
|
||||
// TODO: create blur render pipeline
|
||||
// TODO: create sum render pipeline
|
||||
computePipeline = device.createComputePipeline({
|
||||
compute: {
|
||||
module: blurShader.module,
|
||||
entryPoint: "computeMain",
|
||||
},
|
||||
});
|
||||
|
||||
configUniforms = structs.from(blurShader.code).Config;
|
||||
})();
|
||||
|
||||
const setSize = (width, height) => {
|
||||
// TODO: destroy output
|
||||
// TODO: create output
|
||||
// TODO: destroy pyramid textures
|
||||
// TODO: create new pyramid textures
|
||||
// TODO: create new pyramid bindings
|
||||
// TODO: create new pyramid renderPassConfigs
|
||||
intermediate?.destroy();
|
||||
intermediate = makeComputeTarget(device, Math.floor(width * bloomSize), height);
|
||||
output?.destroy();
|
||||
output = makeComputeTarget(device, Math.floor(width * bloomSize), Math.floor(height * bloomSize));
|
||||
screenSize = [width, height];
|
||||
|
||||
horizontalConfigBuffer = makeUniformBuffer(device, configUniforms, { bloomStrength, direction: [0, bloomSize] });
|
||||
verticalConfigBuffer = makeUniformBuffer(device, configUniforms, { bloomStrength, direction: [1, 0] });
|
||||
};
|
||||
|
||||
const execute = (encoder) => {
|
||||
const inputs = getInputs();
|
||||
|
||||
// TODO: set pipeline to blur pipeline
|
||||
// TODO: bind config/source buffer group
|
||||
// TODO: for every level,
|
||||
// horizontally blur inputs.primary to horizontal blur output
|
||||
// vertically blur the horizontal blur output to vertical blur output
|
||||
|
||||
// TODO: set pipeline to the sum pipeline
|
||||
// TODO: set bind group (vertical blur outputs)
|
||||
// TODO: sum vertical blur into output
|
||||
const tex = inputs.primary;
|
||||
const intermediateView = intermediate.createView();
|
||||
const computePass = encoder.beginComputePass();
|
||||
computePass.setPipeline(computePipeline);
|
||||
computePass.setBindGroup(0, makeBindGroup(device, computePipeline, 0, [horizontalConfigBuffer, nearestSampler, tex.createView(), intermediateView]));
|
||||
computePass.dispatch(Math.ceil(Math.floor(screenSize[0] * bloomSize) / 32), screenSize[1], 1);
|
||||
computePass.setBindGroup(0, makeBindGroup(device, computePipeline, 0, [verticalConfigBuffer, nearestSampler, intermediateView, output.createView()]));
|
||||
computePass.dispatch(Math.ceil(Math.floor(screenSize[0] * bloomSize) / 32), Math.floor(screenSize[1] * bloomSize), 1);
|
||||
computePass.endPass();
|
||||
};
|
||||
|
||||
return makePass(getOutputs, ready, setSize, execute);
|
||||
};
|
||||
|
||||
/*
|
||||
|
||||
// A pyramid is just an array of Targets, where each Target is half the width
|
||||
// and half the height of the Target below it.
|
||||
const makePyramid = (regl, height, halfFloat) =>
|
||||
Array(height)
|
||||
.fill()
|
||||
.map((_) => makePassFBO(regl, halfFloat));
|
||||
|
||||
const resizePyramid = (pyramid, vw, vh, scale) =>
|
||||
pyramid.forEach((fbo, index) => fbo.resize(Math.floor((vw * scale) / 2 ** index), Math.floor((vh * scale) / 2 ** index)));
|
||||
|
||||
export default ({ regl, config }, inputs) => {
|
||||
|
||||
// Build three pyramids of Targets, one for each step in the process
|
||||
const highPassPyramid = makePyramid(regl, pyramidHeight, config.useHalfFloat);
|
||||
const hBlurPyramid = makePyramid(regl, pyramidHeight, config.useHalfFloat);
|
||||
const vBlurPyramid = makePyramid(regl, pyramidHeight, config.useHalfFloat);
|
||||
const output = makePassFBO(regl, config.useHalfFloat);
|
||||
|
||||
// The high pass restricts the blur to bright things in our input texture.
|
||||
const highPassFrag = loadText("shaders/glsl/highPass.frag.glsl");
|
||||
const highPass = regl({
|
||||
frag: regl.prop("frag"),
|
||||
uniforms: {
|
||||
highPassThreshold,
|
||||
tex: regl.prop("tex"),
|
||||
},
|
||||
framebuffer: regl.prop("fbo"),
|
||||
});
|
||||
|
||||
// A 2D gaussian blur is just a 1D blur done horizontally, then done vertically.
|
||||
// The Target pyramid's levels represent separate levels of detail;
|
||||
// by blurring them all, this basic blur approximates a more complex gaussian:
|
||||
// https://web.archive.org/web/20191124072602/https://software.intel.com/en-us/articles/compute-shader-hdr-and-bloom
|
||||
|
||||
const blurFrag = loadText("shaders/glsl/blur.frag.glsl");
|
||||
const blur = regl({
|
||||
frag: regl.prop("frag"),
|
||||
uniforms: {
|
||||
tex: regl.prop("tex"),
|
||||
direction: regl.prop("direction"),
|
||||
height: regl.context("viewportWidth"),
|
||||
width: regl.context("viewportHeight"),
|
||||
},
|
||||
framebuffer: regl.prop("fbo"),
|
||||
});
|
||||
|
||||
// The pyramid of textures gets flattened (summed) into a final blurry "bloom" texture
|
||||
const sumPyramid = regl({
|
||||
frag: `
|
||||
precision mediump float;
|
||||
varying vec2 vUV;
|
||||
${vBlurPyramid.map((_, index) => `uniform sampler2D pyr_${index};`).join("\n")}
|
||||
uniform float bloomStrength;
|
||||
void main() {
|
||||
vec4 total = vec4(0.);
|
||||
${vBlurPyramid.map((_, index) => `total += texture2D(pyr_${index}, vUV) * ${levelStrengths[index]};`).join("\n")}
|
||||
gl_FragColor = total * bloomStrength;
|
||||
}
|
||||
`,
|
||||
uniforms: {
|
||||
bloomStrength,
|
||||
...Object.fromEntries(vBlurPyramid.map((fbo, index) => [`pyr_${index}`, fbo])),
|
||||
},
|
||||
framebuffer: output,
|
||||
});
|
||||
|
||||
return makePass(
|
||||
{
|
||||
primary: inputs.primary,
|
||||
bloom: output,
|
||||
},
|
||||
Promise.all([highPassFrag.loaded, blurFrag.loaded]),
|
||||
(w, h) => {
|
||||
// The blur pyramids can be lower resolution than the screen.
|
||||
resizePyramid(highPassPyramid, w, h, bloomSize);
|
||||
resizePyramid(hBlurPyramid, w, h, bloomSize);
|
||||
resizePyramid(vBlurPyramid, w, h, bloomSize);
|
||||
output.resize(w, h);
|
||||
},
|
||||
() => {
|
||||
for (let i = 0; i < pyramidHeight; i++) {
|
||||
const highPassTarget = highPassPyramid[i];
|
||||
const hBlurTarget = hBlurPyramid[i];
|
||||
const vBlurTarget = vBlurPyramid[i];
|
||||
highPass({ fbo: highPassTarget, frag: highPassFrag.text(), tex: inputs.primary });
|
||||
blur({ fbo: hBlurTarget, frag: blurFrag.text(), tex: highPassTarget, direction: [1, 0] });
|
||||
blur({ fbo: vBlurTarget, frag: blurFrag.text(), tex: hBlurTarget, direction: [0, 1] });
|
||||
}
|
||||
|
||||
sumPyramid();
|
||||
}
|
||||
);
|
||||
};
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user