これだけ覚えればできる！Three.jsのGPU Instancing - Qiita

概要 WebGLには拡張機能でインスタンシングなるものがあります。GPUに一つだけ3Dモデルのデータをロードし、GPU側でまとめて描画させることで高速に大量のモデルを描画する手法です。 Three.jsにはそれをラップしたInstancedBufferGeometryがあるのでそちらの使用法を解説したいと思います。 作るもの Gitはこちらです。 デモはこちらです。 どうやって作るの？ 手順は以下のようになります。 ベースとなるモデルのジオメトリを生成 InstancedBufferGeometryを用意 InstancedBufferGeometryに全てのモデルに共通のAttribute（頂点座標やノーマル、インデックスなど）を設定 モデルごとで異なる値のAttributeを生成、InstancedBufferGeometryに設定 シェーダーを作成。 メッシュ（ラインなどでも）を生成