パーティクルとラインがうごめく WebGL で表現されたクールなデジタルクロックデモ！
シンプルながらとてもかっこよい仕上がり
今回ご紹介するのは、WebGL で制作されたデジタルクロックのデモンストレーションです。
意外にも、WebGL で時間を表現したデモというのはあまり見かけません。リアルタイムに 3DCG を描き出す WebGL であれば、もっとクロック系のデモがあってもいいような気もします。
今回のデモは動きもスムーズで、シンプルながらとてもクールな見た目に仕上がっています。
ズームや視点変更も思いのまま
WebGL の実装としては、実にシンプルな構成となっている今回のデモ。
ユーザーが操作できることと言えば、マウスによるズームインやズームアウト、それに視点変更くらいです。
しかし、そんなシンプルさも、かえってこの作品の良さを引き出しているのではないかなと感じさせます。
実にシンプル、それが逆にいい味になっています。
パーティクルは、数字を表現するために利用されていて、数字の形になる部分のパーティクル同士だけが、お互いに線で結ばれるようになっています。
結果的にその部分だけが色が白っぽくなるので、ぼんやり遠巻きに眺めてみると、それが数字に見えるというわけですね。
パーティクルは常に揺蕩うように動いており、イージングするアニメーションが見事です。
上のキャプチャの視点は、数字をかたどっている部分を下の方から煽るような形で眺めたものです。
完全な数字の形が出来上がるように全部のパーティクルをつなぐのではなく、微妙に途切れているかのようにラインが引かれています。なんだかこの危なっかしい数字の表現がとてもかっこいいですね。
javascript では比較的簡単に時計のための時間のパラメータを取得できますので、みなさんも WebGL で個性的なクロックデモの実装に挑戦してみてはいかがでしょうか。
パーティクルとラインを用いたシンプルな時計の WebGL デモ。ぜひ、チェックしてみてください。
