R179 Challenge for simulate wind field animation by three.js

Questions
1

I tried to use three.js R179 to implement GitHub - mapbox/webgl-wind: Wind power visualization with WebGL particles ,

I faced one problem: these wind particles’ trails overlaps with each other, the correct implementation should have no trails overlapping.
My implementation:

image
image1920×967 674 KB

Expected to be like, no trails overlap with others:

image
image1920×979 435 KB

you can checkout my implementation from

Any help would be appreciated.

2

Tried to see the contribution of an isolated area of the wind map. So made a map like this:

image
image360×180 5.55 KB

The result was this:

image
image1428×783 257 KB

Questions:

  1. Is it expected to have the wind window mirrored vertically? (the upper one looks wrong)
  2. Is it expected for the black color to generate the red wind? (most likely rgb=0, but a=1)

When I pick the correct image and overlap it with 180° rotated image, I get winds crossing just like in your result. Here is the “simulated” double image:

image
image1035×526 159 KB

Edit:

In the screenFrag shader, DrawWindParticles.html, line 80, does it look OK if you replace:

vec4 color = texture2D(u_screen, 1.0 - v_tex_pos);

with:

vec4 color = texture2D(u_screen, v_tex_pos);

image
image1413×774 359 KB

Edit 2:

The winds look like not crossing, but somehow they do not adhere to the continents shapes. Maybe the winds are flipped?!?

Edit 3 (last, because I have other things to do)

Maybe the winds look OK (except that they are sparse and too fast). Made only 3 changes:

vec4 color = texture2D(u_screen, v_tex_pos); // line 80
:
vec2 lookup_wind(vec2 uv) { // line 108
	uv.y = 1.0-uv.y; // line 109

image
image1425×782 376 KB

PS. This vertical flipping could be related to some flipY convention or difference, textures could be vertically flipped, sometimes

3

Thank you very much, your reply is very very helpful! I will check your suggestions

4

Maybe in three.js texture has flipY convention. I have made your mentioned two changes.

  1. in screenFrag shader， vec4 color = texture2D(u_screen, v_tex_pos);
  2. in updateFrag shader ，added line: uv.y = 1.0 - uv.y;

Then, I made change in drawFrag shader

void main() {
    vec2 vPos = vec2(v_particle_pos.x, 1.0 - v_particle_pos.y);
    vec2 velocity = mix(u_wind_min, u_wind_max, texture2D(u_wind, vPos).rg);
    float speed_t = length(velocity) / length(u_wind_max);

now the wind speed also matchs the original one. I will commit these three changes to my github repo

5

I got interested and kinda rewrote your whole thing last night:

image
image1920×1080 216 KB

I rewrote the simulation to get rid of the buffers for lines/points and generate them directly using InstancedBufferGeometry…

So now the only large storage is the simulation pingpong buffers themselves.

I made the shader have sphere/plane options.. I added IQ’s cosine palette for color variations…

Added some textures from the threejs earth model…

Basically stripped out everything I could to simplify it.

The only thing still bugging me is the transition across the map seam..

And sometimes if a particle dies and is reborn too close to where it died, it will make a long streak joining the 2 positions.