NTTドコモ様_dカーシェア
NTTドコモ様_dカーシェア
2015.05.20

百聞は一見に如かず。見て学ぶ、WebGLを中心とした3D技術デモ祭

あゆみ

こんにちは、サイトを開くと大概

+[shift]+Iでデベロッパーツールを立ち上げます、あゆみです。

表現のための技術は結構気になるクチでして、ネットの荒海に色々覗きに行くのが趣味なのですが、やっぱりCanvasとりわけWebGLは、表現が案件にはまればぜひともやりたいなと感じているわけです。
(VRやkinectらへんも気になってはいるんですが、機材が……。。。つい先日Oculus Riftの一般発売が2016年1〜3月と発表がありましたね。SCEのMorpheusも楽しみです! ハードの進化が目まぐるしいですが、ソフトを作る側も必死でついていかないとですね。120fpsとか、楽しみだけど開発途中でマシン死にそう。)

※お手軽VRのハコスコを社内で使ってみた記事は「全天球カメラで360度ぐるっとパノラマ動画撮影!撮影機器とVRビューワーまとめ」です。

さて、前置きが長くなりました。
「WebGL」でGoogle検索をかけると弊社ののびすけが執筆した「圧倒的な3D表現にWebの未来を感じるWebGLを使ったサイト・デモ20選」が上位に出てくるのですが、この記事を公開してから1年近くたっているので便乗して他のページも紹介していきたいと思います。
デモ集がメインなので、いろんな表現をざくざく見ていくのにお役立てください〜。

【WebGLメイン】動きまくるデモ集

1 DAY 1 WORK

webgl05

今回で一番のおすすめ。とりあえず全部のデモを見る、でいいと思うほど。
あれもこれもスタイリッシュで非常〜〜〜に参考になります。使用している技術がハッシュタグで並んでいるので、一覧ページで探しやすいのもまた良いです。

MDN mozilla Demo Studio

webgl03

みなさん御用達mozillaにもWebGLタグのついたデモが80件超えで並んでいます。

WebGL.com

webgl04

もう更新されていないっぽいのが残念なのですが、とにかく数がたくさんあって見ごたえ抜群です。こうやって見ていると他のサイト含めWebGLって2011〜13あたりに公開されているデモが多いんですよね……。なんだか時差を感じます……。

AWWWARDS Blog

webgl01

「AWWWARDS Blog」のこの記事をどうぞ。

タイトル通り、22個の素敵な事例が紹介されています〜!

OOS.MOXIECODE.COM

webgl02

事例はたくさんあるのですが、サムネイル的な説明がないので、タイトルでなんとなく予想してデモを見てください。「Long Hair」とかすごいの出てきますが。

さいごに

とまあ、色々載せといてあれなんですが、わたしがストーカーのように追い続けている杉本雅広さんのtwitter(@h_doxas)をとりあえず光速でフォローして、更新されている「wgld.org」「WebGL総本山」を中心に追うのが個人的にはおすすめです。本当にありがたい……!
wgld.orgはエントリー全部を順に読んだ方がいい、本当に。宣伝っぽい勢いですが全然宣伝じゃないです。

<canvas>や<video>あたりのタグでできること、まだまだたくさんありそうです。

それではまた!

 

【ネットの荒海へ覗きに行く】

圧倒的な3D表現にWebの未来を感じるWebGLを使ったサイト・デモ20選

デザイナー・ノンプログラマにおすすめしたいThree.jsのカンタン3D体験

「3Dホログラム」で実現可能な、まるで未来みたいな表現技術の事例

「デジタルサイネージ」によるリアルタイム反映やユーザ参加可能な表現技術の事例について

「AR(拡張現実)」を活用した、未来を感じさせる表現技術のキャンペーン事例について