diff --git a/TODO.txt b/TODO.txt index a2e4878..e3a6558 100644 --- a/TODO.txt +++ b/TODO.txt @@ -1,8 +1,6 @@ TODO: Seems like bloom size and resolution impact the REGL and WebGPU bloom implementations differently - Ossify the REGL bloom - Load all the GLSL from files Move high pass into WebGPU bloom Live config update roadmap diff --git a/js/regl/bloomPass.js b/js/regl/bloomPass.js index 085368a..8270abe 100644 --- a/js/regl/bloomPass.js +++ b/js/regl/bloomPass.js @@ -38,7 +38,7 @@ export default ({ regl, config }, inputs) => { 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 highPassFrag = loadText("shaders/glsl/bloomPass.highPass.frag.glsl"); const highPass = regl({ frag: regl.prop("frag"), uniforms: { @@ -53,7 +53,7 @@ export default ({ regl, config }, inputs) => { // 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 blurFrag = loadText("shaders/glsl/bloomPass.blur.frag.glsl"); const blur = regl({ frag: regl.prop("frag"), uniforms: { @@ -66,18 +66,9 @@ export default ({ regl, config }, inputs) => { }); // 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; - } - `, + const combineFrag = loadText("shaders/glsl/bloomPass.combine.frag.glsl"); + const combine = regl({ + frag: regl.prop("frag"), uniforms: { bloomStrength, ...Object.fromEntries(vBlurPyramid.map((fbo, index) => [`pyr_${index}`, fbo])), @@ -112,7 +103,7 @@ export default ({ regl, config }, inputs) => { blur({ fbo: vBlurFBO, frag: blurFrag.text(), tex: hBlurFBO, direction: [0, 1] }); } - sumPyramid(); + combine({ frag: combineFrag.text() }); } ); }; diff --git a/shaders/glsl/blur.frag.glsl b/shaders/glsl/bloomPass.blur.frag.glsl similarity index 51% rename from shaders/glsl/blur.frag.glsl rename to shaders/glsl/bloomPass.blur.frag.glsl index b5a692d..f094050 100644 --- a/shaders/glsl/blur.frag.glsl +++ b/shaders/glsl/bloomPass.blur.frag.glsl @@ -1,8 +1,11 @@ precision mediump float; + uniform float width, height; uniform sampler2D tex; uniform vec2 direction; + varying vec2 vUV; + void main() { vec2 size = width > height ? vec2(width / height, 1.) : vec2(1., height / width); gl_FragColor = @@ -11,14 +14,4 @@ void main() { 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; } diff --git a/shaders/glsl/bloomPass.combine.frag.glsl b/shaders/glsl/bloomPass.combine.frag.glsl new file mode 100644 index 0000000..431c0ce --- /dev/null +++ b/shaders/glsl/bloomPass.combine.frag.glsl @@ -0,0 +1,20 @@ +precision mediump float; + +uniform sampler2D pyr_0; +uniform sampler2D pyr_1; +uniform sampler2D pyr_2; +uniform sampler2D pyr_3; +uniform sampler2D pyr_4; +uniform float bloomStrength; + +varying vec2 vUV; + +void main() { + vec4 total = vec4(0.); + total += texture2D(pyr_0, vUV) * 0.96549; + total += texture2D(pyr_1, vUV) * 0.92832; + total += texture2D(pyr_2, vUV) * 0.88790; + total += texture2D(pyr_3, vUV) * 0.84343; + total += texture2D(pyr_4, vUV) * 0.79370; + gl_FragColor = total * bloomStrength; +} diff --git a/shaders/glsl/highPass.frag.glsl b/shaders/glsl/bloomPass.highPass.frag.glsl similarity index 99% rename from shaders/glsl/highPass.frag.glsl rename to shaders/glsl/bloomPass.highPass.frag.glsl index 11f4d1b..9a24637 100644 --- a/shaders/glsl/highPass.frag.glsl +++ b/shaders/glsl/bloomPass.highPass.frag.glsl @@ -1,7 +1,10 @@ precision mediump float; -varying vec2 vUV; + uniform sampler2D tex; uniform float highPassThreshold; + +varying vec2 vUV; + void main() { vec4 color = texture2D(tex, vUV); if (color.r < highPassThreshold) color.r = 0.0;