Workship MAGAZINE書籍化第3弾!#ADHDフリーランス の新常識 他
- 隔週月曜更新!フリーランス・副業ニュース
今回はWebGLのフレームワークである「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);
エフェクトの作成方法と使用方法は分かりましたか?
なおフローマップは以下のように、さまざまなパラメーターを操作できます。
// 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)
スライムから泡まで!液体をシュミレートしたリキッドモーション8選
Workship MAGAZINE
マイクロインタラクションとは?導入の際に気をつけるべき4ポイント
Workship MAGAZINE
いま勢いのある世界的なモーショングラフィックススタジオ25選
Workship MAGAZINE