5 ms·

Surface-Stable Fractal Dithering

182 points by bj-rn 2y ago

pvg 2y ago
Related discussion a couple of months ago https://news.ycombinator.com/item?id=42084080 https://news.ycombinator.com/item?id=42084080 Lots of related links including one to a tweetier version of this work.
crazygringo 2y ago
Link to part of video that shows it in action: https://youtu.be/HPqGaIMVuLs?si=P11cFnSLcv57Wj3K&t=1236 https://youtu.be/HPqGaIMVuLs?si=P11cFnSLcv57Wj3K&t=1236
simlevesque 2y ago
That looks crazy good ! I'm speechless.
con____rad 2y ago
Unordered dithering gives better form shading as there is no structure overlaying the shape,I would love to see "Recursive Wang Tiles for Real-Time Blue Noise ps://www.youtube.com/watch?v=ykACzjtR6rc" combined with that technique
- egypturnash 2y ago
  Damn, the demo around 3:30 is lovely.
  - eru 2y ago
    Yes, but not as good as in the submitted post, alas. You can see how the points 'flicker' when they zoom in.
- tom_ 2y ago
  https://www.youtube.com/watch?v=ykACzjtR6rc https://www.youtube.com/watch?v=ykACzjtR6rc
- aeontech 2y ago
  Wow, that's a very cool paper and demo!
- shiandow 2y ago
  That does seem lovely, I might experiment with that at some point. You don't need to make things all that difficult just to get some random looking blue noise though. You can get some pretty reasonable randomized ordered dithering by just rotating the 2x2, 4x4, 8x8 blocks of the bayer matrix randomly. Though this makes more sense if you view it as adding octaves of the 2x2 bayer matrix together randomly.
deleted 2y ago
[deleted]
londons_explore 2y ago
I am pondering a different approach: * Use error diffusion dithering in screen space * Generate motion vectors for every pixel from the previous frame Now, to make the next frame: * Take the previously displayed (dithered) image and apply the motion vectors. * Now use that as the threshold map to do error diffusion dithering on the next frame. The threshold doesn't really matter for error diffusion dithering - since any error will be propagated to the next pixel. However, if you use a previous frame as a threshold map, it will encourage pixels not to 'flicker' every frame.
Ono-Sendai 2y ago
What is the point of this?
- kevingadd 2y ago
  If dithering isn't stable in motion it creates distracting 'shimmering' and other effects as the camera or objects move, which can be unpleasant to look at. Unstable dithering is also potentially harder to compress in videos.
  - Ono-Sendai 2y ago
    Yeah but if your dithering is noticable in the first place you're doing it wrong.
    - Rohansi 2y ago
      Unless you want it as an artistic style.
  - cma 2y ago
    If this is surface stable it should also work for stereo/VR without much stereo disparity, where normal dithering would have a mismatch. And PCVR is often streamed over video codecs now so what you said aboutvideo compression should help there too.
    - AndrewStephens 2y ago
      I was also wondering how well it would look in stereo. My guess is it would still look strange (the "depth map" would also appear dithered) but the effect would be interesting to experiment with.
- Retr0id 2y ago
  As far as I can tell, it's purely artistic.
