Cover image for Dithering Lighting Shader

Dithering Lighting Shader

sketchpunk profile image SketchPunk ・1 min read

Someone suggested I look up dithering for shading and boy does this one have potential. I've read that normally this is done using a texture pattern but one place showed off a Matrix that replicates the same results, which makes this process lightweight.

Code wise, this is surprisingly very simple. The whole matrix technique if you really break it down and play with it can give you ideas of how to create pixel patterns that you can repeat in screen space or maybe even uv.

Code is free. Have at it, its a nice sample and def worth learning just on the ideas of pixel patterns only.

[ DEMO ]



I have a patreon for anyone who would like to support my work. Everything I do I release as open source. With a enough support I can do this full time and make more stuff for people to use and learn from. https://www.patreon.com/sketchpunk

Posted on by:

sketchpunk profile



10% luck, 20% skill, 15% concentrated power of will. 5% pleasure, 50% pain, And a 100% reason to remember the name.


markdown guide

I'm not 100% sure if I'm understanding the example after reading

Is this effect to map out an object and identify what areas are not illuminated? So this means that whatever is darker means it should be shaded? Or is it a technique of sampling the colors applied around it to work normalizing the colors on the model to require less processing?

Also congratulations on the patreon! I hope everyday you get closer to your goal!


Dithering is an old printing technique. I believe black+white newspapers today still use this technique to create gradient shading. You can do colors too, using just one color with dither patterns to create different shades or to transition between two colors while creating the look of a gradient transition between the two.

I attached an image of a black to white gradient but purely using dithering. This allows you to create the illusion of shading by just using two colors. At each band of the gradient a new pattern is used that helps defined that level of gray.

Apparently there some magic math that you can use that can defined all these patterns by just controlling a scale value between 0 and 1. So thats what I'm using in the shader while using the light strength as the scale value.

So whats the point of it outside of printing? Just style. Thats it, nothing else to it really. If you ever watched the movie Spider-Verse, the artists used lots of different things to add to the art style, it wasn't flat shading or gradient shading, they also mixed halftones and other variations of it to create something different.

Here's a scene from the movie. Look around, there is halftones mixed in all over the place. So for me dithering can be used as an alternative to just rows/columns of dots (halftones), since depending on the level of depth a different pattern of dots emerge.

There is a game I'm hoping to develop and I want to use a toon shader, but I want to mix patterns into it, like transition from one color to another. So Half tones, Dithering and in a few minutes I'll be posting about SDF textures, as various things I'm learning and experimenting with to create "my look". And since there isn't really any working examples in webgl, well shit, then its important to have something people can see and learn from :)


Thanks for helping clear that up. Just to make sure I'm not missing it, its used on the under side of the mirror and within the reflection of Miles in the shading correct?

I really appreciate you're sharing as your learning different techniques in a space that doesn't have those examples yet! Way to be a pioneer!

The texture is actually all over. Might depends on the level of contrast your monitor it set. But you should be able to see it in the darker shadows of mile's face, top left corner of the image you see it clearly.