Comments (6)
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.
from matrix.
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
from matrix.
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.
from matrix.
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
from matrix.
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?
from matrix.
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
from matrix.
Related Issues (20)
- Horizontal black stripe with high density HOT 2
- Instructions for running on localhost, or a server on my LAN? HOT 2
- skipOutro HOT 1
- Major Feature: dynamic parameters HOT 2
- Image displays upside-down with effect=image HOT 5
- Colors and intensities of glint and cursor should be separate properties— and colors should stay within their gamuts HOT 2
- Not an issue, congrats for this project HOT 1
- Background color with opacity or transparent HOT 1
- Feature Request: add an appropriate sound effect for falling digital rain HOT 4
- Feature Request: Animate between a "start" width and a "final" width HOT 2
- Request : ability to change every setting HOT 1
- Feature Request: render the effect to a transparent canvas HOT 1
- Improvement: modify the "operator" version to more closely resemble the effect in the original film HOT 2
- Feature Request: support Spout or NDI output HOT 1
- Unexpected behavior: intro with negative fallSpeed fills the screen with cursors HOT 2
- Change default version HOT 2
- Set as Windows Terminal background
- Missing "6" character in custom font HOT 1
- Request: Set a custom image via JavaScript as a base64 string HOT 2
- Custom fonts and symbols
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from matrix.