2章レンダリング

先ほどの章ではWebGLの歴史をその進化とあわせて紹介しました。また3Dアプリケーションの基本要素とWebGLコンテキストを準備する方法についても説明しました。本章では幾何学的な物体をWebGLで定義する方法について説明します。

WebGLではオブジェクトを「分割統治」法を用いて描画します。つまり複雑なポリゴンはまずトライアングルやライン、ポイントなどの原始的な要素(プリミティブ)に分割されます。その後で幾何的なプリミティブがそれぞれGPU上で並列に処理され、最終的なシーンが構築されます。

本章では次のことを学びます。

  • WebGLでの幾何的な情報の定義と処理
  • ジオメトリ(幾何形状)の操作に関係する重要なAPI
  • JavaScript Object Notation(JSON)を使用した複雑なジオメトリの定義、保存、読込の方法とその理由
  • ジオメトリ操作に関係する属性を管理するステートマシンとしてのWebGLの詳細
  • さまざまなジオメトリモデルの作成と読み込み

2.1 WebGLレンダリングパイプライン

WebGLはよく総合的な3D APIだと考えられていますが、実際のところは単なるラスタライゼーションエンジンにすぎません。入力されたコードに従ってポイントやライン、トライアングルを描画するだけです。それ以上のことをWebGLで実現したければ、ポイントとラインとトライアングルを使用して、目的とするタスクを実現するコードを自分で記述する必要があります。

WebGLは皆さんのマシンのGPU上で動作します。そのため、GPU上で実行されるコードを記述しなければいけません。コードは組となる2つの関数として与える必要があります。それらは頂点シェーダー(vertex shader)と ...

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.