Moved the makePyramid and resizePyramid methods from the regl solution's util module to bloomPass.

Adding the canvas context's preferred format to the shared pass context (named "canvasFormat").
Added a placeholder bloomPass, which the existing passes now receive input from.
This commit is contained in:
Rezmason
2021-11-09 20:06:59 -08:00
parent f0f422e933
commit f4130013f4
9 changed files with 163 additions and 59 deletions

View File

@@ -1,4 +1,4 @@
import { loadText, makePassFBO, makePyramid, resizePyramid, makePass } from "./utils.js";
import { loadText, makePassFBO, makePass } from "./utils.js";
// The bloom pass is basically an added high-pass blur.
// The blur approximation is the sum of a pyramid of downscaled textures.
@@ -9,6 +9,16 @@ const levelStrengths = Array(pyramidHeight)
.map((_, index) => Math.pow(index / (pyramidHeight * 2) + 0.5, 1 / 3).toPrecision(5))
.reverse();
// A pyramid is just an array of FBOs, where each FBO is half the width
// and half the height of the FBO 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) => {
const { bloomStrength, bloomSize, highPassThreshold } = config;
const enabled = bloomSize > 0 && bloomStrength > 0;