eric/matrix
1
0
Fork 0
mirror of https://github.com/Rezmason/matrix.git synced 2026-04-18 06:09:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

12
js/regl/bloomPass.js
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;

24
js/regl/utils.js
View File

@@ -10,13 +10,6 @@ const makePassTexture = (regl, halfFloat) =>
const makePassFBO = (regl, halfFloat) => regl.framebuffer({ color: makePassTexture(regl, halfFloat) });
// 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 makeDoubleBuffer = (regl, props) => {
const state = Array(2)
.fill()
@@ -32,9 +25,6 @@ const makeDoubleBuffer = (regl, props) => {
};
};
const resizePyramid = (pyramid, vw, vh, scale) =>
pyramid.forEach((fbo, index) => fbo.resize(Math.floor((vw * scale) / 2 ** index), Math.floor((vh * scale) / 2 ** index)));
const loadImage = (regl, url) => {
let texture = regl.texture([[0]]);
let loaded = false;
@@ -139,16 +129,4 @@ const makePass = (outputs, ready, setSize, execute) => ({
const makePipeline = (context, steps) =>
steps.filter((f) => f != null).reduce((pipeline, f, i) => [...pipeline, f(context, i == 0 ? null : pipeline[i - 1].outputs)], []);
export {
makePassTexture,
makePassFBO,
makeDoubleBuffer,
makePyramid,
resizePyramid,
loadImage,
loadText,
makeFullScreenQuad,
make1DTexture,
makePass,
makePipeline,
};
export { makePassTexture, makePassFBO, makeDoubleBuffer, loadImage, loadText, makeFullScreenQuad, make1DTexture, makePass, makePipeline };