canvas座標系とは htmlにおけるcanvasの左上隅が原点で右側がx+、下側がy+の座標系のことをcanvas座標系と呼ぶことにします。 このcanvas座標系は、縮尺がデバイス座標系と同じでy+の向きが異なるだけですが、あえて取り上げてみることにしました。 canvas座…

ビュー変換とは ワールド座標系からビュー座標系への変換のことで、4x4の行列で表現します。 イメージとしては、この変換により、ビュー座標系の原点が視点となるといった感じです。 この変換は、回転と平行移動を合わせたものです。 この変換にlookAt関数が…

モデル変換とは モデル座標系からワールド座標系への変換のことで、4x4の行列で表現します。 イメージとしては、この変換により、モデルをワールド座標系に配置するといった感じです。 モデル座標系は、自由に指定します。 この変換は、拡大縮小、回転、平行…

概要 モデル座標系(3次元)の点が様々な変換を通じて最終的にはデバイス座標系(2次元)に変換されます。 その過程をレンダリングパイプラインと言います。 その概要は以下です。モデル座標系(ローカル座標系、オブジェクト座標系) - 3次元 ↓ モデル変換 ↓ ワー…

アルゴリズム 三角形の頂点の位置ベクトルを 、線分の端点の位置ベクトルを とします。 三角形の頂点を通る平面の法線ベクトル を求めます。三角形の頂点を通る平面の方程式 を求めます。交点 は以下のようになります。線分の端点が2つとも平面上にある、ま…

はじめに canvas上をクリックして、その点におけるローカル座標系の座標を取得する方法です。 アルゴリズム モデルビュー行列を 、射影行列を とします。 まずは、ローカル座標系(オブジェクト座標系)から正規化デバイス座標系への行列 を求めます。次にクリ…

法線行列とは 光源の方向ベクトルと点の法線ベクトルから輝度を計算しますが、その時の座標系はビュー座標系であることが多いはずです。 法線ベクトルは方向ベクトルなので、モデルビュー行列をそのまま掛けるわけにはいきませんし、 異方性のある拡大縮小や…

はじめに 「WebGL/OpenGLは列優先だから」という説明を見受けますがそれはいったい何なんだってことを説明します。 ちなみに「列優先だから」というだけでは何もわかりません。 行列のメモリレイアウト 行列として4x4を考えます。 そうすると、スカラーが4x4…

はじめに WebGLで使われる最もよく使われるであろうライブラリglMatrixについて解説します。 対象のバージョンは3.4.0です。 引数を省略して、メソッドを使うことは無いようです。その方が使いやすいですね。 私が良く使うものだけを紹介します。 ベクトルは…