WebGL – Shader 波エフェクト

2019.12.19

はじめに

今回は、GLSLシェーダーで波紋風のイメージエフェクトをかけていきたいと思います。
シェーダーを使いWebページに立体感とリッチな表現を持たせることが期待できます。

開発環境

p5.jsを使ってWebで動く形で波紋風表現を実装していきます。
p5jsはProcessingのJavaScript版といった感じで、WEBGLによる3D表現や映像・音声といったメディアをブラウザで実行することができます。

また、ml5.jsと組み合わせれば、画像分類や音声分類といった機械学習や、有名なStyleGanやpix2pixといったディープラーニング系のモデルも簡単に入れ込むことができます。
公式サイトにたくさんサンプルが乗っていたり、クリエイティブコーディングを誰でもできるようにしたという点でも、最近注目しているフレームワークです。

実装

p5.js側でビデオを読み込み、テクスチャ情報としてシェーダーに渡します。
シェーダー側で色情報をいじくることで波面のような表現を実装していきます。

p5.js側の実装

ビデオを読み込み、シェーダーに渡すスクリプトを書いていきます。
shader.setUniform(‘関数名’, 値)』でshader側の変数に値を渡すことができます。

以下の表にシェーダー側に渡している変数をまとめます。

変数名 説明 シェーダー側での型
tex0 ピクセルデータを渡す sampler2D
iResolution 画面解像度 vec2
iTime 時間経過 float
iMouse マウス座標 vec2

 

 

shaderの実装

次にシェーダを書いていきます。シェーダには何種類かあり、今回はそのうちのフラグメントシェーダーとバーテックスシェーダを使います。
フラグメントシェーダは、主にピクセルの色を取り扱うシェーダーで、バーテックスシェーダーは頂点情報を取り扱うシェーダになります。

まず頂点座標を取り扱うバーテックスシェーダーを書いていきます。
今回は頂点座標は特にいじらないので、単純にテクスチャ座標に渡しています。

また、『varying 型名 変数名』でフラグメントシェーダーに値を渡しています。
今回はテクスチャ座標(uv座標)を渡しています。

バーテックスシェーダー

 

フラグメントシェーダー

次にフラグメントシェーダーを書いていきます。
『varyring 型名 変数名』でバーテックスシェーダーから値を受け取れます。
今回はテクスチャ座標を受け取っているので、変数『uv』に渡します。
21行目では、uv座標系とp5.jsのキャンバスの座標系が逆さまなのでそちらを直しています。
23行目でテクスチャ座標をビルドインのコサイン関数とiTimeでアニメーションさせています。
ビルドイン関数『texture2D』で実際のテクスチの色情報とテクスチャ座標を対応づけます。
RGBAの4チャンネル持つ4次元ベクトルとして受け取り、最終的に『gl_FragColor』に入れることで出力されます。

 

まとめ

ブラウザでも高速なビデオエフェクトを実現できるのは、シェーダーの強みといったところでしょうか。
今後もシェーダーを使ったリッチな表現の実験は続けていきたいと思います。