アポロ計画の資料を 3D 空間にマッピング！ニューヨーク・タイムズが送る WebGL 製ドキュメンタリー

doxas : 2019-07-23 13:59:46

実際の空間に写真を配置

今回ご紹介するのは、ニューヨーク・タイムズのウェブサイトで公開されている、WebGL を利用したインタラクティブなドキュメンタリーコンテンツです。

縦長にスクロールしていく構成の今回のサイトでは、アポロ 11 号とその乗組員たちの、月面での活動を撮影した写真をもとに、WebGL のインタラクティブなコンテンツが展開されています。

非常に完成度が高く、ドキュメンタリーとして見てもとても興味深い内容になっています。

今回のサイトでは、非常にページが縦に長くレイアウトされていて、スクロールを行っていくことでコンテンツが先に進んでいく作りになっています。

冒頭部分は、主に文章や画像が多めになっていますが、背景には WebGL のレンダリングに使われる Canvas が置かれていて、これがスクロールしていくと浮かび上がってくるような構成です。

最初の方に書かれているものを見ると、写真をつなぎ合わせると風景がおぼろげに見えてくるということの意味が、なんとなくわかりやすいかなと思います。

複数の写真を組み合わせることによって、現場の景色がより広がりを持って見えてくるわけですね。

今回のサイトでは、さらにスクロールを続けていくと月面を再現した 3D のビューが浮かび上がってきます。

ここでは白いラインで枠のようなものが描かれていて、そこにそれぞれなにかしらの写真がはめ込まれるようになっています。

ちょっとわかりにくいかもしれませんが、下の画像を見てもらうと、宇宙服を着た乗組員がはしごを降りているところが映っていますよね。

実際の写真と、3D で描かれる CG とが、ぴったりと重なるように意図的に作られていて、スクロールに連動して当時の月面の様子がつぎつぎと再現されていきます。

風景の質感や色合いも似通った風合いに調整されていて、本当にリアルにその当時の様子を思い描くことができます。

超有名な、あの月面の足跡の様子も、確認することができます。

ニューヨーク・タイムズのウェブ版記事では、こういった 3D シーンを活用した情報提供の形が随分前から取り組みとして行われています。

今回のコンテンツは月面着陸から 50 周年ということで企画されたものなのかなと思いますが、本当に完成度が高くて驚きました。

使われている画像やモデルデータがロード完了していない場合、背景がずっと無意味に黒いままでなにも表示されなかったりするので、通信環境が安定している状態で閲覧するのがおすすめです。

こういった形でメディアが情報提供してくれるというのは、本当にすごいですね…… 日本でも、こういうのをもっと一般化させていきたいと考えさせられました。