päivittäin kukka

  • twitter
  • facebook
  • instaglam
  • rss

クリエイティブ

WebGLを使った立体的な3D表現が素敵なWebサイトその1

Cube Slam

iOS8からSafariでもWebGLが使えるようになりました、個人的にこれからWebGLを使って3D表現を取り入れたWebサイトが流行ってくるのかなぁと感じたので、WebGLを使ったゲームやインタラクティブな表現をしたさまざまなWebサイトを10件ピックアップしてみました。

1.Cube Slam

Cube Slam

音が鳴るので注意してください。
WebGLを使ったエアホッケーができるサイトです。シンプルな形で作られたオブジェクトですが、動物たちの動きなどを俯瞰したカメラワークで見れる所が素敵です。ゲームはシンプルでちょっとした息抜きに遊ぶのにちょうど良いです。

2.HelloRacer™

HelloRacer™

レースカーを鑑賞できるサイトです。
とてもクオリティーの高い3Dモデルの細部やライティングに目を奪われます。さまざまな視点にカメラが切り替わる所にもこだわりを感じます。テンキーの矢印で操作できるので動かしてみるのも楽しいです。

3.HexGL

HexGL

F-ZEROに影響を受けて作られたレースゲームのようです。
ゲームのクオリティーがとても高く丁寧に作られています。マシンのスピードが徐々に上がってくるとテンションも上がってきます。Webで作られているのがすごいなぁと感じました。

4.Ziggurats

Ziggurats

サウンドを視覚化したサウンドビジュアライゼーションのサイトです。
曲が進むにつれて文字が徐々に激しく変化していきます。three.jsというよく使われているライブラリーが使われています。こういう表現で見せるサイトも面白いですね。

5.Web Audio Synth V2

Web Audio Synth V2

Web上で音を操作できるシンセサイザーのサイトです。
こちらでもthree.jsが使われているようです。細部まで作り込まれていてシンセや楽器が好きな人は胸がアツくなりそうです。コントロールパネル部分がとても細かく直感的に操作して音を出してみるのもたのしいです。

6.WebGL Water

WebGL Water

水に沈んだボールを再現したサイトです。
ぱっと見シンプルな3D表現かなと思ったんですが、ボールが動かせて水が動く表現がとてもリアルです。難しいことはわからないですが複雑な物理演算が使われているようです。

7.Eye texture raytracing demo

Eye texture raytracing demo

目玉を再現したサイトです。
結構グロいので苦手な人は見ないほうが良いかもしれないです。細かい血管が本物のように感じられます。ライティングでまた一層生々しさが表現されているような気がします。

8.demo3d

demo3d

3Dアニメーションのアイコンを使ったサイトです。
three.jsが使われているようです。他に比べるとシンプルに見えますが、さまざまなサイトで応用できそうな表現が詰まっています。真ん中の幾何学のボールの落下時の衝撃がリアルに近い表現で良いですね。

9.three.js webgl – dynamic procedural terrain

three.js webgl - dynamic procedural terrain

音が鳴るので注意してください。
飛ぶ鳥たちのストーリー性を感じさせるサイトです。
地面の凹凸やディテールの細かさが素敵です。遠くの背景は手前よりもぼかして表現しているので遠近感を感じます。BGMがとてもドラマティック!

10.Santa’s Boxes!

Santa's Boxes!

サンタさんとクリスマスプレゼントを再現したサイトです。
テンキーでサンタさんを操作することができ、クリスマスプレゼントにぶつかった時の表現もされています。雪のパーティクルの表現も素敵です。

今日もこのブログを見に来てくださってありがとうございます。
three.jsを触り始めました。

こちらの記事もよく読まれてます。