Search code examples
three.jsshadowdithering

Why won't "dithering" on three.js material actually do dithering?

I have a simple material on my object like:

    THREE.MeshPhysicalMaterial({
        roughness:1,
        color: 0xffffff,
        dithering:true 
    })

and one simple directional light. Now, i thought the "dithering" would do something like this with the shadows: enter image description here

However, it doesn't seem to do anything. What does the dithering attribute actually do? Or did i forget to configure something?

Solution

  • Dithering in the material is a very subtle effect that helps prevent banding when colors aren’t blending smoothly. The effect you’re showing in your screenshot is much more pronounced, black and white, and largely pixelated. The default materials don’t have this functionality.

    The effect you want can be achieved as a post-process pass. Threejs has a demo on how to do it here: https://threejs.org/examples/?q=post#webgl_postprocessing

    Here’s the source code for that demo. Notice that it uses the DotScreenShader shader pass.