Distortion to SVG/image, please help

Questions
,
1

Could anyone help me please or have any ideas how I could find help to add animated distortion (water-like) and possibly texture (noise or pencil/charcoal-like) to a static svg illustration.

Preferably something like this: puddle │ sketch of three.js
(the source is MIT/available, but is overwhelming for a novice)

I’d greatly appreciate any clues.

2
  1. It’d be hard to do for non-rasterised SVG image. So first things first, load your SVG into three.js canvas using SVGLoader (do not use SVGRenderer, just the normal WebGLRenderer.)
  2. After you have your SVGs loaded, add it as a Plane to your scene. Then you can add that kind of bubble distortion using either shaders (which can be hard at the beginning), or just using MeshBasicMaterial.alphaMap (you can increase alphaMap.offset over time, it will create a water flow effect as the texture will be scrolling on the plane surface) together with .alphaTest value changing dynamically between 0.25 and 0.75.
1 Like
3

Thank you very much for your response. I’ll be following it.

Do you think it would be possible to use these shaders directly: sketch-threejs/src/js/sketch/puddle/glsl at main · ykob/sketch-threejs · GitHub
(I’m after this kind of a look) ?