環境マッピングで描く反射・屈折表現とマウスに連動するゆがみエフェクト

note

WebGLとGLSLを用い、キューブマップの環境マッピングを基盤に球体に屈折と反射をブレンドしたガラス表現を実装しています。マウス位置に追従する滑らかな頂点変形と、ポストプロセスの色収差により、視線や操作に反応する揺らぎを強調し、シャボン玉のようなビジュアルを再現しています。また、ドラッグ操作で視点を回転させると360°でシーンを見渡せます。

まずキューブマップ背景を設定し、球体は屈折ONで描画します。フラグメントシェーダーでは屈折/反射ベクトルを計算し反射率を決め、透ける側には軽いブラーを掛けてガラスのような見た目を出しています。別パスでは頂点シェーダーでフロー系ノイズとマウス座標から重みを作り、表面を微小に揺らしてその量をマスクとして書き出します。ポストプロセスではシーンカラーとマスクを参照し、近傍の勾配とぼかしで内側の重みを作って、色収差（RGBのUVずらし）をソフトに合成。全体はフレームバッファー上で「マスク → シーン → ポスト」の順に処理し、フルスクリーンの板ポリゴンで最終出力します。

ヒーローヘッダーやブランドサイトのキービジュアル、製品のガラス質感デモ、インタラクティブなロゴ表現などに適しています。パラメーター調整により強いガラス感から繊細なゆらぎまで幅広くチューニングでき、ユーザー操作に追従するマイクロインタラクションとしても活用できます。

【使用ライブラリ】 Three.js