パーティクルを利用して様々なシーンを描画するボリューム満点のコンテンツが面白い L’Atelier のウェブサイト

doxas : 2022-03-16 13:07:11

ただ単に物量感で押すだけではない

今回ご紹介するのは、実は以前にも紹介したことのある L'Atelier という機関のウェブサイトです。

以前紹介したサイトは、実は今回紹介するページの上位ページで、今回のサイトがその下に下層ページとして追加された、という形になっているみたいですね。

前回紹介したときは、CSS で 3D 表現がされている部分などをメインに紹介したのですが、今回のサイトはバリバリの 3D 表現が WebGL によって実現されている形になっています。

今回のサイトでは、表現の主役はどこまで行ってもパーティクルです。

逆に言えば、パーティクル以外のオブジェクトは出てこないため、すべての表現がパーティクルによって構成されている、とも言えると思います。

ページを開いた直後、画面全体に散らばったように見えるパーティクルは、スクロールしてコンテンツを読み進めていくに従って次々と姿を変えていきます。

はじめはバラバラに散らばっていたパーティクルが徐々に収束していき、意味のある姿に変化していく様子はなかなか迫力があります。

多くは人の姿を模したものですが、シーンによっては、機関車などの構造物、あるいは階段のような建造物が表現されるような場面もあります。

文字の描画のされ方も結構変わっていて、普通に手前のレイヤーに文字がそのまま置かれるパターンだけでなく、カード状というか、まるでノートの１ページのようなデザインのセクションもあったりします。

個人的に（表現として）すごく面白いなと思ったのは、後半に出てくる「黒い背景に町の様子がポイントクラウドで描かれる場面」です。

それまでの「白い背景にパーティクル」という表現との対比として文字通り百八十度違った風合いになっていて、すごく面白いですね。

この暗い背景のシーンでは、微妙にブルームのようなポストエフェクトが掛かるようになっており、町のなかに点在するネオンやショーウィンドウなどの光が煌々と輝いている感じがうまく表現されています。

この機関がいったいどういうことを研究したり分析したりしているのかは、正直私の英語の読解力ではあまり詳しくはわからないのですが……

今回のページに掲載されているコンテンツの量は単純にかなりのボリュームがあり、１つ１つ読み進めていくとかなり時間を要しますね。

おそらくは、１つ大きなキーワードとして「テクノロジー」があり、これが経済や人々の暮らしにどのように影響を及ぼしてきたのか、そしてこれから何がやってくるのか、そういったことを考察している資料なのだと想像します。

WebGL の実装としてはパーティクルを中心とした見せ方として割とスタンダードなもので、奇をてらったような部分はあまり無いのですが、全体的に非常にスムーズで違和感なくコンテンツが組み上げられており丁寧で見事な実装だと感じました。