LAMPインフルエンサーマーケティングマネジメントマーケティング人事戦略ビジネススキル採用情報メディア掲載情報ニュースリリースイベント情報Web制作フロントエンド百聞は一見に如かず。見て学ぶ、WebGLを中心とした3D技術デモ祭2015.05.20百聞は一見に如かず。フロントエンドシェアこんにちは、サイトを開くと大概+[shift]+Iでデベロッパーツールを立ち上げます、あゆみです。表現のための技術は結構気になるクチでして、ネットの荒海に色々覗きに行くのが趣味なのですが、やっぱりCanvasとりわけWebGLは、表現が案件にはまればぜひともやりたいなと感じているわけです。(VRやkinectらへんも気になってはいるんですが、機材が......。Riftの一般発売が2016年1〜3月と発表がありましたね。ハードの進化が目まぐるしいですが、ソフトを作る側も必死でついていかないとですね。120fpsとか、楽しみだけど開発途中でマシン死にそう。)※お手軽VRのハコスコを社内で使ってみた記事は「全天球カメラで360度ぐるっとパノラマ動画撮影!撮影機器とVRビューワーまとめ」です。前置きが長くなりました。「WebGL」でGoogle検索をかけると弊社ののびすけが執筆した「圧倒的な3D表現にWebの未来を感じるWebGLを使ったサイト・デモ20選」が上位に出てくるのですが、この記事を公開してから1年近くたっているので便乗して他のページも紹介していきたいと思います。デモ集がメインなので、いろんな表現をざくざく見ていくのにお役立てください〜。WORKhttp://lab.subskill.com/modules/1d1w/今回で一番のおすすめ。全部のデモを見る、でいいと思うほど。あれもこれもスタイリッシュで非常〜〜〜に参考になります。使用している技術がハッシュタグで並んでいるので、一覧ページで探しやすいのもまた良いです。Studiohttps://developer.mozilla.org/ja/demos/tag/tech:webglみなさん御用達mozillaにもWebGLタグのついたデモが80件超えで並んでいます。WebGL.comhttp://www.webgl.com/category/webgl-examples/もう更新されていないっぽいのが残念なのですが、とにかく数がたくさんあって見ごたえ抜群です。やって見ていると他のサイト含めWebGLって2011〜13あたりに公開されているデモが多いんですよね......。なんだか時差を感じます......。Blog」のこの記事をどうぞ。http://www.awwwards.com/22-experimental-webgl-demo-examples.htmlタイトル通り、22個の素敵な事例が紹介されています〜!OOS.MOXIECODE.COMhttp://oos.moxiecode.com/blog/index.php/experiments/javascript-webgl/事例はたくさんあるのですが、サムネイル的な説明がないので、タイトルでなんとなく予想してデモを見てください。Hair」とかすごいの出てきますが。さいごにとまあ、色々載せといてあれなんですが、わたしがストーカーのように追い続けている杉本雅広さんのtwitter(@h_doxas)をとりあえず光速でフォローして、更新されている「wgld.org」と「WebGL総本山」を中心に追うのが個人的にはおすすめです。本当にありがたい......!wgld.orgはエントリー全部を順に読んだ方がいい、本当に。宣伝っぽい勢いですが全然宣伝じゃないです。<canvas>や<video>あたりのタグでできること、まだまだたくさんありそうです。頂いたご意見への回答は行っておりません。