风场可视化：绘制粒子
引子
- 颜色数据
- 顶点数据和状态数据
- 顶点着色器
- 片元着色器
- 绘制
风场数据之后，接着去看如何绘制粒子。
-
源库：webgl-wind
-
Origin
-
My GitHub
这里。
示例。
源库：webgl-wind
Origin
My GitHub
示例。
先理一下实现的主要思路：
- 风速映射到像素颜色编码的 R 和 G 分量，由此生成了图片 W 。
- 创建显示用的颜色数据，并存放到纹理 T1 中。
- 根据粒子数，创建存储粒子索引的数据并缓冲。还创建每个粒子相关信息的数据，并存放到纹理 T2 中。
- 加载图片 W 并将图片数据存放到纹理 T3 中。
- 顶点着色器处理的时候，会根据粒子索引从纹理 T2 中获取对应数据，进行转换会生成一个位置 P 传递给片元着色器。
- 片元着色器根据位置 P 从图片纹理 T3 中得到数据并进行线性混合得到一个值 N ，根据 N 在颜色纹理 T1 中得到对应的颜色。
下面就看看具体的实现。
Back to top
这里。
v_particle_pos=vec2(
color.r / 255.0 + color.b,
color.g / 255.0 + color.a);
v_particle_pos=vec2(
color.r / 255.0 + color.b,
color.g / 255.0 + color.a);
源码注释说“从像素的 RGBA 值解码当前粒子位置”，结合前面数据来看，这样的计算方式得到分量理论范围是 [0, 256/255] ，。变量 v_particle_pos 会在片元着色器中用到。
gl_Position = vec4(2.0 * v_particle_pos.x - 1.0, 1.0 - 2.0 * v_particle_pos.y, 0, 1);
gl_Position 变量是顶点转换到裁剪空间中的坐标值，裁减空间范围 [-1.0, +1.0] ，想要显示就必须要在这个范围内，这里的计算方式达到了这个目的。