Image / Video Distortion Effect


I’ve been coding for a few years but I’m very new to Three JS and wanted to see if someone could point me in the right direction. I want to create a distortion effect on an image or video element with possibly a displacement map, however, I want to stretch or distort some of the pixels technically off of the HTML element (Imagine an image that doesn’t take up the full size of the canvas) but onto the empty canvas. My goal would be to eventually animate this effect but for now, I’m just trying to get the initial setup.


In this case, you should start with EffectComposer since you basically want to implement some sort of post-processing. There are a lot of different three.js examples about post-processing and even more interesting code on sites like shadertoy. Shadertoy code can of course be used three.js applications however it require some migration effort (in order to provide the same uniforms, textures etc.).

1 Like