three.js粒子效果（分別基於CPU&GPU實現）

前段時間做了一個基於CPU和GPU對比的粒子效果丟在學習WebGL的群裡，技術上沒有多作講解，有同學反饋看不太懂GPU版本，乾脆開一篇文章，重點講解基於GPU開發的版本。

一、概況

廢話不多說，先丟上demo，用移動裝置更能明顯感覺效能差異。

維護粒子位移、顏色、尺寸：
GPU版本 CPU版本

結論：
同時需要維護多種粒子特徵變化時，GPU有明顯優勢。
只是維護粒子位移時，GPU版本稍流暢，但優勢並不明顯。
當然，這還得具體到裝置，一些中低端Android機器，GPU太渣，不如CPU計算。

二、技術實現

three.js中，粒子效果的實現方式大概分為三種：
1、Javascript直接計算粒子的狀態變化，即基於CPU實現；
2、Javascript通知頂點著色器粒子的生命週期，由頂點著色器執行，即基於GPU實現；
3、粒子生成與狀態維護全部由片元著色器負責，即螢幕特效，同樣是基於GPU中實現。
第3種方式本文暫不介紹。

2.1、基於CPU實現

維護位移、顏色、尺寸：
http://tgideas.qq.com/2017/three/shader/particle-gpu/cpu.html維護位移：
http://tgideas.qq.com/2017/three/shader/particle-gpu/gpu-position.html

步驟1&2：
首先載入由三維軟體製作的幾何體，然後生成粒子系統。

var material = new THREE.PointsMaterial({size:4, color:0xff0000});

var particleSystem = new THREE.Points(geometry , material);

從程式碼中可以看出，材質是針對整介粒子系統設定的，所以只能維護粒子位移。
如果要維護粒子顏色、尺寸呢？
我們必須為每個粒子設定不同的材質，由此也造成不小的效能損耗。

步驟3：
使用Tween修改所有頂點位置。

var tween = new TWEEN.Tween(pos).to({val: 0}, 2000).easing(TWEEN.Easing.Quadratic.InOut).delay(1000).onUpdate(callback);

function callback(){

	var val = this.val;

	var particles = particleSystem.geometry.vertices;

	for(var i = 0; i < particles.length; i++) {

		var pos = particles[i];

		pos.x = position1[i].x * val + position2[i].x * (1-val);

		pos.y = position1[i].y * val + position2[i].y * (1-val);

		pos.z = position1[i].z * val + position2[i].z * (1-val);

	}

	particleSystem.geometry.verticesNeedUpdate = true;

}

從程式碼中可以看出，粒子的狀態都是通過Javascript，由CPU來計算。

2.2、基於GPU實現

維護粒子位移、顏色、尺寸：
http://tgideas.qq.com/2017/three/shader/particle-gpu/gpu.html

對比CPU實現流程圖，我們會發現，Tween並不直接計算所有頂點位置，而是隻通知動畫執行時間，由頂點著色器來完成具體運算。
既然運算部分在頂點著色器，那麼，需要我們自己書寫著色器（opengl es），所以我們選用three.js中的ShaderMaterial。

步驟1：
首先生成粒子系統：

var uniforms = {

	texture:{value: new THREE.TextureLoader().load( "dot.png")},

	val: {value: 1.0}

};

var shaderMaterial = new THREE.ShaderMaterial({

	uniforms:     uniforms,

	vertexShader:   document.getElementById('vertexshader').textContent,

	fragmentShader: document.getElementById('fragmentshader').textContent,

	blending:       THREE.AdditiveBlending,

	depthTest:      false,

	transparent:    true

});

particleSystem = new THREE.Points(moreObj, shaderMaterial);

uniforms是連線javascript與著色器的通道。
uniforms.val 即由tween來維護的動畫執行值。
vertexShader和fragmentShader，即我們要定義的頂點著色器，和片元著色器，它們負責具體的粒子狀態的運算，我們定義在網頁中。

步驟2：
定義頂點著色器：

attribute float size; // 粒子尺寸

attribute vec3 position2; // 目標頂點位置

uniform float val; // 動畫執行時間

varying vec3 vPos; // 將頂點位置傳輸給片元著色器

void main() {

    // 計算粒子位置

    vPos.x = position.x * val + position2.x * (1.-val);

    vPos.y = position.y* val + position2.y * (1.-val);

    vPos.z = position.z* val + position2.z * (1.-val);

    // 座標轉換

    vec4 mvPosition = modelViewMatrix * vec4( vPos, 1.0 );

    gl_PointSize = size * ( 300.0 / -mvPosition.z );

    gl_Position = projectionMatrix * mvPosition;

}

three.js內建，自動傳遞給頂點著色器的變數：
attribute position - 頂點座標
mat4 modelViewMatrix - 模型+檢視矩陣
mat4 projectionMatrix - 投影矩陣

定義片元著色器：

uniform sampler2D texture;

varying vec3 vPos;

void main() {

    // 計算粒子顏色，通過位置

    vec3 vColor = vec3(1.0, 0., 0.);

    vColor.r = vPos.z/50.;

    vColor.g = vPos.y/50.;

    vColor.b = vPos.x/50.;

    gl_FragColor = vec4(vColor, 1.0 );

    // 頂點貼圖

    gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );

}

步驟3：
負責維護粒子執行時間：

tween = new TWEEN.Tween(pos).to({val: 0}, 2000).onUpdate(callback);

function callback(){

	particleSystem.material.uniforms.val.value = this.val;

}

三、延伸閱讀

類THREE.Points做了什麼？
其實真沒幹什麼，主要是申明它的type是Points。
當我們執行渲染時，WebGL會繪製Point，即呼叫gl.drawArrays(gl.POINTS…
而通常，比如type為Mesh時，three.js會呼叫gl.drawArrays(gl.TRIANGLES…

類THREE.PointsMaterial做了什麼？
同樣，點材質也是three.js最簡單的類之一，相對於基類Material，它多做的事情只是傳遞了size，即點的尺寸這個值。

three.js粒子效果（分別基於CPU&GPU實現）