Reading data from a shader

Question

I'm trying to learn how to use the gpu features for threejs and webgl, so I just analyze the code to get some patterns, methods, how everything is done, and I need an explanation of the code.

I found this example: One million particles , which seems to be the simplest of them, which includes calculations done in shaders and spitting. p>

So, from what I found out: - Data on the speed and position of particles are stored in textures passed to the shaders to perform calculations there and get them for updating

• Particles are randomly generated on the plane no more than the size of the texture?

  for (var i = 0; i <1000000; i ++) {

  particles.vertices.push(new THREE.Vector3((i % texSize)/texSize,
  

  Math.floor (i / texSize) / texSize, 0)); }

• I do not see any particle position updates? How data from shaders are extracted and updated by each particle?

  does selection () only transmit the position of the mouse to calculate the direction of motion of the particles?

• Why are there 2 buffers? and 8 (4 pairs of fragment and vector) shaders? Is it not enough to calculate speed and position?

• How does a shader update a texture? I just see that the reading from him is not written?

Thanks in advance for any explanation!

Answer 1

How did they do it:

In this post, I will explain how these results are calculated almost exclusively on gpu via WebGL / Three.js - this may look a bit messy, as I use the integrated graphics of the Intel i7 4770k:

---

:

-gpu: . 1024x1024 , , - .

RGB 0... 255. 32- (R + G + B + ) , . ( , /).

. :

• ( ) ('randShader')
• ('velShader')
• ('posShader')
• ('dispShader') **

.

---

2: :

1 , . 2 "vUv" , x y , .

- , ( RGB- , - gpu). id="velFrag", uniform vec3 targetPos;. CPU, . ( , , -1.00f + 1.00f), , FEW, ).

? , , , - . : / , .

.

---

3: :

. , - Texture. , ( ), , Texture :

id="posFrag" (posTexture velTexture) . x y ( ).

.

---

4: - (= )

, , , / positionTexture . , RGB x, y ( ).

// From <script type="x-shader/x-vertex" id="dispVert">
vec3 mvPosition = texture2D(posTex, vec2(x, y)).rgb;
gl_PointSize = 1.0;
gl_Position = projectionMatrix * modelViewMatrix * vec4(mvPosition,1.0);

( , 20 , ).

// From <script type="x-shader/x-fragment" id="dispFrag">
gl_FragColor = vec4(vec3(0.5, 1.0, 0.1), 0.05);

.

---

, , :-) . , - - , .