Three. js particle effect (based on CPU & amp; GPU respectively), three. js particle cpu

Three. js particle effect (based on CPU and GPU respectively), three. js particle cpu

Some time ago, I made a comparison between CPU and GPU, and the particle effect was lost in the group learning WebGL. I didn't give much technical explanation. Some people reported that they didn't quite understand the GPU version. I just wrote an article, focuses on GPU-based versions.

I. Overview

 

If you do not talk nonsense, you should first drop the demo and use a mobile device to clearly feel the performance difference.

Maintain ParticlesDisplacement,Color,Dimensions:
GPU version CPU version

Maintain ParticlesDisplacement:
GPU version CPU version

 

Conclusion:
GPU has obvious advantages when multiple particle feature changes need to be maintained.
Only when maintaining particle displacement, the GPU version is relatively smooth, but the advantage is not obvious.
Of course, this has to be specific to the device, some low-end Android machines, GPU is too scum, not as good as CPU computing.

 

Ii. Technical Implementation

In three. js, particle effects are implemented in three ways:
1. Javascript directly calculates the State Changes of particles, that is, based on CPU implementation;
2. Javascript notifies the lifecycle of the vertex coloring er particles, which are run by the vertex coloring machine, that is, GPU-based;
3. All particle generation and State maintenance tasks are implemented by the Cell Coloring tool, that is, screen effects. They are also implemented based on GPU.
3rd methods this article does not introduce.

 

2.1. CPU-based implementation

Maintenance displacement, color, and size:
Http://tgideas.qq.com/2017/three/shader/particle-gpu/cpu.html
Maintenance shift:
Http://tgideas.qq.com/2017/three/shader/particle-gpu/gpu-position.html

Step 1 & 2:
First, the ry created by 3D software is loaded and then the particle system is generated.

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

It can be seen from the code that the material is set for the integer particle system, so only the particle displacement can be maintained.
What if we want to maintain the particle color and size?
We must set different materials for each particle, which also causes a lot of performance loss.
 
Step 3:
Use Tween to modify all vertex locations.

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;}

From the code, we can see that the state of particles is calculated by the CPU using Javascript.

 

2.2 GPU-based implementation

Maintain particle displacement, color, and size:
Http://tgideas.qq.com/2017/three/shader/particle-gpu/gpu.html

Compared with the CPU implementation flowchart, we will find that Tween does not directly calculate all vertex positions, but only notifies the animation running time to complete the specific operation by the vertex coloring tool.
Since the operation part is in the vertex coloring machine, we need to write the coloring machine (opengl es) by ourselves, so we choose ShaderMaterial in three. js.

Step 1:
First, the particle system is generated:

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 is a channel connecting javascript and the shadow.
Uniforms. val is the animation running value maintained by tween.
VertexShader and fragmentShader, that is, the vertex shader we want to define, and the fragmentShader. They are responsible for the calculation of the specific particle state, which we define on the webpage.

Step 2:
Define vertex shader:

Attribute float size; // particle size attribute vec3 position2; // target vertex position uniform float val; // animation running time varying vec3 vPos; // transmit the vertex position to the void main () {// calculate the particle position 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); // coordinate the vec4 mvPosition = modelViewMatrix * vec4 (vPos, 1.0); gl_PointSize = size * (300.0/-mvPosition. z); gl_Position = projectionMatrix * mvPosition ;}

 

Three. js built-in variables that are automatically passed to the vertex shader:
Attribute position-vertex coordinates
Mat4 modelViewMatrix-model + view Matrix
Mat4 projectionMatrix-Projection Matrix

Define the part element coloring tool:

Uniform sampler2D texture; varying vec3 vPos; void main () {// calculate the particle color by position 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); // vertex map gl_FragColor = gl_FragColor * texture2D (texture, gl_PointCoord );}

　　

Step 3:
Responsible for maintaining the particle running time:

tween = new TWEEN.Tween(pos).to({val: 0}, 2000).onUpdate(callback);function callback(){particleSystem.material.uniforms.val.value = this.val;}

 

Iii. Extended reading

What does THREE. Points do?
In fact, I did not really do anything, mainly to declare that its type is Points.
When we perform rendering, WebGL will draw a Point, that is, call gl. drawArrays (gl. POINTS...
Generally, three. js calls gl. drawArrays (gl. TRIANGLES...

What does THREE. PointsMaterial do?
Similarly, the vertex Material is also one of three. js's simplest classes. Compared with the base class Material, it only transmits the size, that is, the vertex size value.