タービュレントディスプレイスを JS で実現する - SVG フィルタとシェーダで作る乱流ゆがみ
約14分
After Effects の Turbulent Displace（タービュレントディスプレイス）を Web/JavaScript で再現する方法を整理します。実は SVG の feTurbulence + feDisplacementMap がほぼそのままの等価機能で、Amount/Size/Complexity/Evolution といった AE のパラメータが SVG 属性に対応します。インタラクティブデモ、画像や DOM への CSS filter 適用、requestAnimationFrame による Evolution アニメーション、そして自由度の高い WebGL/GLSL シェーダ版・Canvas 版まで、MDN を一次ソースにまとめます。
