WebGl学習記録(1) WebGLのセットアップ #WebGL

参考webglorg;
原則として上記ページを見ながら学習した記録です。

canvas

WebGLももちろんCanvasないで描写されます。
WebGL を扱うためのコンテキストはwebglコンテキスト。
コンテキストとは要するに、描画処理を行なうための API を実装したオブジェクトのこと。

3D描写の基礎

座標系

WebGL、つまり、OpenGLは右手座標系。

座標変換

結果的にディスプレイに表示するということは、2Dに変換せねばならないということ。
その際に座標変換が必要。
座標変換は三つあり

モデル変換
ビュー変換
プロジェクション変換

がある。

モデル変換とは、被写体となる物体が三次元空間のどの位置にあるのかを定義するための座標変換。原点からモデルが相対的にどの位置にあるのか。

ビュー変換では、実際にカメラがどの位置にあるのか、そしてカメラはどこを向いているのかなどを定義する。

プロジェクション変換では、いわゆる遠近法の効果が得られる。三次元空間のどの領域を撮影するのかなどを定義する。幅広くパノラマとして撮影するのか、あるいは縦長の映像として撮影するのか、どのくらい遠くまでを撮影するのか。

レンダリング

シェーダ

固定機能パイプラインという、座標変換などを一度にやってくれる便利な機能がないので、ここら辺は全部自前で記述せねばならない。
そこでシェーダーを使う。
シェーダーには

頂点シェーダ
フラグメントシェーダ

の2種類が存在する。
WebGL、シェーダなんかを記述するためのHTMLテンプレートは以下の通り。

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">


        <title>WebGL TEST</title>
        <!-- 行列計算のライブラリ -->
        <script src="minMatrix.js" type="text/javascript"></script>
        <!-- WebGL各種処理のjsファイル -->
        <script src="script.js" type="text/javascript"></script>

        <script id="vs" type="x-shader/x-vertex">
        頂点シェーダー
        </script>

        <script id="fs" type="x-shader/x-fragment">
        フラグメントシェーダー
        </script>

    </head>
    <body>
        <canvas id="canvas" width="300" height="300"></canvas>
    </body>
</html>

シェーダのソースは単なる文字列でしかないので、javascript の内部で文字列として記述しておきそれを利用する。

行列（マトリックス）

3D描写において、行列による計算は非常に効率の良いもの。ゆえに必須知識。
3Dプログラミングでは4*4の行列を用いるのが一般的。

行列計算によって何ができるのか

描画したい 3D モデルの位置や、拡大縮小の有無、そして回転しているかどうかなどを一つの行列で定義できる。

頂点とポリゴン

WebGLの世界で基本的に

点
線分
三角形

しか描写できません。

頂点を結ぶ順序とカリング

3Dの世界なので、当然のことながらアングルによっては見えない部分も存在する。そう言った部分を描写するのは無駄なので、見えない部分を描写しない仕組みというのがカリング。

このカリングの設定している場合、頂点を結ぶ順序を間違えると、あるはずなのに描写されなかったりするので、この描写順は結構重要。

コンテキストの初期化

テンプレートの通り、script.jsというファイルを用意して今回は初期化をしていく。


// canvas要素の取得
var c = document.getElementById('canvas');

// canvasサイズ
c.width = 500;
c.height = 300;

続いて、getContextメソッドでwebglコンテキストを取得。

var gl = c.getContext('webgl') || c.getContext('experimental-webgl');

画面の初期化

クリアメソッドで画面をまっさらな状態にする。

gl.clear(gl.COLOR_BUFFER_BIT);

色をクリアするだけなので、COLOR＿BUFFER＿BITのみを指定。

gl.clearColor(0.0, 0.0, 0.0, 1.0);

続いてクリアするときの色を指定。

これらをonloadにそのまま全ての処理を関数として渡す。

onload = function(){
    // canvasエレメントを取得
    var c = document.getElementById('canvas');
    c.width = 500;
    c.height = 300;

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

    // canvasを黒でクリア(初期化)する
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
};

これで真っ黒な画面が出る。

これでWebGLを使い始める準備は完了。