风场可视化：绘制轨迹

引子

绘制轨迹

纹理

屏幕着色器程序

• 顶点数据
• 顶点着色器
• 片元着色器

更新着色器程序

• 顶点数据
• 顶点着色器
• 片元着色器

绘制

疑惑

参考资料

绘制粒子之后，接着去看如何绘制粒子轨迹。

• 源库：webgl-wind

• Origin

• My GitHub

JavaScript WebGL 图片透明处理

JavaScript WebGL 帧缓冲区对象

基于绘制粒子的基础上，增加逻辑的主要思路：

• 初始化时，增加了背景纹理 B 和屏幕纹理 S 。
• 创建每个粒子相关信息的数据时，存了两个纹理 T20 和 T21 中。
• 绘制时，先绘制背景纹理 B ，再根据纹理 T20 绘制所有粒子，接着绘制屏幕纹理 S，之后将屏幕纹理 S 作为下一帧的背景纹理 B 。
• 最后基于纹理 T21 绘制新的结果，生成新的状态纹理覆盖 T20 ，开始下一帧绘制。

不包含随机生成的粒子轨迹效果见示例，下面看看具体的实现。

Back to top

Back to top

Back to top

How I built a wind map with WebGL