
Everest · The Ascent
実測標高タイルで作った8,849mのエベレストをスクロールで登り切るWebGL体験。品質を実機に合わせて自動調整する。
- クレジット
- Suraj Viregonkar
- 使用技術
- Three.jsWebGL地形タイルスクロール連動サウンド
Suraj Viregonkar が1人で作った、ルクラ空港(2,860m)からエベレスト山頂(8,848.86m)までをブラウザで登るドキュメンタリー型の3D体験。13の登攀ステージに分かれ、各ステージに標高や環境データのカードが付き、最後は Epilogue: The Ledger として70年以上の登頂統計、死亡率、国籍・年齢構成、記録を可視化して締めます。
地形は架空ではなく実データで、AWS Terrain Tiles(Mapzen: SRTM / ASTER / GMTED / NED)の標高タイルに Esri World Imagery(Maxar)の衛星画像を貼っています。設定パネルからレンダリング解像度を 0.75倍〜1.5倍、アンチエイリアス、ブルーム、環境エフェクトを切り替えられ、フレームレートを見て自動的に品質を落とす仕組みが入っています。スクロールを離れると自由飛行モードになり、マウスルック+WASD+スペースで上昇できます。
【参考になるポイント】
・標高タイル配信サービスをそのまま地形メッシュに使う構成。データの出典(Mapzen / Esri / Maxar)をサイト上に明記している点も含めて参考になる
・夜明け・ゴールデンアワー・正午・夕暮れ・夜と、高度の進行に合わせてライティングが変わる。時間帯の切り替えがそのまま物語の進行になっている
・6幕構成のオリジナル楽曲が高度に同期し、サウンドのオン・オフを提供している
・ハードウェアアクセラレーション付きの WebGL が必要である旨をサイト自身が案内し、非対応環境をあらかじめ切り分けている
・※Awwwards のタグは Three.js / GLSL / WebGL だが、ページ本文からシェーダ名やバンドル構成は確認できなかった
