しらべものドット宇宙HTMLコーダーが必死こいて〇〇〇を目指すブログ

wgld でWebGLを学ぶ(1)

WebGLは、canvas要素に描画する。canvas要素は javascript で操作すること。

Webでは今のところ、アニメーション処理を一括で管理することができるようなメソッドやオブジェクトが存在しないので、javascript を使って自分で実装する必要がある。

コンテキスト = 描画処理を行なうための API を実装したオブジェクトのこと。

webglコンテキストは3D描画処理を実装することができる。

webGLは、右手座標系。

3D描画は三次元空間をディスプレイ(二次元)に投影するために、座標変換をする必要がある。

座標変換には、モデル変換、ビュー変換、プロジェクション変換の3種類がある。

モデル変換は、三次元空間上の原点からモデルまでの位置についての座標変換。

ビュー変換は、三次元空間上のカメラの位置と向きについての座標変換。

プロジェクション変換は、三次元空間上のどの領域(幅、高さ、奥行き)を決める座標変換。

シェーダ = 座標変換を記述する仕組み。プログラマブルシェーダとも呼ばれる。

シェーダには、頂点シェーダとフラグメントシェーダの2種類があり、それらを自前で実装する必要がある。

頂点シェーダは、ポリゴンの頂点情報を扱う。バーテックスシェーダとも呼ばれる。

フラグメントシェーダは、描画される際のピクセル情報を扱う。

シェーダはHTMLソース内に記述することもできるが、外部ファイルから呼び出すこともできる。

参考サイト:

ブラウザの準備 | wgld.org

WebGL を始める前に canvas を知る | wgld.org

3D 描画の基礎知識 | wgld.org

レンダリングのための下準備 | wgld.org