f:id:naoyashiga:20160919203815p:plain poop particles

buffergeometry example

buffergeometryを使えば、よりWebGL ネイティヴに近い書き方ができるらしい。Particle(頂点だけなので四角)を大量に描画することに向いている。 three.js examples

es6記法で書き直す

exampleはシンプルに書かれているが、classを使って書かれていないので少しわかりにくい。es6記法で書き直してみた。

Code

Line、Particle、PointCloudクラスを作ってみた。 3-shit/demo/particles at master · naoyashiga/3-shit · GitHub

this.pointCloud.positions[i * 3] = p.location.x
this.pointCloud.positions[i * 3 + 1] = p.location.y
this.pointCloud.positions[i * 3 + 2] = p.location.y

BufferAttributeを使う場合は、頂点データを一つの配列で持つ必要があるみたい。多次元配列で持つのではなく、とても長い配列で各頂点のXYZ座標を持つ。なので配列のindexを指定するときは、上のようにX座標のを保持している配列のindexからインクリメントさせている。これはめんどうだったw Particle classのインスタンスをそのまま配列に入れて管理したい。