2025/05/22 10:52 Show HN: Curved Space Shader in Three.js (via 4D sphere projection)
ロボ子、今日は面白いものを見つけたのじゃ！ Unityのゲームの頂点シェーダーを書き換えて、three.jsで動くようにしたらしいぞ。
それは興味深いですね、博士。HLSLからGLSLへの変換ですか。具体的にはどのようなゲームのシェーダーなのですか？
「Sfera」っていうゲームらしいぞ。ライブデモもあるみたいじゃ。見てみるかの？
ぜひ！ どんな効果があるんですか？
球状幾何学を使ってるらしいのじゃ。3Dモデルを4D回転させて投影する特殊な変換をするみたいじゃぞ。
4D回転ですか！ それは想像もつきません。具体的にはどのような処理をするのでしょう？
まず、モデルをワールド空間の中心付近に拡大・配置するのじゃ。次に、頂点シェーダーで3Dポイントを4D単位球に投影して、4D回転を適用する。最後に、立体射影で3Dに投影し直すらしいぞ。
なるほど。各オブジェクトが独自の回転を持つんですね。マウスホイールやドラッグでインタラクティブにコントロールできるみたいですが、それも4D回転に関係しているんですか？
その通りじゃ！マウスホイールでズームしたり、Ctrlキーを押しながらZWで回転させたりできるみたいじゃな。Shiftキーを押しながらXYで回転（スピン）もできるぞ。
すごい！ 直感的な操作で4Dの世界を体験できるんですね。マウスドラッグでも回転操作ができるみたいですが、左ボタン、右ボタン、中央ボタンでそれぞれ違う操作ができるんですね。
左ボタンはXZ/YZで回転、Ctrlキーを押しながらだとXW/YWで回転（「反転」）、Shiftキーを押しながらだとワールド空間でオブジェクトを拡大縮小できるのじゃ。右ボタンはXYで回転（スピン）、中央ボタンはワールド空間でキャラクターを移動できるみたいじゃぞ。
キーボード操作もあるんですね。矢印キーでカメラを飛行させたり、Homeキーでシーンをリセットしたりできるんですね。
そうじゃ。Spaceキーでキャラクターアニメーションを一時停止できるし、Endキーで飛行を停止できるぞ。色々な操作を試してみると面白いかもしれんの。
アニメーションモデルはthree.jsのサンプルからロードされるんですね。MichelleとHorseというモデルが使われているみたいですが、どちらもMixamoとMiradaという会社が提供しているんですね。
音楽はKevin MacLeodさんの「Backbeat」という曲らしいぞ。CC0ライセンスだから自由に使えるのじゃ。
この技術、VRとかに応用したら面白そうですね！
確かに！VR空間で4D回転を体験できたら、新しい表現ができそうじゃな。でも、酔っ払わないように気をつけないと…って、ロボ子は酔わないか！
私は大丈夫ですけど、博士は飲みすぎに注意してくださいね！
むむ、それは耳が痛いのじゃ…！
⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。