WebGL

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

More than 3 years have passed since last update.

このたび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の計算を行ってくれる すごいやつ!

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

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


ジオメトリパイプライン

三次元データを二次元に変換する役割 (?)

モデルを三次元空間に配置したり、いらないものを消したり。


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

ジオメトリパイプラインから送られてきたデータを元に、出力される色を決める。

ジオメトリ「ここは青いです。」

フラグメント「分かった。青く塗るよ。」

こんな感じ。


シェーダ


  • ジオメトリパイプライン、フラグメントパイプラインを指定するのに使用される。

  • WebGLでは、シェーダの記述が必須

  • ジオメトリパイプライン、フラグメントパイプラインそれぞれのステージごとに記述する

  • ジオメトリパイプラインでは、 頂点シェーダ が処理を行う

  • フラグメントパイプラインでは、 フラグメントシェーダ が処理を行う

  • シェーダには色々種類があり、プラットフォームごとに異なる


GLSL


  • WebGLにおいてのOpenGL用の シェーダ記述専門言語

  • WebGLでは、JSを使う他、GLSLの記述も必須になっている

  • C言語に近く一般的なプラグラミング知識を流用しやすい


3D数学の基礎

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


  • 頂点

  • ポリゴン

  • ベクトル

  • 行列


頂点

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

頂点が1つ → 点

頂点が2つ → 線

頂点が3つ → 三角


ポリゴン

頂点3つで描かれる三角形のことを ポリゴン と言う。

ポリゴンをたくさん使えば、滑らかな曲線を再現することができけど、使いすぎると重くなるので注意。


ベクトル

方向と大きさを持つ量のことらしい。

ベクトルは3Dでは特に重要なようです。

ベクトル分からない・・・勉強しなくては。


行列

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

WebGLでは、 行列が不可避


第一回目の感想

今回はWebGLの概念のお話でしたが、とても勉強になりました。

印象としては、数学覚えなきゃ。の一点ですね。実装自体は、やっていくうちに慣れていくと思います。

プログラムをやり始めて「ちゃんと数学勉強しておけばよかった。」と本当に思うようになりました。(笑)

WebGLを覚えるためには、数学が必須なのでこれから勉強し直そう。という感想です。


続き

第二回 WebGLスクール 「WebGLの手続きと手順」

第三回 WebGLスクール 「シェーダの基礎」

第四回 WebGLスクール 「行列とクォータニオンについて知る」

第五回 WebGLスクール 「ライティングの基本」

第六回 WebGLスクール 「テクスチャで画像データを使用する」

第七回 WebGLスクール 「ブレンドファクターとアルファブレンディング」

第八回 WebGLスクール 「シェーダエフェクトテクニック」

第十回 WebGLスクール 「ポストエフェクトテクニック」

第十一回 WebGLスクール「キューブ環境マッピング」