- abetusk 2y ago
adamrezich 2y ago
Technically, this is very cool. Aesthetically, though, the end result doesn't look very good, at least in my opinion. The Obra Dinn visual style is attempting to find a compromise between having the game look like its visuals are prerendered 3D scenes, dithered for an old 1-bit display. As the video explains, a lot of work had to go into striking a balance between the intended aesthetic, and playability, because it turns out that the dithered aesthetic is difficult to work with. This, though, just kind of ends up looking like a pseudo-halftone style applied to high-res polygonal models. Maybe it would look better at 320x240 or something?
JKCalhoun 2y ago
I got the itch to try and create an Atkinson dithering paint program. What do I mean by that? Imagine a grayscale paint program (like, say, Procreate, just all grays) but all the pixels go through an Atkinson dither before hitting the screen. To the artist you're kind of darkening or lightening the dither, so to speak, in areas of the canvas with your brush/eraser. (Kind of crowding or thinning the resulting B&W pixels). An hour spent with Claude to make this happen in HTML5 caused me to set the experiment aside. It was okay, but only did the dither after the mouse was released. I wasn't driven enough to try to get it to dither in real-time (as the brush is being stroked). The mouse is a terrible painting tool too — with a touch interface on an iPad (again, like Procreate) it might be worth pursuing further. It would need to be very performant as I say — so that you could see the dither as the brush is moving. (This might require a special bitmap and code where you store away the diffusion error so that you can update only a portion of the screen — where the brush has move - rather than having to re-dither the entire document 60 fps.)
- itishappy 2y ago
  Error diffusion is not ideal for real time work, and it cannot be parallelized. Consider storing a precomputed blue noise texture.
  - AndrewStephens 2y ago
    This is correct. Atkinson dithering looks cool (at least to my eyes) but is not the best choice for real time work. In particular, it cannot be implemented in a shader, although you can approximate it. But computers are fast enough that a CPU-bound algorithm can still work at interactive speeds. Not sure how well it would work in an editor though - in theory changing a single pixel at the top left of the image could cause a chain reaction that could force the whole image to be re-dithered. I did an implementation of Atkinson dithering for a web component in case anyone is feeling the itch to dither like it is 1985. Demo: https://sheep.horse/2023/1/improved_web_component_for_pixel-accurate_atkinson.html https://sheep.horse/2023/1/improved_web_component_for_pixel-... Source: https://github.com/andrewstephens75/as-dithered-image https://github.com/andrewstephens75/as-dithered-image
jnurmine 2y ago
As I watched the video I got an idea. Could this somehow be repurposed such that the points would be "check points" for a generative texture algorithm, with zoom level somehow taken into account (distance of dots maybe)? Then one could, in a computer game, for example look at a brick wall. At first, as one is further back, the surface from tiles look somewhat matte smooth. But when one gets closer, the features become more and more coarse with more and more detail, eventually even some tiny tiny holes in the surface are visible, and so on. Another example: sand, it looks smooth from afar but as one zooms in, actual grains of sand become visible.
- djmips 2y ago
  That's level of detail (LOD) and there are various ways of implementing it. This dither technique incorporates LOD but I'm not sure how it would be useful for the type of LOD you are suggesting unless perhaps you think it might be applicable as a procedural technique in which case some of the observations might be an inspiration.

182 points by bj-rn 2y ago

pvg 2y ago

Related discussion a couple of months ago https://news.ycombinator.com/item?id=42084080 https://news.ycombinator.com/item?id=42084080 Lots of related links including one to a tweetier version of this work.

crazygringo 2y ago

Link to part of video that shows it in action: https://youtu.be/HPqGaIMVuLs?si=P11cFnSLcv57Wj3K&t=1236 https://youtu.be/HPqGaIMVuLs?si=P11cFnSLcv57Wj3K&t=1236

simlevesque 2y ago

That looks crazy good ! I'm speechless.

con____rad 2y ago

Unordered dithering gives better form shading as there is no structure overlaying the shape,I would love to see "Recursive Wang Tiles for Real-Time Blue Noise ps://www.youtube.com/watch?v=ykACzjtR6rc" combined with that technique

egypturnash 2y ago
Damn, the demo around 3:30 is lovely.
- eru 2y ago
  Yes, but not as good as in the submitted post, alas. You can see how the points 'flicker' when they zoom in.
tom_ 2y ago
https://www.youtube.com/watch?v=ykACzjtR6rc https://www.youtube.com/watch?v=ykACzjtR6rc
aeontech 2y ago
Wow, that's a very cool paper and demo!
shiandow 2y ago
That does seem lovely, I might experiment with that at some point. You don't need to make things all that difficult just to get some random looking blue noise though. You can get some pretty reasonable randomized ordered dithering by just rotating the 2x2, 4x4, 8x8 blocks of the bayer matrix randomly. Though this makes more sense if you view it as adding octaves of the 2x2 bayer matrix together randomly.

deleted 2y ago

[deleted]

londons_explore 2y ago

I am pondering a different approach: * Use error diffusion dithering in screen space * Generate motion vectors for every pixel from the previous frame Now, to make the next frame: * Take the previously displayed (dithered) image and apply the motion vectors. * Now use that as the threshold map to do error diffusion dithering on the next frame. The threshold doesn't really matter for error diffusion dithering - since any error will be propagated to the next pixel. However, if you use a previous frame as a threshold map, it will encourage pixels not to 'flicker' every frame.

