樹木が持つエコシステムを 3D でビジュアライズして見せる Nature beyond technology がおもしろい
なんのために作られたものなんだろう
今回ご紹介するのは Nature beyond technology というウェブサイトです。
こちらのサイト、どういう文脈があって公開されているものなのかイマイチよくわからないのですが、内容を見るとどうやら自然界、とりわけ樹木の持つ強力な自然のエコシステムについて説明するような内容になっています。
すごく 3D の使い方が上手で、視覚的にもわかりやすく解説が行われています。
リンク：
スクロールに連動してセクションが変化
今回のサイトは構造としては縦に長いページをスクロールしていく、という形なのですが、いわゆる DOM がスクロールで流れていくという普通の構造ではなく、スクロール操作に応じて 3D シーンに変化が起こるという建付けになっています。
スクロール操作が速すぎたりすると、必要な説明文が出る前にページが次々進んでいってしまったりするので、じっくりと観察しながら進むのがちょうどよいという感じのコンテンツですね。
UX としては、逆に閲覧する側がそこに気を配らないといけないので、そういう意味ではユーザーに優しい体験ではないのがちょっと残念なところ。
この上のスクリーンショットを見ると「SOLAR PANEL NETWORK」と書かれている部分がありますが、こんなふうに自然界の樹木が持つ機構や能力を、人間の技術に当てはめるような感じで説明が重ねられていきます。
たしかに木々の葉はソーラーパネル的な機能を持ってはいると思いますけれども、厳密には全然違う機能のものであり、そのあたりはあくまでも比喩として表現しているのだと思います。
半透明の薄いシルエットとして描かれる大木は、背景の要素として常に描かれ続けます。
なかには、ポストエフェクト的に演出を行っている場面もあります。
これスクリーンショットではほとんど見えないと思いますが、途中、雨が降っていることを示唆するようなシーンでは、ガラスに雨粒が落ちたときのように水滴が描かれたりします。
こういう細かい演出もあって、ビジュアルにはたくさんの工夫が凝らされていることを感じることができると思います。
しかしこのサイト、いったいどういうコンテキストで公開されているのかサイト内に説明らしい説明がなく、どういう理由で作られたのかがわかりません。
いわゆる自然保護的なものを目指したサイトなのか、それともなにか具体的なプロジェクトに関連したものなのか…… 英語の読解力が高ければわかるのかもしれませんが、わたしにはちょっと難しかったです。
WebGL の実装としては見せ方にさまざまな工夫が凝らされている点が素晴らしいと思います。
水滴の表現や、木の中を養分や水分が流れる様子など、見事に可視化されていると感じました。
ぜひチェックしてみてください。
