Bloom effect

[lexum0]

I'm running it on an Intel Mac mini but on a high pixel density display its quite heavy, so I'm running it with &resolution=0.7 so performance is decent but most of the time the bloom effect looks like JPEG noise, bad quality instead of the bloom effect. Turning it down to 0 makes the code look different, maybe it's not considering bloomSize=0 for the color, and low values don't look as expected. Maybe the amount of bloom could be lowered, rather than lowering the resolution which I think it does, it could lower the alpha, or the color to make it less noticeable via another variable. As an alternative, the dithered bloom could be blurred but I'm not sure if it would be performant enough.

This url looks more noisy https://rezmason.github.io/matrix/?version=operator&width=200&resolution=0.7

Here the noise is barely noticeable https://rezmason.github.io/matrix/?version=updated&resolution=0.7&font=matrixcode

The noise is more noticeable when using an external display rather than a MacBook Built-in Display due to color calibration, but on the same external display the urls from above look different regarding the bloom effect, making the first one look like the second one could greatly improve the look

If I can help let me know

Thanks for the amazing work

PS: Since different displays show color differently, maybe the best option could be to control how bright the bloom color is, since comparing it to another display it may be darker and less noticeable. The attached images are named accordingly

[Rezmason]

Thanks for the detailed writeup! The problems you're pointing out have a couple causes, and shed light on a third meta-problem.

Problem 1: changes to the bloom effect cause changes in overall brightness.

With bloom effect turned off, a source of light that usually ends up composited into the final appearance is left out. The easy code fix for this is to crank up the lights in these circumstances. A more nuanced approach would be to estimate how much brightness the bloom effect contributes to the overall scene at different levels of detail, and weight things by that. I'll put in the quick fix, and experiment with the harder one in a while.

Problem 2: the built-in dithering has no user-facing control.

The noise you're seeing is a feature, not a bug: it's meant to hide banding. Basically I'm dimming every pixel a random number, so that no two neighboring pixels are exactly the same color. But the amount of random dimming is currently hard-coded, when it could be a setting in the URL. That's an easy change to add.

Meta-problem: configurability is awkward

The original version of this project rendered glyphs one way. The URL parameter system originally helped me tune it, and then I leveraged it to give visitors some control. It hasn't scaled very well.

There ought to be an out-of-the way visual preferences system. I could drive the effect config from it, and also update the URL dynamically so it's easy to link to a specific version. Tweakpane looks good, and supports plugins and themes. I can make it functional, and then I can make it look like the inside of the Nebuchadnezzar.

The hard part will be making sure the project can undergo certain changes in real time, like the different effects, which are implemented in different post-processing passes.

Just having a plan for a preferences pane is progress. I'll put these notes in a separate issue and tackle the low-hanging fruit.

[Rezmason]

There we go! Are these better than before?

The zero-bloom-strength brightness change is a little trickier than I thought, but the brightness shouldn't be too much dimmer.

https://rezmason.github.io/matrix?version=operator&width=200&resolution=0.7&ditherMagnitude=0

https://rezmason.github.io/matrix?version=operator&width=200&bloomSize=0

[lexum0]

Awesome!! Thank you so much!! ditherMagnitude=0 looks great! the image looks clean now and thanks for the quick response.

Here's a comparison of the same screenshot between an Apple display and an external display. As you can see, one looks as intended with a black background and the other one gives a humidity look all over the screen, if it were possible to expose the alpha value of the bloom effect or the color it could be fine tuned in these cases. Thanks again

[Rezmason]

Ah, yes, that looks like the banding that the dither is meant to conceal. For now, that's the only tool we have— though maybe I can detect and counteract display gamma.

Is there a ditherMagnitude value between 0 and 1 that makes the effect look acceptable on that "humid" display?

[lexum0]

I don't mean the banding (the banding is fine), I mean how far it spreads or visible it is, rather than being subtle, it's too bright, which is expected to have color variations when using different displays with different color calibration, space, brightness, user settings.

ditherMagnitude 0 is the only one good, the higher the value the worse it looks. Low values like 0.05 introduce dithering dots, but 0 looks great and the higher the value it looks like old tvs static. It looks interesting, but not what we are looking for. The problem isn't the banding, but how bright the glow is. Controlling the alpha I'd think would be the best option, rather than controlling the color (for setting a darker green for example)

Here's a comparison of how the glow looks different on the same display depending on the version parameter

I'd say the problem is the glow looks overdone, if it makes sense, not the banding. In the photo the banding looks serious, but in real life it looks great, it's not a problem at all. I think just I way to tone it down, either alpha, color or brightness would help for displays or cases where it's too bright

[Rezmason]

The recently added config options hopefully make it easier to avoid crusty bloom. Also once a GUI is available to tune the effect, it should be easier to investigate visual issues.