あらゆるWebプログラミングの知識を利用して作られたデモが多数！ ハイレベルなデモサイト soul wire
個人制作とは思えない高い完成度
WebGL が登場する前から、Canvas2D やあるいは Flash などを利用してハイレベルなデモを作ってらっしゃった方が作られたサイトです。
サイト内には、WebGL はもとより、Canvas2D、Flash、Coffee-Script、WebRTC、CSS3D、などなど、とにかく多彩なツールや技術を用いたオンラインデモが多数公開されています。
驚くべきはそのデモがどれも高い完成度になっている点。思わず目を見張るようなデモがたくさんあります。
サイトデザインもカッコいい
大きめのスクリーンショットを利用して、すっきりとしつつも見やすいデザインで統一されているサイト内。
画像にカーソルを持っていくと、マウスホバーで詳細な説明が出るようになっています。
Canvas2D を使って三次元のような複雑な空間を演出しているものもなかにはありますね。
アルゴリズムや演出の技法としても、参考になるものがかなりあるように思います。
どのデモも比較的シンプルですが、味気ない感じがしないのがすごい。
Canvas2D で作られているものは、これをそのまま WebGL に持っていけばもっと軽快になるだろうなと思うものもありますが、全体的に本当にハイセンス。
スクリーンショットを見ているだけでも面白いです。
Three.js を使った WebGL デモも
WebGL を使ったデモでは、Three.js を利用しているものもあります。
スクラッチでコードを書くことも、必要に応じてライブラリを使ったコードを書くこともできるというのは素晴らしいですね。
比較的新しいデモのうちの一つ、Unwrapageddon はクロスシミュレーションを行っている WebGL のデモで、マウスのドラッグ操作に反応するようになっています。
上の状態は、一番最初の布をある程度剥がしたところで、一枚目の布地が画面下に自由落下で落ちていっているところですね。
後ろからはまた新しい壁紙が押し出されてきます。
これを次々とめくっていくことができます。
非常に操作していて面白いので、体験してみていただければと思います。
サイトデザインという意味でも参考になる点が多いので、私も見習わないとなあと思いました。
