出たら消える！実用的？パーティクル実装例

この記事は、Three.js Advent Calendar 2016 7日目の記事です。

#消えたり動いたするパーティクルを作ろう！

パーティクル皆さん好きですか。
色々なwebglのサンプルにてパーティクルは公開されています。どれもキレイですね。一番なんて決めなくていいですね。世界で一つだけの粒です。

さて。その数々のキレイなサンプルですが、「じゃあ、自分のサイトにも実装してみよう！」となると、うーん？となること、ありませんかね。自分はなりました。
何故かというと、パーティクルって、沢山の粒が、【点いたり消えたり】して、もっとこう、パーって動くものだと思うのですよ。
多くのサンプルが、いわば【点いたまま】なんです。消えろよと。点いたり消えたりしろよと。

という感じで無駄に敵を増やしたところで、点いたり消えたりするパーティクルを実装したいと思います。

完成品サンプルはこちら。
zipでくれ

###一番近いサンプルは？
今回の実装に一番近いthree.jsのサンプルは、instanced circle billboards になります。このサンプルで行われていることを紐解いていきましょう。

##サンプルの構成

まず、THREE.InstancedBufferGeometry　と　THREE.CircleBufferGeometry が宣言されています。THREE.CircleBufferGeometry(x,y) は、半径xの y角形を、中心点を持った形で作成してくれるものです。サンプルでは6角形になっています。
次に、これをInstancedBufferGeometryにしています。いんすたんすどばっふぁじおめとりとは耳慣れない言葉です。バッファは、たまに横文字大好きな人が「緩衝」という意味で使うようですが、ここでのイメージは「せき止めておいて、まとめて流す」と考えてくれればいいかなと。

ジオメトリをInstancedBufferGeometryとして割り当てると、「割り当てた数分、同じ図形を表示しろ！」と、GPUに命令をします。ベースとなったサンプルでは、particleCount の数＝7万5千個も一気に表示しろ！となります。

何それ？そんなことをしても、全部同じ位置に同じものが表示されるだけじゃねーの？ってお思いでしょう。普通にやったらそうなりますよね。
そこで、この機能を意味のあるものにするために、シェーダーと、それに渡すための「InstancedBufferAttribute」というものがでてきます。

##InstancedBufferAttributeとは
InstancedBufferAttributeの宣言方法は、奇妙な形になっているかと思います。これが分かりづらい要因ですね。ここは、three.jsよりも、生のwebglにとても近いところを触っているからです。

今更なのですが、three.jsは、javascriptのライブラリです。何を今更です。
もう使いすぎて忘れることもあるのですが、Vector3という【型】は、javascriptにはありません。three.js独自の拡張です。
何故こんなことを今更書くかというと、webglでは、「厳密な型宣言」が必要になるからです。
そのため、「3次元の位置情報、xyzだオラァ」とは、そのままではwebglは認識してくれません。
そのため、データ的には、Vector3型を一回忘れて、全て分解された単なるfloat型の配列として投げられ、後から、**「あ、今のデータ、3つで1組だからヨロシク！」と、シェーダー側で解釈をしてくれるようにする必要があります。**これが156行目の引数の「3」の意味です。
これが、7万5千個をまとめて表示しても、重ならず意味を持って表示されるカラクリです。これ最初に考えた人は、変態に限りなく近い天才だったのでしょう。
ということで、GPUは7万5千＊3、えっといくつだ、たくさん！そんな配列が一度に、しかも複数きても難なく処理してくれます。バケモノですね。

この仕組みさえ分かってしまえば、パーティクルを自由自在に操ることができます。

