こんにちは、サイトを開くと大概
+[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
http://lab.subskill.com/modules/1d1w/
今回で一番のおすすめ。とりあえず全部のデモを見る、でいいと思うほど。
あれもこれもスタイリッシュで非常〜〜〜に参考になります。使用している技術がハッシュタグで並んでいるので、一覧ページで探しやすいのもまた良いです。MDN mozilla Demo Studio
https://developer.mozilla.org/ja/demos/tag/tech:webgl
みなさん御用達mozillaにもWebGLタグのついたデモが80件超えで並んでいます。
WebGL.com
http://www.webgl.com/category/webgl-examples/
もう更新されていないっぽいのが残念なのですが、とにかく数がたくさんあって見ごたえ抜群です。こうやって見ていると他のサイト含めWebGLって2011〜13あたりに公開されているデモが多いんですよね……。なんだか時差を感じます……。
AWWWARDS Blog
「AWWWARDS Blog」のこの記事をどうぞ。
http://www.awwwards.com/22-experimental-webgl-demo-examples.html
タイトル通り、22個の素敵な事例が紹介されています〜！
OOS.MOXIECODE.COM
http://oos.moxiecode.com/blog/index.php/experiments/javascript-webgl/
事例はたくさんあるのですが、サムネイル的な説明がないので、タイトルでなんとなく予想してデモを見てください。「Long Hair」とかすごいの出てきますが。
さいごに
とまあ、色々載せといてあれなんですが、わたしがストーカーのように追い続けている杉本雅広さんのtwitter（@h_doxas）をとりあえず光速でフォローして、更新されている「wgld.org」と「WebGL総本山」を中心に追うのが個人的にはおすすめです。本当にありがたい……！
wgld.orgはエントリー全部を順に読んだ方がいい、本当に。宣伝っぽい勢いですが全然宣伝じゃないです。<canvas>や<video>あたりのタグでできること、まだまだたくさんありそうです。
それではまた！
【ネットの荒海へ覗きに行く】
※ 圧倒的な3D表現にWebの未来を感じるWebGLを使ったサイト・デモ20選
※ デザイナー・ノンプログラマにおすすめしたいThree.jsのカンタン3D体験
※ 「3Dホログラム」で実現可能な、まるで未来みたいな表現技術の事例
※ 「デジタルサイネージ」によるリアルタイム反映やユーザ参加可能な表現技術の事例について
※ 「AR（拡張現実）」を活用した、未来を感じさせる表現技術のキャンペーン事例について
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
