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

OpenGL ディストーションエフェクト

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

(OpenGLのセットアップについては、こちらの記事が詳しいです)

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

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

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

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

OpenGL ディストーションエフェクト2

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

シェーダーで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);
OpenGL ディストーションエフェクト3

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

OpenGL ディストーションエフェクト4

▲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
編集:内田一良(じきるう)

 

こちらもおすすめ!▼

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