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(); export default (context, getInputs) => { const { config, device } = context; const enabled = false; // config.bloomSize > 0 && config.bloomStrength > 0; // If there's no bloom to apply, return a no-op pass with an empty bloom texture if (!enabled) { const emptyTexture = makeComputeTarget(device, 1, 1); const getOutputs = () => ({ ...getInputs(), bloom: emptyTexture }); return makePass(getOutputs); } const assets = [loadShader(device, "shaders/wgsl/blur1D.wgsl")]; // TODO: generate sum shader code const computeTarget = makeComputeTarget(device, 1, 1); const getOutputs = () => ({ ...getInputs(), bloom: computeTarget }); // TODO let blurPipeline; let sumPipeline; 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 })(); 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 }; 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 }; 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(); } ); }; */