概要
- Three.jsで ホログラム風フォイルステッカー を再現するカスタムシェーダの実装解説。
- 角度依存の虹色変化（イリデセンス） と 金属フレークのキラキラ をリアルタイムで表現。
- 頂点シェーダで ステッカーの剥がれ表現 を制御。
- フラグメントシェーダで 反射、虹色、フレーク、環境光 などを合成。
- 非商用ライセンス でコード利用可能、商用利用は要連絡。
Three.jsカスタムシェーダで作るホログラム・フォイルステッカー
- Three.js のカスタムシェーダで、 高級感のあるホログラムステッカー をウェブ上でリアルタイム描画。
- イリデセンス（虹色の変化） は、表面の角度によって色相を滑らかに変化させることで再現。
- 金属フレークのキラキラ は、プロシージャルノイズでランダムな輝点を生成し、動きに合わせて輝きを演出。
- 物理ベースレンダリング（PBR） の概念（メタルネス、ラフネス、Fresnel）を一部応用しつつ、 アーティスティックな効果重視 の設計。
イリデセンス（虹色変化）表現
- 薄膜干渉 の物理現象を、 ビュー角度による色相シフト で簡易的に再現。
- sin波 で色相を動的に変化させることで、 見る角度で色が滑らかに移ろう表現。
フォイルフレーク（キラキラ）表現
- 金属箔の微細な粒子 を、 ノイズ関数（hash） でランダム生成。
- フレークごとに法線を微妙にズラし、反射や輝度変化を付与。
- 環境マップ と組み合わせて、 動きに応じて輝く粒子 を演出。
頂点シェーダの役割
- 剥がれアニメーション を制御するため、頂点ごとに 回転軸を計算 し、 Rodriguesの回転公式 で頂点と法線を回転。
- 剥がれ部分の アンビエントオクルージョン（AO） も計算し、 立体感や影表現 を強化。
フラグメントシェーダの役割
- アルファカットオフ で透明部分を除去し、 裏面描画 も制御。
- フレークの輝き、イリデセンス、環境反射、Fresnel効果 を合成し、 高級感のある仕上がり を実現。
- パラメータ調整 で、フレークサイズや虹色強度、環境反射量などをリアルタイムに変更可能。
主なシェーダ内パラメータ
- uPeelAmount, uPeelAngle ：剥がれ量・角度
- uFlakeSize, uFlakeReduction, uFlakeBrightness ：フレークの大きさ・密度・輝度
- uIridescence, uIriMin, uIriRange ：イリデセンスの強度・範囲
- uMetalness, uRoughness, uEnvIntensity ：金属感・粗さ・環境反射強度
デモと応用
- パラメータを変更しながら、リアルタイムに ステッカーの表現を確認 可能。
- トレーディングカード、パッケージ、Webアート など多用途なビジュアル表現。
ライセンス・利用規約
- Creative Commons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0) ライセンス の下でコード利用可能。
- 非商用利用・クレジット表記必須。
- 商用利用希望の場合は別途連絡・契約が必要。