WebGLにおけるピック - 機械学習基礎理論独習

はじめに

canvas上をクリックして、その点におけるローカル座標系の座標を取得する方法です。

アルゴリズム

モデルビュー行列を $\bf V$ 、射影行列を ${\bf P}$ とします。
まずは、ローカル座標系(オブジェクト座標系)から正規化デバイス座標系への行列 $\bf M$ を求めます。

$\begin{eqnarray} {\bf M}={\bf P}{\bf V}\tag{1} \end{eqnarray}$

次にクリックされた点の座標が、canvasの左上隅原点で、右側にx+下側にy+という座標系(以下canvas座標系と呼ぶ)なのでこれを正規化デバイス座標系に直します。
クリックされた点のcanvas座標系での座標を $(cx, cy)^\top$ 、正規化デバイス座標系での座標を $(ndx,ndy)^\top$ とします。
また、canvasの幅、高さを $w,h$ とします。
(表示範囲はcanvas全体とします。なのでビューポートの原点はcanvas座標系で(0,0)、幅と高さはcanvasの幅と高さと等しいとします。)

$\begin{eqnarray} \begin{pmatrix}ndx\\ndy\end{pmatrix}=\begin{pmatrix}cx/w\cdot 2 - 1\\(1-cy/h)\cdot 2 - 1\end{pmatrix} \end{eqnarray}$

z座標を -1, 1 として、それを線分の端点 ${\bf x}_0,{\bf x}_1$ とします。

$\begin{eqnarray} &&{\bf x}_0=\begin{pmatrix}ndx\\ndy\\-1\end{pmatrix}\\ &&{\bf x}_1=\begin{pmatrix}ndx\\ndy\\1\end{pmatrix} \end{eqnarray}$

${\bf x}_0,{\bf x}_1$ は正規化デバイス座標系ですので、これをローカル座標系へ変換します。

$\begin{eqnarray} &&{\bf y}_0={\bf M}^{-1}{\bf x}_0\\ &&{\bf y}_1={\bf M}^{-1}{\bf x}_1 \end{eqnarray}$

変換された線分の端点 ${\bf y}_0,{\bf y}_1$ とモデル(三角形群)との交点を計算します。
見つかった交点を ${\bf z}_1,\cdots{\bf z}_n$ とします。
これらを正規化デバイス座標系に変換し( ${\bf M}$ を掛ける)、最もz値が小さい点(一番手前)が求めるべき交点となります。

最後に

WebGLの機能でピック出来るんですかね？知らないので普通に計算しました。
知っていたら教えてください。
今回も図がありませんね、まあ不要でしょう。
線分と三角形の交点については三角形と線分の交点に書きました。