Ono-Sendai 2y ago

What is the point of this?

kevingadd 2y ago
If dithering isn't stable in motion it creates distracting 'shimmering' and other effects as the camera or objects move, which can be unpleasant to look at. Unstable dithering is also potentially harder to compress in videos.
- Ono-Sendai 2y ago
  Yeah but if your dithering is noticable in the first place you're doing it wrong.
  - Rohansi 2y ago
    Unless you want it as an artistic style.
- cma 2y ago
  If this is surface stable it should also work for stereo/VR without much stereo disparity, where normal dithering would have a mismatch. And PCVR is often streamed over video codecs now so what you said aboutvideo compression should help there too.
  - AndrewStephens 2y ago
    I was also wondering how well it would look in stereo. My guess is it would still look strange (the "depth map" would also appear dithered) but the effect would be interesting to experiment with.
Retr0id 2y ago
As far as I can tell, it's purely artistic.
abetusk 2y ago

adamrezich 2y ago

Technically, this is very cool. Aesthetically, though, the end result doesn't look very good, at least in my opinion. The Obra Dinn visual style is attempting to find a compromise between having the game look like its visuals are prerendered 3D scenes, dithered for an old 1-bit display. As the video explains, a lot of work had to go into striking a balance between the intended aesthetic, and playability, because it turns out that the dithered aesthetic is difficult to work with. This, though, just kind of ends up looking like a pseudo-halftone style applied to high-res polygonal models. Maybe it would look better at 320x240 or something?

JKCalhoun 2y ago

I got the itch to try and create an Atkinson dithering paint program. What do I mean by that? Imagine a grayscale paint program (like, say, Procreate, just all grays) but all the pixels go through an Atkinson dither before hitting the screen. To the artist you're kind of darkening or lightening the dither, so to speak, in areas of the canvas with your brush/eraser. (Kind of crowding or thinning the resulting B&W pixels). An hour spent with Claude to make this happen in HTML5 caused me to set the experiment aside. It was okay, but only did the dither after the mouse was released. I wasn't driven enough to try to get it to dither in real-time (as the brush is being stroked). The mouse is a terrible painting tool too — with a touch interface on an iPad (again, like Procreate) it might be worth pursuing further. It would need to be very performant as I say — so that you could see the dither as the brush is moving. (This might require a special bitmap and code where you store away the diffusion error so that you can update only a portion of the screen — where the brush has move - rather than having to re-dither the entire document 60 fps.)

itishappy 2y ago
Error diffusion is not ideal for real time work, and it cannot be parallelized. Consider storing a precomputed blue noise texture.
- AndrewStephens 2y ago
  This is correct. Atkinson dithering looks cool (at least to my eyes) but is not the best choice for real time work. In particular, it cannot be implemented in a shader, although you can approximate it. But computers are fast enough that a CPU-bound algorithm can still work at interactive speeds. Not sure how well it would work in an editor though - in theory changing a single pixel at the top left of the image could cause a chain reaction that could force the whole image to be re-dithered. I did an implementation of Atkinson dithering for a web component in case anyone is feeling the itch to dither like it is 1985. Demo: https://sheep.horse/2023/1/improved_web_component_for_pixel-accurate_atkinson.html https://sheep.horse/2023/1/improved_web_component_for_pixel-... Source: https://github.com/andrewstephens75/as-dithered-image https://github.com/andrewstephens75/as-dithered-image

jnurmine 2y ago

As I watched the video I got an idea. Could this somehow be repurposed such that the points would be "check points" for a generative texture algorithm, with zoom level somehow taken into account (distance of dots maybe)? Then one could, in a computer game, for example look at a brick wall. At first, as one is further back, the surface from tiles look somewhat matte smooth. But when one gets closer, the features become more and more coarse with more and more detail, eventually even some tiny tiny holes in the surface are visible, and so on. Another example: sand, it looks smooth from afar but as one zooms in, actual grains of sand become visible.

djmips 2y ago
That's level of detail (LOD) and there are various ways of implementing it. This dither technique incorporates LOD but I'm not sure how it would be useful for the type of LOD you are suggesting unless perhaps you think it might be applicable as a procedural technique in which case some of the observations might be an inspiration.