はじめに
みなさん、こんばんは。
なぜこんにちはでなく、こんばんはなのか。
それは私が夜型人間だからです。
つぎに
WebGL が誕生してから、結構な時間が流れました。
新しい Web の API ですなんて WebGL を形容することもあったりしますが、WebGL の歴史も徐々に深まりつつあるなあと感慨深く思う今日このごろです。
2016 年のアドベントカレンダーでは、WebGL だけでなく、three.js や GLSL、あるいはオリジナルの和製 WebGL ライブラリについてなど、各所で様々な WebGL 関連アドベントカレンダーが公開されており、そういったものからも、WebGL が置かれている状況の変化を感じています。
一般的には、どうなんでしょう。WebGL に興味を持っているけど、なんかその怪しげな空気感から足踏みしてしまっている……そんなエンジニアさんも、いるんでしょうか。
私の体感としては、興味を持っている人はもう既になにかしらの形で WebGL を一度は触っていて、自分に向いているとか向いていないとか、あるいはアリだとかナシだとか、それなりの所感を得ているようにも思います。残念ながら WebGL は向いていない人にはトコトン冷徹なので、365 日、毎日 WebGL のことばかり考えている私でさえ、挫折してしまったことを責めようと思う気持ちは欠片も湧いてはきません。
しかしそれでも、WebGL が素晴らしいテクノロジーであるという私個人の思いは、今も昔も変わっていません。
ウェブブラウザを通して、世界中のどこからでも、オンラインでハイレベルなグラフィックスを提供できる WebGL―― その可能性は、まだまだ裾野が見渡せぬほどに広がっていると、私は信じています。
要は
これから先も、多いか少ないかは別にして、WebGL を始めてみようと思う人はそれなりにいるだろうと思っています。時代はどんどん流れていって、WebGL をコードから記述するのではなく、ゲームエンジンから出力して公開するのが当たり前の未来が来るかもしれないけれど、それでも、やはりコードに直接触れながら、試行錯誤していく過程には得難い驚きや喜びがあると思います。
そんな未来の WebGL マンたちのために、2016 年のこの年の瀬に、私が秘蔵（？）してきた WebGL お勉強お役立ちサイトをざっとまとめてみようと思い立ちました。
私が WebGL の勉強を始めた頃と違って、今は日本語の解説も結構数が増えてきています。
これをご覧のみなさんの、それぞれの付き合い方にマッチしたサイトが、ひとつでも多くあるといいのですけれど。
但書
今回紹介するサイトは、私がブックマークして個人的に見ているサイトばかりで、若干、内容に偏りがあると思います。
また「学習に役立つ」という点を重視して選別しており、敬称略あり、順序に深い意味はないです。その点ご理解の上でご覧ください。
WebGL や OpenGL 編
WebGL の公式リファレンスカード。いわゆるチートシートですな。
困ったときは公式の仕様を見るのが一番。
こちらはチートシート風味ではなくドキュメント。
Google 翻訳が進化したことで、より使いやすくなりましたね。
まもなく登場する予定の WebGL 2.0 のドキュメント。
困ったときはこれを見よう。
これも公式。こちらは WebGL 1.0 の拡張機能について書かれています。
拡張機能は私も全部紹介しきれてないのですが、WebGL 2.0 ではデフォルトで有効になるものも多いですね。
WebGL ではなく、その元となっている OpenGL ES のリファレンスカードです。しかも OpenGL ES 3.0 というのがポイント。
これはまだまだ情報の少ない WebGL 2.0 系の API について知りたいときには現時点ではかなり役に立ちます。
現時点では非常に貴重な、WebGL 2.0 に特化したサンプル集。
動作確認したり、コードを眺めたり、使いみちは多岐にわたります。ありがたいです。
ramemiso さんの、貴重な貴重な、ES 3.0 関連エントリ群。
ほとんどそのまま WebGL 2.0 に置き換えて考えることができ、ありがたすぎて味噌汁の代わりにらーめんを食べなくてはなと思っちゃいます。
知ってる人は知っている、WebGL の学習のためのコンテンツがたくさんあるサイトです。
嬉しいことに、WebGL 2.0 版も既にいくつか記事が上がっており、WebGL 1.0 と 2.0 の違いなどを知ることができます。
もはや説明は不要ですね。
床井先生は日本の宝ですな。私も何度も何度も何度もお世話になりまして、感謝の気持ちを言葉で表しきれません。
そんな床井先生が公開されているスライド集。
興奮しすぎて鼻血が出る可能性があるのでティッシュを用意してから正座して読みましょう。
実は GLSL や OpenGL について驚くほどコアな話題に溢れる demoscene.jp
私がレイマーチングに興味を持ったのは、このサイトが存在してくれていたおかげです。
OpenGL や GLSL についていくつかの記載があります。
それ以外にもたくさんの記事が公開されており、大変勉強になります。
Florian Boesch さんの WebGL に関する割とマニアックな情報が凝縮したサイト。
シャドウマッピングの実装について解説しているところとかほんとすごい。
sapphire さんの超有用な日本語による WebGL のリファレンス。
日本語であるだけで半端じゃない安心感……ありがたく活用させてもらいましょう。
ありそうでなかなか見つからない WebGL の組み込みで定義されている定数の一覧。
これ見ると結構いっぱいあるのがわかりますね。
OpenGL ES のプログラミングガイド（書籍）のページ。
サンプルなどが Github で公開されているの知ってました？
three.js で高品質なビジュアルを生み出し続ける奇跡。
たぶんみんな知ってるとは思いつつ。
WebGL に関する様々な情報を収集するスクリプトを、有志のサイトに埋め込み蓄積した結果が見られる。
勉強というより、調査にとても便利。
GLSL 編
WebGL 1.0 で使われている、GLSL ES 1.0 の仕様。PDF です。
微妙にググっても見つからないようなキーワードは、この仕様内検索でよくヒットしますよ。
こちらは同じ GLSL の仕様書 PDF でも、GLSL ES 3.0 についての仕様書です。
WebGL 2.0 ではこちらの GLSL のバージョンが（使おうと思えば）使えるので、仕様書はしっかり押さえておきましょう。
GLSL のビルトイン関数について書かれたウェブサイト。
英語ですが各関数の簡単な解説が添えられています。
GLSL を minify できるオンラインツール。
シェーダの記述を最適化するヒントがあるかも。
レイマーチングについて知識の幅を広げたいなら、この恐ろしいほど価値の高いスレッドはまさかもうみんな見てますよね？
本物のプロたちのレイマーチング考察は大変刺激的。10 ページ近くある至高シェーダの宝庫。
GLSL で記述できるノイズ関数を善意で集めたリポジトリ。数が半端ではない。
引用元の記載があるコードの扱いは各自しっかり行いましょう。
このページに出会ってなかったら、レイトレとかレイマーチングとかもしかしたらやってなかったかもしれない。
kioku 氏の味わい深い手書きの図解に癒やされるために訪れるのもまた良し。
数学やアルゴリズム、その他いろいろ編
みんな一度くらいはお世話になっているでしょう。
本格的に解説される数学系の知識はマジで頭下がります。
神のサイト。
説明不要だな？
日本にも神様はいるぞ！
みんな見ような！
日本語での四元数について書かれたドキュメント。
私はこのページのおかげで、なんとなくクォータニオンをわかっているフリができるようになりました。
科学と数学について興味深い内容を多数収録しているブログ。
レイトレ系の記述など、めちゃ参考になる。
WebGL でボロノイ図を描いちゃうぞ！ というやつ。
仕組みがデモ付きで説明されてます。
すごくまっすぐな、正当なレイトレについての解説。
数学的な基本を押さえたいときにとっても便利。
superformula について書かれたページ。
ぐっと来ます。
パーリンノイズについて解説されたサイト。
コードの記載もあってわかりやすい。
世界中の CG 系の情報を広く追っかけてる hanecci さん。
そのブログに掲載されている情報はどれも本格的ですごいです。
丁寧な解説で神界への扉を開いてくれる pocol 神のサイト。
ほんとにね、すごいんだから！
Flash の有名なサイトなのかな？
個人的にはなんか印象的な表現ねえかなあーってぼんやりしながら眺めて、インスピレーションが来るのを待ちます。（そしてだいたい来ない）
フラクタル、レイトレ、レイマーチング、などなど。
とにかく本気で取り組めばすごい世界が見えてくるのだということがひたすらわかるブログ。
流体シミュレーションのお話。
この内容の濃さで part19 まであるとかやばすぎでは。
最後に
後半はあんまりというか全然 WebGL 関係ない感じになってしまいましたが、3DCG はつまるところ、なにかしらの手法によってグラフィックスを描いていくことの研鑽ですので、参考にできるところをうまく流用しながら、自身の創作活動につなげていきましょう。
正直なところ、もっとたくさん、有用なサイトというのはあるのですが、私がよく見ている、あるいはお世話になっているところを中心にご紹介しました。
役に立つサイトが少しくらいあったでしょうか。
偉大な先人たちに感謝しつつ、楽しい WebGL ライフをお過ごしください。