diff --git a/TODO.txt b/TODO.txt index 341212e..e7a339c 100644 --- a/TODO.txt +++ b/TODO.txt @@ -5,6 +5,8 @@ Experiment with varying the colors in the palette pass Maybe dim and widen the bloom Just make sure the changes to non-default configurations are acceptable + Maybe try and accomplish the effect in Photoshop, to get a sense of what's going on + Deja vu effect: flashing rows Make them flash all the time Then use a thunder-like pattern to show and hide the flash diff --git a/js/bloomPass.js b/js/bloomPass.js index 0033c8b..8971bb1 100644 --- a/js/bloomPass.js +++ b/js/bloomPass.js @@ -69,6 +69,16 @@ export default (regl, config, inputs) => { texture2D(tex, vUV + direction / max(width, height) * size) + texture2D(tex, vUV - direction / max(width, height) * size) ) * 0.279; + // gl_FragColor = + // texture2D(tex, vUV) * 0.38774 + + // ( + // texture2D(tex, vUV + direction / max(width, height) * size * 0.5) + + // texture2D(tex, vUV - direction / max(width, height) * size * 0.5) + // ) * 0.24477 + + // ( + // texture2D(tex, vUV + direction / max(width, height) * size) + + // texture2D(tex, vUV - direction / max(width, height) * size) + // ) * 0.06136; } `, uniforms: { diff --git a/js/palettePass.js b/js/palettePass.js index 40f79c6..3ba069f 100644 --- a/js/palettePass.js +++ b/js/palettePass.js @@ -1,17 +1,9 @@ import { make1DTexture, makePassFBO, makePass } from "./utils.js"; -// The rendered texture's values are mapped to colors in a palette texture. -// A little noise is introduced, to hide the banding that appears -// in subtle gradients. The noise is also time-driven, so its grain -// won't persist across subsequent frames. This is a safe trick -// in screen space. - -export default (regl, config, inputs) => { - const output = makePassFBO(regl); - +const makePalette = (regl, entries) => { const PALETTE_SIZE = 2048; const paletteColors = Array(PALETTE_SIZE); - const sortedEntries = config.paletteEntries + const sortedEntries = entries .slice() .sort((e1, e2) => e1.at - e2.at) .map(entry => ({ @@ -41,10 +33,21 @@ export default (regl, config, inputs) => { } }); - const palette = make1DTexture( + return make1DTexture( regl, paletteColors.flat().map(i => i * 0xff) ); +}; + +// The rendered texture's values are mapped to colors in a palette texture. +// A little noise is introduced, to hide the banding that appears +// in subtle gradients. The noise is also time-driven, so its grain +// won't persist across subsequent frames. This is a safe trick +// in screen space. + +export default (regl, config, inputs) => { + const output = makePassFBO(regl); + const palette = makePalette(regl, config.paletteEntries); return makePass( {