Top
Best
New

Posted by Bogdanp 1 day ago

Dithering – Part 1(visualrambling.space)
394 points | 84 commentspage 2
estebank 23 hours ago|
Obligatory link to the in-progress forum post about the development of The Return of the Obra Dinn's dithering effect: https://forums.tigsource.com/index.php?topic=40832.msg136374...

The difficulty for dithering on an interactive 3d scene is in making the dithering stable on camera rotation, otherwise you get a twinkling stars effect, not dissimilar to the "fireflies" in reflections in ray-traced games.

m12k 23 hours ago|
And here's a couple videos about a technique that was inspired by the Obra Dinn's dither, but making it surface stable:

https://www.youtube.com/watch?v=HPqGaIMVuLs (explanation)

https://www.youtube.com/watch?v=EzjWBmhO_1E (demo)

kragen 14 hours ago||
These are absolutely amazing, thank you! I had wondered whether something like this was possible because I have this 1-bit-deep screen here, and now I'm delighted to see that it is. I'm just not sure if my machine has enough CPU to manage it.
glimshe 23 hours ago||
We had another dithering post a few days ago and nobody answered my question... I'm reposting in case someone who comes here knows the answer:

"Does anyone know of any application/tool that can perform palette dithering? The idea is "here is a n-color palette specified in their RGB values, here is the full-color RGB image, give me the best possible dithered image using the provided palette". The tools that I've used were underwhelming and produced results full of banding and artifacts.

Basically, great dithering in color instead of B/W."

EDIT: Thank you for the answers! I'll check all links.

kevinsync 22 hours ago||
I left a comment [0] on the other thread, and this is irrelevant if you aren't using Photoshop, but there's a plugin called DITHERTONE Pro that gives you a lot of control over the dither algorithm used + color grade. For actual design, I tend to use this since I'm already in PS cobbling together an image, and you can tweak the results in realtime to dial it in how you want.

I also have used didder [1] a couple times for dithering via CLI / script. Its results can be pretty good too, just more for repeatable batch operations and you need to make sure your palettes and chosen algorithms will produce what you're actually looking for.

[0] https://news.ycombinator.com/item?id=45726845

[1] https://github.com/makew0rld/didder

shrinks99 21 hours ago|||
Cole (the author of didder) also has a GUI version called Dithertime: https://makew0rld.itch.io/dithertime
glimshe 7 hours ago|||
This looks like what I want - thank you!
gyomu 23 hours ago|||
That’s going to be a tricky problem full of compromises, and entirely up to how you formalize your definition for “the best possible dithered image”.

Do you care about preserving relative brightness, contrast, edges,… etc.

Human color perception is tricky, and in the outline you give it’s entirely possible that the provided n-color palette (also, what order of magnitude n are we talking about here?) would be inadequate for a satisfactory rendering of the provided full color image.

glimshe 21 hours ago||
I'd just like a subjectively "good" result that beats the manual approaches using image manipulation programs.

n would be less than 4096, but usually much smaller values (256, 16)

rikroots 22 hours ago|||
I responded in that post (though not to you, and probably not what you're after) with a link to my JS canvas library's "reduce palette" filter. It includes both supplying an array of colors to act as the palette, and setting the required number of colors for which the filter can calculate a "commonest colors" palette, calculating color distances in the OKLAB color space - https://scrawl-v8.rikweb.org.uk/demo/filters-027.html

If anyone wants to see the filter code, it in the GitHub repo here: https://github.com/KaliedaRik/Scrawl-canvas/blob/064469928a3...

tfinch 23 hours ago|||
I’m using this for making some quake inspired textures - it’s a bit clunky but works for me https://captain4lk.itch.io/slk-img2pixel
ftigis 11 hours ago|||
ImageMagick with `-dither` and `-remap` could also work. For remap you would need an image with your desired palette, and IIRC you could use ImageMagick to produce that image but I cannot recall the incantation required for that.
mpyne 18 hours ago|||
Use Google's Squoosh.app: https://squoosh.app

When editing an image you can choose the 'Reduce palette' option to bring up a way to reduce the number of images used, and the palette reduction panel will let you optionally apply dithering or not.

The dithering algorithm is not selectable but it's worth trying to see if you like it.

kragen 15 hours ago|||
This is common functionality in graphics software, but there isn't such a thing as "the best possible dithered image using the provided palette"; there are unavoidable tradeoffs between sharpness and color precision, so different ways of dithering may be better for different purposes.
agarv 17 hours ago|||
I don't know if it's exactly what you're looking for but I made a free tool https://app.dithermark.com . It only allows 18 colors max, but it has a lot of options, including the ability to determine what color palette to use.
snvzz 19 hours ago||
The gimp can do this.

Define your palette, then via the dialog spawned through image->format menu, pick your palette from the list.

glimshe 17 hours ago||
Yes, but the algorithm isn't that great... That's what I'm using now
snvzz 15 hours ago||
"Positional" is a single, relatively boring hardcoded pattern, and the other options are Floyd–Steinberg error diffusion.

I do agree it would be nice to extend gimp to do all sorts of fancy dithering, and imagine it's just that nobody has put on the work yet.

kragen 15 hours ago||
Floyd–Steinberg is pretty great when your palette has reasonably-close colors.
janderson215 20 hours ago||
This was an amazing presentation! In one of the earliest screens, it is demonstrated that there are more or less 8 different shades of gray from just different patterns of black/white pixel arrangement. Is it possible to use the “blow up” view to classify the different shades of gray in an image to determine what the pattern should be for a given pixel grouping should be? Maybe this would be accomplishing the same thing the threshold filter accomplishes and have the same end result or possibly a different dithering method. Just trying to integrate this into my brain.
hackncheese 1 day ago||
Somehow my first time seeing Visual Rambling, absolutely beautiful site
Faizan711 5 hours ago||
Amazing!!!
chaidhat 14 hours ago||
This is really cool! I always thought dithering was just blending two colors by alternating adjacent pixels, I didn't know there was more ways to do it than one.
jzacharia 21 hours ago||
I've been working on an implementation of this in Rust actually, weird timing. Cool article.
shrinks99 21 hours ago|
A friend of mine wrote one for Go with the goal of creating the best and most complete dithering library out there and I think he did a decent job. Worth a look if you're looking for reference implementations!

Here's his: https://github.com/makew0rld/dither

K0IN 23 hours ago||
Hei, if someone wants to implement this, feel free to contribute this to my Phomemo M02 (a cheap < 15$) black and white thermal printer, web app.

https://github.com/K0IN/Phomemo-M02-Web

agarv 23 hours ago|
Since I see you're using Vue, I created an MIT licensed dithering web app with Vue. I've never tried to embed it in anything, but you're welcome to give it a shot.

https://github.com/allen-garvey/dithermark

rezmason 15 hours ago||
I can appreciate the passion and consideration that went into this presentation of the subject!
cvanelteren 8 hours ago|
Amazing animations!
More comments...