Implement HalftoneEffect

[vanruesc]

Description

Implement a HalftoneEffect (DotScreenEffect).

References:

• https://github.com/mrdoob/three.js/blob/0bf3908b73b2cf73d7361cce17cfc8b816cb2a00/examples/jsm/postprocessing/HalftonePass.js#L12

Tasks

• Create HalftoneEffect.
• Create halftone demo.
• Add unit test.

Implementation Details

• Update the dot screen shader based on three's halftone shader

[balraj-johal]

I'd like to pick this up if possible, seems like an interesting one :)

[vanruesc]

Ok, thanks for the help!

[vanruesc]

Just checking in: would you like to stay assigned to this ticket?

[balraj-johal]

Hi @vanruesc, sorry for the radio silence! Yes I would still like to be assigned, my free time has been eaten by my day job but currently I have the shader compiling, and am getting my head around the modifications required, particularly sampling the color texture at multiple points.

[vanruesc]

No worries! Take your time.

I just took another look at the halftone shader in three and have some tips:

• Blending is already implemented in Effects
• Greyscale is already implemented via color grading
• width & height are already available via resolution.xy
• No need to support all shapes, dot is probably enough for a first implementation, but it's up to you
• The rand method is already available

Sampling at custom coordinates can be done like this: texture(gBuffer.color, coords);

[balraj-johal]

Thanks for the pointers!

One thing I was wondering about actually was if there's a way to assign to the output colour directly for debug purposes? For example, if I wanted to see an output of the pass directly without it being composited in the pipeline.

[vanruesc]

a way to assign to the output colour directly for debug purposes

No, effects are incomplete shaders after all and outputColor/gl_FragColor is overwritten at the end of the full shader. But the default blend function SrcBlendFunction basically does what you want.

If you want to render non-color data, do this: effectPass.fullscreenMaterial.colorSpaceConversion = false;

[balraj-johal]

Cool, thank you!