Unity URP 炎シェーダの作り方｜HLSLで揺らぎと発光を表現する完全ガイド【WebGL対応】
Unity URP 炎シェーダの作り方｜HLSLで揺らぎと発光を表現する完全ガイド【WebGL対応】
Unity URP環境で「リアルな炎」をHLSLシェーダで表現する方法を詳しく解説します。
ゆらぎ表現、Radial Shear、Emission制御に加え、WebGLでの表示エラー「ピンク表示」の原因と対策まで紹介。
個人開発者による実体験をもとに、初めてでも再現できる内容にまとめました。
第1章：Unity URPでHLSLによる炎シェーダの基礎設計
Unity URPでリアルな炎シェーダを作るために取り入れた技術要素を紹介します。
ノイズを用いたゆらぎの実装（Gradient Noise）
炎の自然な揺らぎを再現するため、Gradient Noiseを使ってノイズパターンを生成。
frac(sin(dot(...)))を用いたハッシュ関数ベースで実装しています。
UVのRadial Shearによる歪み表現
炎が上昇するような錯覚を与えるために、UVを時間軸に沿ってラジアル方向に変形させています。
EmissionとColor制御による発光表現
中心部の発光は、EmissionMap・EmissionColor・強度の3要素で制御し、Bloom効果も狙っています。
アルファカットとレイヤー合成
炎の外縁を自然に見せるために、アルファマスクとStep関数を活用してグラデーション状に合成。
第2章：HLSL実装コードと構成解説
ここでは実際のShaderコードの構成と処理の流れを紹介します。
主要処理コード
float Hash_LegacyMod(float2 uv)
{
return frac(sin(dot(uv, float2(12.9898, 78.233))) * 43758.5453);
}
処理の流れ
- UVにRadial Shearを適用
- ノイズ2種を掛け合わせて炎の揺らぎを演出
- 発光・アルファ値を計算し最終合成
- EmissionMapを元に発光処理
第3章：Unity上での実演と成果
実際にUnityで再生した様子をGIFでキャプチャしました。
[図2: 炎シェーダの実演]@gist
- 中央が明るく、周囲がゆらいでいる炎の表現
- 揺らぎと歪みの連動
- Alpha Clipによる自然な透明表現
第4章：WebGLビルドでのピンクエラー原因と対策
WebGLで「ピンクの正方形」しか表示されない問題に直面しました。
エラー内容
WebGL: INVALID_ENUM: getInternalformatParameter: invalid internalformat
原因と仮説
- URPのHDR設定で
RGBAHalfを使っていた → WebGL未対応 - Renderer FeatureでBloomが有効だった → WebGLと非互換
- カスタムShaderに不正な型 or 命令が含まれていた
![図3: ピンクエラー表示例]
第5章：今後の対応と改善方針
Shader Graph版への移植
より柔軟に調整しやすく、WebGL対応もしやすいためShader Graph化を検討中。
軽量版の別バリアント追加
Shader Model 2.0 / GLES2.0対応を考慮し、次回はより互換性の高いバージョンも制作予定。
#pragma target 2.0
#pragma only_renderers gles gles3
第6章：おわりに｜炎シェーダ制作のまとめ
本記事では、Unity URPでHLSLを使った炎シェーダの設計と実装、さらにWebGLへの展開と課題までを紹介しました。
- ノイズ・歪み・発光の3要素でリアルな炎表現を再現
- 実演GIF付きでシェーダの動きを視覚的に確認
- WebGLの落とし穴と対策を開発者目線で共有
関連リンク
- 🔗 GitHubリポジトリ：shader_URP_Demo
- 🔗 itch.ioデモ公開：URP Fire Shader WebGL
- 📘 参考：Unity公式URPドキュメント（英語）
著者について
Unity・Blender・Shader技術を用いた開発と自動化に興味のあるフリーランスエンジニア。
未経験から炎シェーダを開発し、公開まで行った過程を記事化しました。
Discussion