diff --git a/README.md b/README.md index 9836a0f..86272a1 100644 --- a/README.md +++ b/README.md @@ -84,6 +84,8 @@ Now you know link fu. Here's a list of customization options: - **forwardSpeed** - the rate that the 3D raindrops approach. Default is 1.0. - **slant** - the angle that the 2D raindrops fall, in degrees. Default is 0. - **bloomSize** - the glow quality, from 0 to 1. Default is 0.5. Lowering this value may help the digital rain run smoother on your device. +- **bloomStrength** - the glow intensity, from 0 to 1. Default is 1. +- **ditherMagnitude** - the amount to randomly darken pixels, to conceal [banding](https://en.wikipedia.org/wiki/Colour_banding). Default is 0.05. - **resolution** - the image size, relative to the window size. Default is 1. Lowering this value may improve your performance, especially on high pixel density displays. - **raindropLength** - the vertical scale of "raindrops" in the columns. Can be any number, even negative! Default is 1.0. - **animationSpeed** - the overall speed of the animation. Can be any number, even negative! Default is 1.0. diff --git a/js/config.js b/js/config.js index fa22bf5..9d9e96d 100644 --- a/js/config.js +++ b/js/config.js @@ -52,6 +52,7 @@ const defaults = { brightnessOverride: 0.0, // A global override to the brightness of displayed glyphs. Only used if it is > 0. brightnessThreshold: 0, // The minimum brightness for a glyph to still be considered visible brightnessDecay: 1.0, // The rate at which glyphs light up and dim + ditherMagnitude: 0.05, // The magnitude of the random per-pixel dimming fallSpeed: 0.75, // The speed the raindrops progress downwards glyphEdgeCrop: 0.0, // The border around a glyph in a font texture that should be cropped out glyphHeightToWidth: 1, // The aspect ratio of glyphs @@ -260,6 +261,14 @@ const paramMapping = { key: "bloomSize", parser: (s) => nullNaN(range(parseFloat(s), 0, 1)), }, + bloomStrength: { + key: "bloomStrength", + parser: (s) => nullNaN(range(parseFloat(s), 0, 1)), + }, + ditherMagnitude: { + key: "ditherMagnitude", + parser: (s) => nullNaN(range(parseFloat(s), 0, 1)), + }, url: { key: "bgURL", parser: (s) => s }, stripeColors: { key: "stripeColors", parser: (s) => s }, backgroundColor: { key: "backgroundColor", parser: (s) => s.split(",").map(parseFloat) }, diff --git a/js/regl/palettePass.js b/js/regl/palettePass.js index e653ab4..d42d3f2 100644 --- a/js/regl/palettePass.js +++ b/js/regl/palettePass.js @@ -65,7 +65,7 @@ const makePalette = (regl, entries) => { export default ({ regl, config }, inputs) => { const output = makePassFBO(regl, config.useHalfFloat); const palette = makePalette(regl, config.paletteEntries); - const { backgroundColor } = config; + const { backgroundColor, ditherMagnitude } = config; const palettePassFrag = loadText("shaders/glsl/palettePass.frag.glsl"); @@ -74,10 +74,10 @@ export default ({ regl, config }, inputs) => { uniforms: { backgroundColor, + ditherMagnitude, tex: inputs.primary, bloomTex: inputs.bloom, palette, - ditherMagnitude: 0.05, }, framebuffer: output, }); diff --git a/js/regl/resurrectionPass.js b/js/regl/resurrectionPass.js index 25e4e6f..7403a98 100644 --- a/js/regl/resurrectionPass.js +++ b/js/regl/resurrectionPass.js @@ -10,7 +10,7 @@ import { loadText, make1DTexture, makePassFBO, makePass } from "./utils.js"; export default ({ regl, config }, inputs) => { const output = makePassFBO(regl, config.useHalfFloat); - const { backgroundColor } = config; + const { backgroundColor, ditherMagnitude } = config; const resurrectionPassFrag = loadText("shaders/glsl/resurrectionPass.frag.glsl"); const render = regl({ @@ -18,9 +18,9 @@ export default ({ regl, config }, inputs) => { uniforms: { backgroundColor, + ditherMagnitude, tex: inputs.primary, bloomTex: inputs.bloom, - ditherMagnitude: 0.05, }, framebuffer: output, }); diff --git a/js/regl/stripePass.js b/js/regl/stripePass.js index 78af3e2..d7e85eb 100644 --- a/js/regl/stripePass.js +++ b/js/regl/stripePass.js @@ -31,7 +31,7 @@ const prideStripeColors = [ export default ({ regl, config }, inputs) => { const output = makePassFBO(regl, config.useHalfFloat); - const { backgroundColor } = config; + const { backgroundColor, ditherMagnitude } = config; // Expand and convert stripe colors into 1D texture data const stripeColors = @@ -49,10 +49,10 @@ export default ({ regl, config }, inputs) => { uniforms: { backgroundColor, + ditherMagnitude, tex: inputs.primary, bloomTex: inputs.bloom, stripes, - ditherMagnitude: 0.05, }, framebuffer: output, }); diff --git a/js/webgpu/palettePass.js b/js/webgpu/palettePass.js index 5e9a8e4..cf69c68 100644 --- a/js/webgpu/palettePass.js +++ b/js/webgpu/palettePass.js @@ -102,7 +102,7 @@ export default ({ config, device, timeBuffer }) => { const paletteShaderUniforms = structs.from(paletteShader.code); const configUniforms = paletteShaderUniforms.Config; - configBuffer = makeUniformBuffer(device, configUniforms, { ditherMagnitude: 0.05, backgroundColor: config.backgroundColor }); + configBuffer = makeUniformBuffer(device, configUniforms, { ditherMagnitude: config.ditherMagnitude, backgroundColor: config.backgroundColor }); const paletteUniforms = paletteShaderUniforms.Palette; paletteBuffer = makePalette(device, paletteUniforms, config.paletteEntries); diff --git a/js/webgpu/resurrectionPass.js b/js/webgpu/resurrectionPass.js index cb3893d..7fb4d5f 100644 --- a/js/webgpu/resurrectionPass.js +++ b/js/webgpu/resurrectionPass.js @@ -36,7 +36,7 @@ export default ({ config, device, timeBuffer }) => { }); const configUniforms = structs.from(resurrectionShader.code).Config; - configBuffer = makeUniformBuffer(device, configUniforms, { ditherMagnitude: 0.05, backgroundColor: config.backgroundColor }); + configBuffer = makeUniformBuffer(device, configUniforms, { ditherMagnitude: config.ditherMagnitude, backgroundColor: config.backgroundColor }); })(); const build = (size, inputs) => { diff --git a/js/webgpu/stripePass.js b/js/webgpu/stripePass.js index 8841039..772fbcf 100644 --- a/js/webgpu/stripePass.js +++ b/js/webgpu/stripePass.js @@ -73,7 +73,7 @@ export default ({ config, device, timeBuffer }) => { }); const configUniforms = structs.from(stripeShader.code).Config; - configBuffer = makeUniformBuffer(device, configUniforms, { ditherMagnitude: 0.05, backgroundColor: config.backgroundColor }); + configBuffer = makeUniformBuffer(device, configUniforms, { ditherMagnitude: config.ditherMagnitude, backgroundColor: config.backgroundColor }); })(); const build = (size, inputs) => {