WebGLをはじめたい時の入り口サイトいろいろ

『ガーディアン・オブ・ギャラクシー』で男泣きしたminamiです。

iOS 8が公開されましたね。いろいろと話題ですが、WebGLが正式に対応となったのは大きな変更ですよね。

これからWebGLを知ってみたいという人の入り口になるようなサイトを集めてみました。

WebGLとは

WebGLには以下のような特徴があります。

• Webブラウザで3DCGを扱うための標準仕様
• OpenGL 2.0もしくはOpenGL ES 2.0をサポートするプラットフォーム上で動作する
• JavaScriptとネイティブのOpenGL ES 2.0のバインディング
• HTML5のCanvas要素を使う

WebGLを知るためのサイトいろいろ

wgld.org

• http://wgld.org/

基礎の基礎からサンプル付きで解説がまとまっていて大変ありがたいです。

Getting started with WebGL

• https://developer.mozilla.org/ja/docs/Web/WebGL/Getting_started_with_WebGL

基礎の基礎からサンプル付きで解説がまとまっていて大変ありがたいです。

WebGLことはじめ

• http://wgld.org/

WebGLが使えると実際何ができるの？というわかりやすい解説のスライド。

Web ブラウザで動くとは思えない、凄い WebGL デモ・アプリ 65 個

• http://webos-goodies.jp/archives/65_impressive_webgl_demos_and_apps.html
  

WebGLを使って作られたデモやアプリの紹介。

WebGL Experiments

• http://www.chromeexperiments.com/webgl/
  

Googleの紹介するWebGLのサンプル集

Three.js関連

WebGLのAPI自体を直接いじって何かを作るにはかなり冗長で複雑な記述を書かないといけませんが、Three.jsを使うと直感的にWebGLを使ったコンテンツを作成することができます。

• three.js

Three.js関連の参考サイト

• 多彩な表現力のWebGLを扱いやすくする「Three.js」
• 初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞
• Javascriptで簡単3D！three.jsを使ったWebGLプログラミング！

まとめ

チュートリアルからサンプルまで広く浅く集めてみました。

すでにチラホラ見られるようになってきましたが、これからがWebの3D表現時代の到来でしょうか！はじめるなら今かもしれません。