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)

34,000人以上が使う!日本最大級のフリーランス・副業向けマッチングサービス『Workship』

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・副業向けマッチングサービス『Workship(ワークシップ)』が、そんな悩みを解決します!

  • 34,000人以上のフリーランス、パラレルワーカーが登録
  • 朝日新聞社、mixi、リクルートなど人気企業も多数登録
  • 公開中の募集のうち60%以上がリモートOKのお仕事
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

利用料は一切かかりません。一度詳細をのぞいてみませんか?

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。

SHARE

RELATED

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