4章カメラ
先ほどの章でESSLについて説明し、頂点シェーダーとフラグメントシェーダーを使用して3Dシーンでのライティングモデルを定義しました。本章ではそれらの概念の理解をさらに深めるため、先ほどのソースコードで見た行列について詳しく学びます。これらの行列をシーンに適用すると、座標を変換して表示している物体を移動できます。先ほど、シーン内のオブジェクトから離れた位置にカメラを配置するために行列を使用したのがその例です。その他、自動車3Dモデルの回転にも行列を使用しました。
通常の3Dアプリケーションにはカメラがありますが、WebGL API自身にはカメラオブジェクトはありません。あるのは行列だけです。これはWebGLにカメラオブジェクト自体を用意するよりも行列を使用したほうが、複雑な投影やアニメーションを実現できるだけの柔軟さが得られるからです。本章では、これらの行列変換が何を意味するか、またそれらを利用してどのように仮想的なカメラを定義して操作するかを学びます。
本章では、次のトピックスについて見ていきます。
- 3D空間から2Dの画面にシーンを投影するための変換
- アフィン変換
- 行列とESSLユニフォームのマッピング
- モデルビュー行列と投影行列
- 法線行列
- カメラの作成と3Dシーン内の移動
4.1 WebGLにはカメラがない
3Dコンピューターグラフィックスに関係する技術なのにカメラがないというのはどういうことでしょう？ 言い方をかえてみましょう。WebGLには操作可能なカメラオブジェクトはありません。しかしそうは言ってもcanvas内に描画されている画像はカメラが捉えたものだとみなせるのではないでしょうか。本章ではWebGLでカメラをどう表現するかという問題について説明します。簡単に言うと、それには4×4行列を使用します。 ...
Get 初めてのWebGL 2 第2版 ―JavaScriptで開発するリアルタイム3Dアプリケーション now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
