『火華（かか）』｜WebGLとGLSLで描く、赤い軌跡の炎アニメーション
ヒノカミのように、空間を赤く切り裂く。
そんな演出を目指して制作したのが、今回ご紹介するWebアニメーション「火華（かか）」です。
マウスの動きに反応して、赤〜橙〜黄の炎が滑らかに揺らぎ、残像として画面に留まる。
このアニメーションは、一般的なアニメーションライブラリ（GSAPなど）ではなく、WebGLとGLSL（シェーダー）によって描画されています。
なぜGSAPではなくWebGLなのか？
GSAPは、DOM要素やCSSプロパティのアニメーションに強力な力を発揮します。しかし今回のような「流体」「炎」「残像」といったピクセル単位の演出は、GPUによる直接描画が必要です。
そこで登場するのがWebGL（ブラウザで使えるOpenGL）と、シェーダーと呼ばれるGLSLコードです。
この2つを用いることで、マウスの動きをリアルタイムに処理し、高速かつダイナミックな演出を可能にしています。
火華のコア：GLSLで描く炎の残像
このアニメーションでは、ユーザーのマウス移動を検出し、その軌跡に沿って「splat」と呼ばれる炎のようなエフェクトを描画しています。
splatの色は赤を中心に、橙や黄色、そしてときおり白に近い光が混ざることで、よりリアルな「燃え」を再現。
特に注目したいのは、以下のシェーダーコードです。
vec3 splat = vec3(
falloff * color.r * 1.0, // 赤は強く残す
falloff * color.g * 0.5, // 緑は控えめ
falloff * color.b * 0.2 // 青はほぼなし
);
このように、赤成分の減衰を最も少なくすることで、炎の「輪郭」に赤が強く残るように設計しています。
codepen
See the Pen 火華 kaka by masakazuimai (@masakazuimai) on CodePen.
参考コード：J_A Mediaさん この人すご。。。俺には思いつかない、、、
インタラクション：マウスで技を発動
このアニメーションは、マウスやタッチ操作に完全対応しています。
- マウスを素早く動かすと、赤い炎が尾を引く
- ゆっくり動かすと、じわっと燃える
- 画面を大きく動くと、まるで刀を振るったかのような演出に
また、コード内ではマウス移動ごとに色が揺らぐよう設計されており、同じ動きをしても炎の色味や勢いが毎回少しずつ違うのも特徴です。
WebGLでしかできない表現
この火華アニメーションで実現している「炎の自然な残像」「ゆらぎ」「粒子の合成感」は、CSSやJavaScriptのフレームワークでは到底再現できません。
理由は単純で、ピクセル単位で流体物理のようなシミュレーションをしているからです。
実際にコード内では以下のような処理が行われています。
- velocity（速度場）
- density（色素の濃度）
- divergence（発散）
- pressure（圧力解決）
- curl（渦度）
- vorticity（渦の制御）
これらを毎フレーム再計算し、画面に描画し続けることで「燃えるような軌跡」を表現しています。
拡張の可能性
このアニメーションは「基礎骨格」がしっかりしているため、演出を拡張することも可能です。
- 白い火花を一定確率で追加
- 火の尾を長く（SPLAT_RADIUSを増やす）
- フェードアウト時間を調整（DENSITY_DISSIPATION）
- クリックで爆発的なsplatを発生させる
- GSAPと連携してスクロールトリガーで発動
「火華」をベースにした、水柱バージョン、雷撃バージョンなども制作可能です。
おわりに
GSAPがアニメーションの世界を豊かにした一方で、WebGLはより本質的な“動き”や“自然現象”の再現に向いていると実感しました。
今回の「火華」は、そうしたWebGLの持つ“直感的に美しい動き”を活かしたアニメーションの1つです。
ぜひブラウザで触れてみて、その炎の中に何かを感じていただけたら嬉しいです。
記事はふざけ気味でも、コードはちゃんと考えました・・・
が、普通に見にくいですのでちゃんとコードを変更使ってください。
Webアニメーションに “熱” を込めたい方に、ぜひ試していただきたい技です。