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 

) 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?

 (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.

comment

fpic

loadmess

prepend

gate

jit.gl.pix

step

swiz

param

cell

sample

jit.noise

getattr

jit.gl.videoplane

radiogroup

jit.gl.texture

toggle

switch

message

jit.movie

jit.grab

jit.world

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!


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.g

ordered-1-bit-dithering-with-jit-gl-pix-a-shadertoy-shader-convertion-experiment

nice dithering patch! This way it should work:

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.

dither_ObraDinn_bufA.jxs

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.


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