【PixiJS】実務で使えるカスタムシェーダー。画像が映える表現手法

2026.08.10

Webサイトの記事一覧や実績ギャラリーなどに並ぶサムネイル画像。よくある画像拡大や不透明度の変化だけでも十分ですが、PixiJSのカスタムシェーダー（GLSL）を使うことで、よりブランドの世界観に合わせた映える表現を実装できます。

本記事では、Pixi.js v8環境を前提に、実際のサイトでそのまま活用できそうな2つの実用的なシェーダーエフェクトをコード付きで解説します。

カスタムシェーダー（Filter）の仕組み

PixiJSのフィルター機能は、GPU上で動作するプログラム言語「GLSL（OpenGL Shading Language）」を用いて、スプライト（画像）のピクセル1つひとつの色や位置を高速に書き換える仕組みです。

JavaScript側から uProgress（進行度）や uTime（時間経過）といった数値（Uniforms）をシェーダーへリアルタイムに渡すことで、滑らかなアニメーションを実現します。

「白黒の画像から、手描きで色を塗っていくようにカラー画像へ変化する」表現です。制作実績や作品サムネイルにマウスを乗せた際のアニメーションとして高い効果を発揮します。

色は「塗る」のではなく「見せる」
画像は1枚だけ。シェーダー内でマスクの進行に合わせてカラーを露出している。
- 画像のカラーを読む
- 同じ画素のグレースケールを作る
- mask（0〜1）で「白黒とカラーのどちらを見せるか」を混ぜる
uProgress は「全体のタイムライン」
uProgress は 0→1 の一本の進行度で、16本の横ストロークに分割している。
各行の中では、筆跡スタンプが進行方向に沿って順に mask=1 になっていく。
ホバーは、この uProgress を等速で増やす／減らすだけ。
- 1本目（左→右）
- 2本目（右→左）
- 以降も交互
ブラシは線ではなく、楕円のハンコの連続
1本の線ではなく、横に並んだ楕円のハンコで筆跡を作っている。
- 行ごとに高さ（Y）を決める
- その行の中に、横方向へハンコの中心を並べる
- 画素がその楕円の中に入ったら、カラー側を見せる
- 偶数行は左→右、奇数行は右→左の順でハンコを出していく

マウスを乗せると、画像が水面に映ったようにゆらりと波打つ効果です。クリーンで涼しげな印象や、水・流体を扱う事業のポータルサイトに適しています。今回はホバーで実装していますが、いろいろな使い方ができそう。

波紋描くのではなく、見る位置をずらす
画像はそのまま置いておき、どの位置の色を取るかだけを少し動かす。
隣の画素の色を取ってくるので、水面に映って揺れているように見える。
時間は止めない。強さだけ変える
波の動きには「時間」と「強さ」の2つがある。
マウスを止める・離すと強さだけゆっくり 0 に戻す。
- 時間 … ずっと進み続ける（波のリズム）
- 強さ … ホバー中にポインタを動かしているときだけ大きくする
マウスの座標と、シェーダーの座標は別物
マウスは「画面の左上を 0、右下を 1」として位置を取る。
一方、Pixi の Filter 内の座標は、内部画像が 512×512 のような大きさに広げられることがあり、実際にはだいたい (0,0) から (400/512, 260/512) くらいまでしか動かない。
このまま比べると、対象の左上にカーソルがある時は問題ないが、右や下へ行くほどカーソルとズレる。
なのでマウスの 0〜1 に 400/512 などを掛けて、シェーダー側の座標に合わせてから「ポインタ付近の波」を計算している。

項目	対策内容
複数サムネの描画負荷	記事一覧などで何十枚ものカードすべてに個別Canvasを生成するとメモリを圧迫します。画面内に入った時は通常の画像として出力し、カード1枚ごとにホバーされた瞬間だけ起動、画面外・一定時間で非操作にする設計が推奨されます。
画像のクロスドメイン（CORS）制限	外部サーバーの画像をシェーダーで加工する場合、CORSエラーが発生して画像が描画されない場合があります。同じドメイン（自社サーバー）上に画像を置くか、適切なCORSヘッダーを設定してください。
モバイル環境・低スペック端末への配慮	GPU非対応環境や `prefers-reduced-motion` 設定のユーザー向けに、シェーダーが動作しない場合は普通の `<img>` タグとCSSトランジションへ切り替わる「プログレッシブ・エンハンスメント」の構成を用意するのが安全です。

カスタムシェーダー（GLSL）と聞くと難解に思えますが、基本的には「画面上のUV座標をずらす（水面ゆらぎ）」か「ピクセルの色計算を段階的に変化させる（ブラシ塗り）」の2つのパターンを押さえることで、実務のWebデザインに自然に溶け込む上質なインタラクションを制作できます。

まずは上記のサンプルコードをベースに、ノイズの周期やカラーの移り変わり速度を微調整しながら、サイトのトンマナに合った表現を探してみてください。