Halftone/chromatic aberration effect on text

I am trying to figure out how to apply a chromatic aberration effect, combined with a halftone onto an image. Essentially, I have a logo that’s an SVG, and I’d like to load it in and change it so that the text goes from looking like image 1 to looking like image 2, with the aberration and a halftone texture. Is this possible, and is this even a good use case for Three? Thanks, all!

Plain i

With effect

You can render an svg like that in threejs… but it’s loading it, converting it to 2d/3d geometry, and then displaying it, at which point you can do things to it visually.. (but it won’t be an svg anymore. it will be a 3d model)

Yeah, converting from an SVG isn’t a problem, but I’m looking for the right direction to achieve the effect itself; masking, blur, chromatic aberration etc.

Ahh great. Yes! You can use the postprocessing stack.

Scroll through the examples on the left to see some of them.

Here are the relevant imports in the repo:

Halftone is in there, but I don’t see one for chromatic aberration, but that’s a pretty straightforward one to implement… or crib from shadertoy or the community.

1 Like