BizOn! Ads

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

フェード

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

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

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

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 編集:Uchida Kazuyoshi)

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
週2日20万円以上のお仕事多数
Workship