OGLを使って、マウスカーソルに連動したディストーションエフェクトを生成する方法

• デモページ
• ソースダウンロード

今回はWebGLのフレームワークである「OGL」を使用して、マウスの位置と速度に連動して変化する、インタラクティブなディストーションエフェクトを生成する方法をご紹介します。

OGLを使って、マウスカーソルに連動したディストーションエフェクトを作る

画像を変形させるためには、OGLが提供する追加機能を使いましょう。

Flowmap: import { Flowmap } from "./src/Extras.js";

上記のようにセットアップすると、以下のアニメーションが追加されます。

たったこれだけで、簡単にマウスカーソル連動のインタラクティブなディストーションエフェクトが追加できるのです。

シェーダーで2つのテクスチャを組み合わせると、このエフェクトのコンセプトをより理解できるでしょう。

// R and G values are velocity in the x and y direction
// B value is the velocity length
vec3 flow = texture2D(tFlow, vUv).rgb;
// Use flow to adjust the uv lookup of a texture
vec2 uv = gl_FragCoord.xy / 600.0;
uv += flow.xy * 0.05;
vec3 tex = texture2D(tWater, uv).rgb;
gl_FragColor = vec4(tex.rgb, 1.0);

最後の行のtexをflowに置き換えると、以下のとおり。

gl_FragColor = vec4(flow.rgb, 1.0);

▲新しく生成したテクスチャ。エフェクトの軌跡がよく分かる

▲2つのテクスチャを組み合わせたもの

エフェクトの作成方法と使用方法は分かりましたか？

なおフローマップは以下のように、さまざまなパラメーターを操作できます。

// for example
const flowmap = new ogl.Flowmap(gl, { falloff: 0.2, dissipation: 0.9 });

【利用可能なパラメーター】

名前	デフォルト値	説明
size	128	レンダーターゲットのデフォルトサイズ
falloff	0.3	スタンプのサイズ（％）
alpha	1	スタンプの不透明度（％）
dissipation	0.98	スタンプがフェードする速度（1に近いほど遅い）

 

（執筆：Robin Delaporte　翻訳：Sato Mizuki　編集：Uchida Kazuyoshi）