//パーティクルを初期化する
function makeParticle()
{
	//重要なのはココから
	//円形オブジェクトの作成
	geometry = new THREE.InstancedBufferGeometry();
	geometry.copy( new THREE.CircleBufferGeometry( 1, 6 ) );

	//入れ物を初期化していく
	//シェーダに渡すには明確に【型】が決まってる必要があるため、こういうことを行う
	translateArray = new Float32Array( particleCount * 3); //Vector3を入れるため、float型が3つ
	colArray = new Float32Array( particleCount * 3);     //Vector3を入れるため、float型が3つ
	vectArray = new Float32Array( particleCount * 3);    //Vector3を入れるため、float型が3つ
	scaleArray = new Float32Array( particleCount * 1);
	timeArray = new Float32Array( particleCount * 1);

	//カウンタでぶん回してガンガン初期化
	for ( var i = 0; i < particleCount; i ++) {
		//いわば、パーティクルの初期位置に該当。どうせ書き換わるから気にするな
		translateArray[i * 3 + 0] = 1.0;
		translateArray[i * 3 + 1] = 1.0;
		translateArray[i * 3 + 2] = 1.0;

		//パーティクルの大きさをセットする入れ物
		scaleArray[i * 3 + 0] = 0.0;

		//【色】を管理する入れ物
		colArray[i * 3 + 0] = 0.0;
		colArray[i * 3 + 1] = 1.0;
		colArray[i * 3 + 2] = 0.0;

		//出現してからの時間管理の入れ物
		timeArray[i * 3 + 0] = 0.0;

	}


	//用意した「入れ物」をシェーダー側（VS)に渡すための宣言。
	//ここで重要なのは、JSコード側「のみ」で管理が必要なものは、渡す必要はない、ということ。
	//そしてもちろん、VS側のattribute に、コレと同じ変数が用意されていることが大前提となる
	geometry.addAttribute( "translate", new THREE.InstancedBufferAttribute( translateArray, 3, 1 ) );
	geometry.addAttribute( "col", new THREE.InstancedBufferAttribute( colArray, 3, 1 ) );
	geometry.addAttribute( "movevect", new THREE.InstancedBufferAttribute( vectArray, 3, 1 ) );
	geometry.addAttribute( "scale", new THREE.InstancedBufferAttribute( scaleArray, 1, 1 ) );
	geometry.addAttribute( "time", new THREE.InstancedBufferAttribute( timeArray, 1, 1 ) );

	//シェーダー。困ったらコピペでイケる
	material = new THREE.RawShaderMaterial( {
		uniforms: {
			map: { value: new THREE.TextureLoader().load( "textures/sprites/circle.png" ) },
			time: { value: 0.0 }
		},
		vertexShader: document.getElementById( 'vshader' ).textContent,
		fragmentShader: document.getElementById( 'fshader' ).textContent,
		depthTest: true,
		depthWrite: false,
		transparent:true,
		blending:THREE.AdditiveBlending
	} );

	//
	mesh = new THREE.Mesh( geometry, material );
	mesh.scale.set( 1, 1, 1 );
	scene.add( mesh );

}

##罠！アップデートを忘れるな！

さて、ここまで読んで「もう分かった楽勝。後は読まなくていいや」と思った貴方。おかえりなさい。おそらく貴方が書いたソースは間違っていなくても、きっと「見た目が更新されない」という事態が待っていたでしょう。
これはthree.jsの仕様で、「頂点やマテリアルは、一度宣言した後には、基本的には変わらないことを前提にしている」ということがあるっぽく、変更したら、「今、変わったから！」と明示的に教える必要があります。それが needsUpdate です。

function updateParticle(_dulTime)
{
	var onCount = 0;
	for(var i=0; i < particleCount;i++){
		if(timeArray[i] > 0.0){
			onCount++;
			timeArray[i] += _dulTime;
			if(timeArray[i] > 1000){
					//1秒経過していたら、消滅させる。
					timeArray[i] = 0.0;
					scaleArray[i] = 0.0;
				}
		}
	}

	console.log(onCount);

	geometry.attributes.translate.needsUpdate = true;
	geometry.attributes.col.needsUpdate = true;
	geometry.attributes.movevect.needsUpdate = true;
	geometry.attributes.scale.needsUpdate = true;			
	geometry.attributes.time.needsUpdate = true;

}

ということで、出現管理＆情報更新管理ができたら、最後にこの呪文を唱えて完了です。
このneedsUpdate は、メッシュ頂点やいたるところに必要になることがあるので、何か更新されずにおかしいな？と思ったら、ひとまずやってみる、という勢いでもいいかもしれません。んで、メソッドが無いって怒られたら消す。と。

#まとめ

頭に「なんでサンプルのパーティクルは動かないのばっかりなんだよ！意味ねーだろ！」と言いましたが、きっと理由は、three.jsから離れた内容になるから、だったのかもしれません。っていうか今更ですが、これthree.jsのカレンダー記事で大丈夫ですかね。

ここまで来て理解できてしまった貴方には、生webglの深い沼の中、GPUで暖をとる通路に繋がる階段が目の前に現れました。さぁ恐れず登ってみましょう。
ですが、ちゃんとthree.jsに帰ってきてくださいね。約束ですよ・・・

それが、彼が残した、最期の言葉だった。