1

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?

user151496
  • 1,849
  • 24
  • 38

1 Answers1

3

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.

M -
  • 26,908
  • 11
  • 49
  • 81
  • oh i understand, thank you. do you know if it would rather be possible to use this pass only as a texture shader, and set dithering for the object's texture and the shadows that he it has on itself? i don't want to dither the whole scene – user151496 Jan 21 '22 at 16:39
  • That’s not possible with the default materials that come built-in with threejs. You would need to write your own custom shader to do it. – M - Jan 21 '22 at 16:51
  • yes, i know that i would have to write my own shader, i was wondering how to apply a fragment shader to the single object and take its shadow map as input, not use a `EffectComposer` to use effects on the whole three js scene – user151496 Jan 24 '22 at 11:40
  • That’s a pretty advanced request with many steps that would take many hours to write. If you’d like to learn how to write shaders, I recommend https://thebookofshaders.com – M - Jan 24 '22 at 15:53
  • nooo, you don't understand. i understand the complexity of writing a shader (i know some basics). i am wondering about the ability to set my custom shader as the object texture and transfer the lightning map into it (via sampler2D i guess). not how to write the shaders – user151496 Jan 25 '22 at 08:58
  • i have figured out how to do it: you can use the native `MeshPhysicalMaterial` and modify the already existing shader via `material.onBeforeCompile = function ( shader ) {` doing this like `shader.fragmentShader = shader.fragmentShader.replace("void main() {", " ... your code ... void main(){ ...your code..."); `. the computed shaded color is available as `gl_FragColor.rgb` at the end of main function. it is for example available near line `"#include "`, so you can search and replace that with code for dithering, starting from the already fully shaded surface – user151496 Feb 21 '22 at 16:41