読者です 読者をやめる 読者になる 読者になる

not good but great

プログラミング、アート、映画・本の感想について書きます。

threejsのbuffergeometry exampleをes6で書いてみた

THREE.js Javascript GLSL WebGL

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のインスタンスをそのまま配列に入れて管理したい。

参考

three.jsでジェネラティブアートっぽいことするのに必要な知識 - Processing中毒者の嘔吐物