作者: 希彼赫
ライブで試す このプロジェクトについて
「森の小鹿」は、ブラウザで動くリアルタイムの three.js シーンです。屋久島のような巨大な杉林を一頭の小鹿が歩き、樹冠のすき間から陽の光が幾筋も差し込み、草は風に揺れ、蝶が花のまわりを舞います。小鹿を連れて散歩したり、林の中の光の粒を集めたり、昼と月夜を切り替えたり。シネマティックカメラに任せて、ページ内でそのまま動画を録ることもできます。
小鹿は Tripo API で生成し、スマートローポリ、リガビリティチェック、四足歩行のオートリギングを経て、リグ付きの GLB として書き出しました。森はすべてコードによるプロシージャル生成です。テクスチャは Poly Haven（CC0）のものを使用しています。
キーボードのあるデスクトップのブラウザで遊ぶのがいちばんです。スマートフォンでは、地面をタップすると小鹿がそこへ歩き、ドラッグで視点を回転できます。
体験ポイント
- WASD で小鹿を歩かせるか、地面をクリックしてそこへ向かわせる。Shift を押している間は小走り、ドラッグで視点を回転
- 光る粒の中へ歩いていくと拾える。9 個すべて集めると風鈴が連なって鳴り、光の柱がいっせいに輝く。E を押すか小鹿をクリックすると、顔を上げてこちらを見る
- R で昼と月夜を切り替え、G で一陣の風。草が伏せ、蝶が散っていく
- C でシネマティックカメラ、V でページ内のまま音付きの動画を録画。H でキー操作パネルを隠す
技術解説
小鹿 · Tripo で生成して自動リギング
小鹿は Tripo API のパイプラインから生まれました。モデル生成、スマートローポリ、リガビリティチェック、四足歩行のオートリギングを経て、約 15,000 三角形、41 本のボーンからなる四足骨格と PBR テクスチャを備えた GLB として出力されます。ページでは GLTFLoader で読み込み、頭の高さが約 1.55 m（ニホンジカの体格）になるようスケールを揃えています。
Tripo のリグは命名がきれいに整理されています。4 本の脚はそれぞれ Limb_0〜Limb_3 に分かれ、背骨・首・頭も順番に番号が振られているので、コードは名前だけで各脚・背骨・首を見つけて直接動かせます。ボーンを 1 本ずつ手作業で対応付ける必要はありません。毛色はシェーダーでニホンジカの夏毛らしい赤褐色に調整し、背中に沿って淡い斑点を一列に散らしています。斑点はバインドポーズの座標に固定しているので歩いても体の上で滑らず、逆光では毛並みの縁に暖かな光がにじみます。
歩き方 · リグの上でその場で計算する歩行
歩行は、ページの読み込み時にこのリグの上で IK を使ってその場で計算しています。まず蹄の軌道を決めます。接地中の蹄は体の速度とぴったり同じ速さで後ろへ流れ、空中では持ち上がって前へ伸び、また着地します。脚は左後ろ、左前、右後ろ、右前の順に踏み出し、それぞれ時間の約 7 割を接地していて、体はわずかに上下し揺れるだけです。各脚は上下の区間をバインドポーズの角度に保つ 3 区間の IK で解き、前脚を上げるときは手首をもうひと折りします。歩行全体を 48 フレームのループアニメーションにベイクし、AnimationMixer で再生します。
再生速度は「体の速度 ÷ 蹄が後ろへ流れる速度」で換算するので、ゆっくり歩いても Shift を押して小走りしても、蹄が地面を滑ることはありません。立ち止まると、コードが背中の上部から頭までの 4 本のボーンを回し、小鹿はしばらく草を食んでから顔を上げて横を眺め、また頭を下げます。そして歩き出した瞬間、首がすっと持ち上がります。
杉林 · コードで育てた森
小鹿以外、森の中のものはすべてコードで生成しています。テクスチャは Poly Haven の CC0 素材（杉の樹皮、苔むした岩、林床）の 3 種類だけです。巨杉の高さは約 44 m。手前の主役の木には個別のメッシュを使い、奥の列は InstancedMesh でまとめて描画しています。幹の曲がりはシェーダーと JS で同じ式を使っているので、枝が曲がった幹から離れることはありません。巨杉のあいだには 8〜17 m の若木の層があり、低木、シダ、岩、倒木が林の下層を埋めています。
地面には 12 万本のインスタンス化した草の葉を敷き詰め、頂点シェーダーで揺らしています。G を押すと 6 秒間の突風が吹き、草がなびいて蝶が散ります。草は小鹿の位置も把握していて、そのまわりでは外側へ倒れます。18 匹の蝶は花のまわりをのんびり舞い、小鹿が近づくと驚いて飛び立ちます。葉柄と葉脈まである 70 枚の落ち葉は、くるくる舞い落ちながら、光の柱を通るときに照らし出されます。
光と影 · ボリューメトリックな光の柱と木漏れ日
樹冠は数百個の平たい葉の塊で組み立てています。塊を一つ置くたびに太陽光の方向に沿って地面へ投影し、あらかじめ決めた 29 か所の光の柱の落下点を避けているので、光の柱が一本一本分かれて差し込みます。ボリューメトリックライトは視線に沿って少しずつ太陽のシャドウマップをサンプリングし、半解像度で散乱を計算したうえで、遠景のフォグ、ACES トーンマッピング、ブルーム、FXAA と順に合成して画面を仕上げます。
影は PCSS のソフトシャドウに書き換えていて、遮るものから離れるほど輪郭がやわらかくなります。樹冠から漏れる光の斑点は光源空間でまとめて計算するので、草も樹皮も小鹿も光の柱も、同じ模様を共有します。空気中の塵は光の柱の中でだけ光り、影の中ではほとんど見えません。R を押すと 3 秒かけて夜へ移り変わり、太陽は冷たい月光に変わって光の柱は弱まり、光の粒はホタルのように灯ります。
カメラと録画 · ページ内でそのまま撮影
C を押すとシネマティックカメラに切り替わり、小鹿のまわりをゆっくり旋回しながら高さを上下させ、UI はすべて消えます。V を押すと録画が始まり、MediaRecorder が WebGL キャンバスと音を 60 fps・16 Mbps でそのまま記録します。ブラウザが対応していれば MP4、そうでなければ WebM で保存します。録画中は画質レベルを固定するので、途中で解像度が変わることはありません。
音はすべて Web Audio でその場で合成しています。光の粒を拾うたびに風鈴が鳴り、その音程はペンタトニックスケールに沿って上がっていきます。風が吹けば風の音。普段はフレームレートに合わせて解像度を自動調整し、コマ落ちすると一段下げます。1 / 2 / 3 キーで低・中・高画質を手動で固定することもできます。
