Ordered 1-bit dithering with jit.gl.pix : a shadertoy shader convertion experiment


    Mar 19 2022 | 8:28 am
    Hi, I recently read a lot about graphical 1-bit dithering and how it works, so I started to implement some dithering algorithms in the jit.gl world, but I still struggle to get some of the logic when converting a shader from Shadertoy to a jit.gl.pix or .slab. I've read and watched anything I could find on this topic, including Amazing Max Stuff tutorials, without finding the answer I'm looking for.
    For now I implemented random dithering (pretty straightforward) and ordered dithering, but for the latter I struggle to get it consistent regardless the window size. It's pretty close to the expected result (see the b&w version of this shadertoy) but I'm sure I'm missing a simple value or multiplier. Depending on the window size, we can see different kind of grid patterns, but never the perfectly regular grid we can observe in the original shadertoy. Any hint?
    My final goal is to implement this dithering algorithm (coming from the Obra Dinn video game) but for now I stick to simpler dithering forms, just to get the logic right. Of course I would be happy to share this work with you once it'll be done. Thanks!

    • Mar 19 2022 | 11:12 am
      Hey TFL,
      nice dithering patch! This way it should work:
    • Mar 19 2022 | 1:49 pm
      Excellent, thanks Matteo! I updated my patch with your modifications (with the the rendering size defined by the window size instead of the video size):
      I was eventually able to to adapt the ObraDinn-like dithering! Looks lovely to me but I did not expect it to work so badly with animated images (especially in areas changing abruptly from black to white or the opposite) but it can be tinkered by changing the last 3.0 values to 2.0 in the fx, fy, px and py definitions.