うねうね動くラインの表現が新しい、とあるポートフォリオサイトの WebGL ライン描画実装
シンプルなポートフォリオサイト
今回ご紹介するのは、いくつかリンクが置かれているだけの、シンプルなポートフォリオサイトです。
WebGL が使われているのはサイトのトップページのみ、リンク先に置かれているものはいずれも WebGL 実装ではありません。WebGL を用いた実装の規模はとても小さいもので、ページひとつに、簡単なデモがひとつだけ、という感じです。
それでもこのサイトを紹介しようと思ったのは、そのたったひとつの WebGL 実装が、ライン描画を用いた面白い内容だったためです。じっくり眺めるようなものではありませんが、さくっとチェックしてみていただければと思います。
Windows と Mac では結果が異なる？
あまり知られていませんが、WebGL にはポリゴンだけでなく線を描画するための方法が用意されています。
3DCG というとどうしてもポリゴンを用いた三次元での表現が先行しますが、ラインや、点といった、ほかの形状を用いた表現も可能なのですね。
今回ご紹介するサイトは、そんなライン描画をメインに使っています。
背景は恐らく大きな球体で、シーン全体がそのなかに入っている感じでしょうか。微妙にグラデーションしている背景がぐるぐると回るような感じの風景です。
そのなかに、白いラインが一本、まるで長い髪のように漂っています。
この白いラインは WebGL による描画が行われている部分になっており、閲覧者のマウス操作（カーソル位置）に応じて、どのような軌跡を描くのかが変化するようになっています。
ライン描画をこんなふうに使っているケースは珍しいですね。
大抵、WebGL でラインを使うときというのは、得てしてワイヤーフレームによるモデルの表示であったり、三次元空間のグリッド表現であったりするのですが、今回のデモではそんなラインが主役になっています。
また、背景の回転に合わせるように動きたなびくラインは、なんともいえない不思議な雰囲気を持っていて、その動きのロジックに気が付かないまま適当にマウスを動かしていると、まるで生きているかのように怪しく動きます。
このラインの表現がとても面白いなと思いました。
マウスカーソルの位置によりラインの動きが決まるので、カーソルを動かさずにじっと止めておくと、スプリングのようにバネ状の構造になります。
この白いライン、今回のキャプチャ画像は Mac 版の Chrome で撮影したものですが、恐らく Windows で実行すると、もっと線が細く描画されると思います。
これは、Windows 環境では WebGL のラインの太さを変えるプロパティが基本的に利かないため、OS によって描画結果が変わってしまう、ということが起こるんですね。Mac などの OS で見れば、ラインが 2 から 3px くらいの太さになっていると思います。たぶん、Windows は深いところで DirectX に命令を書き換えているせいだと思いますが正確なことはわかりません。
本当にシンプルで、単純なデモです。
しかし、ラインの表現でこんなふうにシーンを描けるとは思いませんでした。新鮮な驚きがありましたね。
ちなみにサイト内に設置されているリンクから個別のページに飛んで行くと、一見して 3D 表現を行っているように見えるものなどもありますが、これらは Flash ですね。もともとは、Flasher のかたなのかもしれません。
もしよければチェックしてみてください。
