📝 はじめに
このデモは、貼り付けられたOGLのFlowmapコードを、JUNKBRANDINGのSVGテキストマスク付きReactコンポーネントへ分解したものです。WebGL側は Component.jsx の useEffect() で初期化し、シェーダーは shaders.js、見た目の固定配置とブレンドは styles.css に分けています。
ポイントは、キャンバス自体を直接マスクするのではなく、白背景に黒い JUNKBRANDING テキストを置いたレイヤーへ mix-blend-mode: screen を使うことです。黒い文字部分だけ下のWebGLが見え、白い部分は白として残るため、CSSだけで抜き文字のような見せ方ができます。
🛠️ 実装のポイント
- React側でWebGLのライフサイクルを閉じる
OGLの
Renderer、Flowmap、Program、MeshはuseEffect()内で作成します。返り値のクリーンアップでrequestAnimationFrame、resize、pointerイベント、生成したcanvasを破棄することで、記事プレビューを切り替えても処理が残らないようにしています。 - シェーダーを別ファイルに分ける
GLSL文字列はJSX内に置くと見通しが悪くなるため、
shaders.jsに分離しています。fragment shaderではFlowmapのRGB値を使って赤、緑、青のUVを少しずつずらし、ポインターの動きに色収差を重ねています。 - SVGテキストをマスクとして扱う
ロゴは
text要素でJUNKBRANDINGとして描画し、CSSの.flowmask-wordで太さとサイズを管理しています。パスデータではなく文字列で管理できるため、ブランド名の変更や字間調整が簡単です。
💡 使いどころとカスタマイズ
- 最適なユースケース: ブランドロゴのファーストビュー、音楽・ファッション系LP、展示会やキャンペーンサイトのキービジュアルに向いています。
- 調整ダイヤル（パラメーター変更のヒント）:
falloffを0.18に変更すると、ポインター周辺だけが鋭く歪む表現になります。- fragment shader内の
flow.xy * 0.18を0.28に上げると、色ズレと波打ちが強くなります。