研究結果や論文を 3D で描かれる螺旋のライブラリから閲覧できるフランス INRA のウェブサイト

doxas : 2018-11-27 14:31:24

美しい螺旋のライブラリ

今回ご紹介するのは、フランスにある研究機関 INRA のウェブサイトです。

INRA は日本語では「フランス国立農学研究所」と呼ばれている機関で、農業や科学、バイオ研究などの分野を扱う、フランスの国立の研究所のようです。

今回のサイトでは、その INRA が研究してきた成果を見ることができるサイトで、螺旋階段のように美しい曲線を描く 3D オブジェクトが登場します。

今回のサイトは、フランス語のページのほかにも英語の実装が別で用意されています。

ただ、見比べてみた感じだと、フランス語のページのほうに掲載されていても英語のほうには掲載されていない場合があるみたいで、恐らく、CMS 的なバックエンドの実装があって、そこに研究所の方（ウェブが専門ではないひとたち）が主導で記事や写真を追加しているのだと推測できます。

とは言え、いずれの言語で閲覧している場合でも、WebGL のデモとしての美しさは変わりません。

トップページからもう素晴らしいビジュアルに仕上がっていて、螺旋状に配置されているパネルの列の整然と並んだ美しさや、背景のグラデーションの美しさなど、圧巻です。

上の画像を見ると、何やら螺旋状に並んだパネルの一部にだけ色がついているのがわかると思うのですが……

これは、画面の中央にあるリンク文字に、カーソルがホバーしているときの演出です。

このときちょうど真ん中の「l'Alimentation」と書かれたリンク文字のところにカーソルが乗っていて、フランス語なので正確ではないかもしれないのですが、直訳すると「食べ物・食料」という意味になるみたいです。

ハイライトされているパネルが食べ物に関するものになっているのでしょうね。

各パネルが何を表しているのかは、さらにボタンなどを押して次のシーンに進むことでより詳細に表示されます。

この螺旋の内側あたりに移動したシーンの状態からは、パネルを選択することで、写真付きの説明文を見ることができるのですが……

なかには人体や医療に近い分野の画像などもあるので、結構ショッキングな画像がいきなり出てきたりすることもあるので注意してください。

農業の分野などだけにフィルタリングしたりもできるようなので、そういうのが苦手な人は活用してもいいかもしれません。

今回のサイトは結構昔からあるサイトみたいで、私自身は最近見つけてこれはすごいと思ったのですが、英語版とフランス語版で内容が違うのは、公開後のメンテナンスの関係なのかもしれません。

翻訳記事を作るのって大変そうですもんね。

グラデーションする背景の美しさ、パーティクルやライン状のジオメトリを使った演出の多彩さなど、WebGL 実装としての完成度の高さはかなりのもの。

スクロール操作に連動してシーンが動く様子も、螺旋の動きに合わせた直感的なものになっていて、とにかく WebGL の視点ではその細やかな仕事に感心させられます。