WebGLを使って画像の揺らぎのデモ

WebGL表現を必要とする実案件を想定し、Three.jsとGLSLによる画像トランジションエフェクトの技術検証デモを制作しました。

主な実装内容

・Fragment Shader / Vertex Shaderの独自実装

・5枚の画像をsin波による歪みエフェクトでシームレスに切り替え

・リサイズ時のアスペクト比の適切な再計算

・uniforms変数を通じたJavaScript ↔ GLSL間のパラメータ受け渡し

実案件でWebGL表現が求められた際に、技術的な実装可能性を判断できる基礎を習得することを目的として取り組みました。