開発とデザインの間にある様々なつながりを可視化するアプローチがおもしろい Connections.

doxas : 2021-12-27 13:43:55

モーションブラー的な効果も美しい

今回ご紹介するのは、Connections. というかなり直球なネーミングの WebGL 実装です。

タイトル通り、いわゆるデータ間の「つながり」を可視化した事例となっていて、点と点を結ぶ線やパーティクルが立体的な構造として WebGL で描かれます。

用いられているデータのスコープというか、範囲というんでしょうか…… それがちょっとよくわからなくて、もしかしたらいわゆる学校的な組織内で収集されたデータなのかもしれません。

※サイト内では BDDI と書かれているのですが、それがなんなのかが調べてもよくわかりませんでした……

今回のサイトは、いわゆるデータ可視化の事例の一種だと思うのですが、物量感というよりは、そのつながり・関係性を 3D 的に視覚化させたものだと言えると思います。

データはパーティクルの集合や、あるいは繋ぎ目部分に現れるイエローやシアンの小さな点として描かれます。

それらのデータをつなぐラインは点滅する破線として描かれ、なかなか幻想的な感じです。

この 3D シーンには、マウス操作で干渉することができます。

いわゆる Orbit なカメラ操作が可能で、ホイールを操作すればズームイン・アウトもできます。

カメラを勢いよく動かしてみるとわかりやすいと思うのですが、いわゆるモーションブラー的な効果が発生するようになっており、残像がうっすらと残ることでより幻想的な雰囲気になっています。

これは純粋に、前のフレームの色が徐々にフェードアウトしていくようになっていて、結果的にそれによってモーションブラーのような視覚効果が生まれています。

また、データを選択すると、画面の右側にその詳細が文字や数値で表示されるようにもなっていて、可視化事例としてデータの方にも意識を向けることができる仕組みです。

個人的に今回の事例で面白いなと思ったのが、破線（点線）の描画の仕方です。

WebGL で点線を描画する方法にはいろいろな手法が考えられますが、みなさんだったらどんなふうに点線を描画するでしょうか。

この事例の場合、実は線に見えるものは実線ではなくパーティクルがまっすぐ並んだものなんですよね。それら線を構成するパーティクルが順に明滅することで、点線が点滅するような見た目を実現しています。

今回の事例がどのような経緯で作られたものかは、私の読解力不足でちょっとよくわからなかったのですが……

単純に WebGL の可視化事例として外見的な特徴をつぶさに観察してみるだけでも、結構面白い事例かなと感じましたのでご紹介しました。

点線をパーティクルの集合として描画するのは、ネタを知ってしまえばそれほど難しくないと言うか、まあそうですよね～という感じで納得できるとは思うのですが、これを自分で思いついて実装するとなるとなかなか大変そうですよね。