第一回 WebGLスクール「WebGLの概念」 #WebGL

このたびwgld.orgの管理人であるdoxasさん主催のWebGLスクールに参加しました。
毎週火曜日の19:30〜22:00の全12回の講座となっています。
記念すべき第一回はWebGLの概念についてのお話でした。

WebGLとは何か

ざっとWebGLとはなんなのか

GPUに直接アクセスできるブラウザに組み込まれたAPI
本来JSからOpenGLを呼び出すことはできない
JSとOpenGLの間に入って、OpenGLを呼び出せるのがWebGL
直接GPUを利用できるので、とても高速
ブラウザが対応していても、OSやハードウェアが対応してなければ動作しない

WebGLで作られたもの

WebGLの優れている点

ブラウザで即実行できるので手軽
ユーザーの手間がない
よりリッチなコンテンツを配信できる
次世代の技術と組み合わせることができる

WebGLの難点

動作は環境に依存する
内容によってはとても重くなる
学習コストが高い

学習コストが高いため扱えるひとがあまりいないそうです。
ベクトルやシェーダなどの数学の学習が必要なため、大変そう。という印象。

実装自体はC言語に似ていて、プログラムを書いている人ならそこまで難しくはないかな。という感じ。
ほんと数学ができる人であればそこまで学習コストは高くなさそう。
3Dプログラミングの基礎を習得しておけば、他のプラットフォームにもきっと活用できるみたいなので、是非しっかいと覚えておきたい。

WebGLの動作確認

WebGLコンテキストオブジェクトを介して処理を書く
HTML5のcanvasタグから生成する

WebGLに対応しているか調べる

// canvas への参照を変数に取得する
var c = document.getElementById('canvas');

// WebGL コンテキストを canvas から取得する
var gl = c.getContext('webgl') || c.getContext('experimental-webgl');

// WebGL コンテキストの取得ができたかどうか
if(gl){
    console.log('supports webgl');
}else{
    console.log('webgl not supported');
}

WebGLで描画されるまでの流れ

例えば、JSだと 生成 → 利用 という流れ。

var s = 'hello world!';
document.write(s);

WebGLプログラミングのざっと流れは、 生成 → 登録 → 利用 の3ステップ。

var s = gl.createXXXXX(); // 専用のメソッドでオブジェクトを生成
gl.bindXXXXX(s); // 専用のメソッドでオブジェクトを登録
gl.applyXXXXX('hello world!'); // 登録してあるオブジェクトにデータを適用

登録？？

なぜそんな面倒なことをしないといけないのか。
登録系のメソッドが実行された瞬間に、 GPUに事前にデータを転送 しているようです。
そのため冗長なコードになってしまうが、ロスなく高速にレンダリングができる。

グラフィックスパイプライン

ディスプレイに映像がでるまでの流れのこと。
JSとWebGLでグラフィックスパイプラインに、データやデータの扱い方を送る。

レンダリングパイプライン

グラフィックスパイプラインには、レンダリングパイプラインというのがある。
レンダリングパイプラインでは、データを加工して出力までを行う。
移動、回転、変形などの面倒で大変な3Dの計算を行ってくれる すごいやつ！

レンダリングパイプラインは、 ジオメトリパイプライン と フラグメントパイプライン に細分化される。さらにその２つの中でも、細分化が行われていて、処理が詰め込まれているらしい。なんだかややこしい・・・

レンダリングパイプラインをちゃんと理解するのは、とーても大変なようなので、 ジオメトリパイプライン と フラグメントパイプライン の２つに分かれているんだ。という概念を理解する。

ジオメトリパイプライン

三次元データを二次元に変換する役割 (?)
モデルを三次元空間に配置したり、いらないものを消したり。

フラグメントパイプライン

ジオメトリパイプラインから送られてきたデータを元に、出力される色を決める。
ジオメトリ「ここは青いです。」
フラグメント「分かった。青く塗るよ。」
こんな感じ。

シェーダ

ジオメトリパイプライン、フラグメントパイプラインを指定するのに使用される。
WebGLでは、シェーダの記述が必須
ジオメトリパイプライン、フラグメントパイプラインそれぞれのステージごとに記述する
ジオメトリパイプラインでは、 頂点シェーダ が処理を行う
フラグメントパイプラインでは、 フラグメントシェーダ が処理を行う
シェーダには色々種類があり、プラットフォームごとに異なる

GLSL

WebGLにおいてのOpenGL用の シェーダ記述専門言語
WebGLでは、JSを使う他、GLSLの記述も必須になっている
C言語に近く一般的なプラグラミング知識を流用しやすい

3D数学の基礎

3Dプログラミングを行うためには、数学の知識が必須になってきます。以下の概念を理解する必要があるようです。

頂点
ポリゴン
ベクトル
行列

頂点

画面に描かれる最小構成単位のこと。点、線、三角形を描くことができる。
頂点が1つ　→ 点
頂点が2つ　→ 線
頂点が3つ　→ 三角

ポリゴン

頂点3つで描かれる三角形のことを ポリゴン と言う。
ポリゴンをたくさん使えば、滑らかな曲線を再現することができけど、使いすぎると重くなるので注意。

ベクトル

方向と大きさを持つ量のことらしい。
ベクトルは3Dでは特に重要なようです。
ベクトル分からない・・・勉強しなくては。

行列

数学で用いられる概念。たくさんの情報を持つことができる特徴があり、3Dプログラミングでは重宝されているようです。
WebGLでは、 行列が不可避。

第一回目の感想

今回はWebGLの概念のお話でしたが、とても勉強になりました。
印象としては、数学覚えなきゃ。の一点ですね。実装自体は、やっていくうちに慣れていくと思います。

プログラムをやり始めて「ちゃんと数学勉強しておけばよかった。」と本当に思うようになりました。(笑)
WebGLを覚えるためには、数学が必須なのでこれから勉強し直そう。という感想です。

続き

第一回 WebGLスクール 「WebGLの概念」