摘要：
目录 引子 正文 基于 CPU 的风场可视化 OpenGL 基础 获取风场数据 基于 GPU 移动粒子 绘制粒子 绘制粒子轨迹 风场插值查找 GPU 上的伪随机生成器 下一步是什么？ 参考资料 引子 对风场可视化的效果感兴趣，搜资料的时候发现这篇文章，读了后觉得翻译一下以便再次查阅。 原文：How 阅读全文
摘要：
目录 引子 帧缓冲区对象 示例 观察及思考 参考资料 引子 在看 How I built a wind map with WebGL 的时候，里面用到了 framebuffer ，就去查了下资料单独尝试了一下。 Origin My GitHub 帧缓冲区对象 WebGL 有一个能力是将渲染结果作为纹 阅读全文
摘要：
目录 引子 关于透明 α 混合 参考资料 引子 JavaScript WebGL 使用图片疑惑点中提到两张图片叠加，默认情况下，即使有透明的区域也不会透过看到。现在就来看这个透明的处理。 Origin My GitHub 关于透明 说到透明，在颜色编码中由 Alpha 通道负责，透明度存储方式有： 阅读全文
摘要：
目录 引子 为什么纹理坐标取几个点就可以获取图片内容？ 纹理坐标跟顶点坐标一定要一一对应？ 激活纹理和绑定纹理目标的顺序是否有要求？ 相同位置多个纹理会怎么样？ 参考资料 引子 JavaScript WebGL 使用图片之后产生了一些疑问。 Origin My GitHub 为什么纹理坐标取几个点就 阅读全文
摘要：
目录 引子 使用图片 数据 顶点着色器 片元着色器 缓冲纹理坐标数据 加载并创建纹理 绘制 效果 参考资料 引子 JavaScript WebGL 设置颜色效果始终有限，这时候就会想到使用图片，这就涉及到 WebGL 中的纹理使用，比预想中要麻烦的多。 Origin My GitHub 使用图片 纹 阅读全文
摘要：
目录 引子 设置颜色 效果 动态自定义示例 参考资料 引子 JavaScript WebGL 绘制一个面之后想着可以尝试复杂一点的了，没想到设置颜色的时候又出现问题了。 Origin My GitHub 设置颜色 在之前的示例中，都是设置单一的颜色，但每个顶点都可以拥有各自的颜色信息。 基于绘制三角 阅读全文
摘要：
目录 引子 绘制三角形 执行过程 高清处理 绘制矩形 索引缓冲对象 参考资料 引子 JavaScript WebGL 基础疑惑点之后进行了一些优化，然后尝试绘制常见二维的面。 WebGL 中几何体最终都是由三角形构成，由三角形切入比较合适。 Origin My GitHub 绘制三角形 这是示例，基 阅读全文
摘要：
目录 引子 顶点坐标范围为什么要在 -1.0 到 1.0 之间 ？ 多次缓冲数据是覆盖还是增量 ？ vertexAttribPointer 解析顶点一次就足够了 ？ useProgram 函数激活一次就足够了 ？ 基于的坐标系是什么 ？ 常见的变量类型有那些 ？ 内置的输入/输出变量有那些 ？ 参考 阅读全文
摘要：
目录 引子 绘制一条线 创建 WebGL 上下文 准备顶点数据并缓冲 顶点着色器 片段着色器 着色器程序 绘制 示例 参考资料 引子 接着 WebGL 基础概念，做一个绘制直线的简单示例。 主要参考以下两篇文章： 绘制一个点 绘制三角形 Origin My GitHub 绘制一条线 下面不会对每个使 阅读全文
摘要：
目录 引子 简介 状态机 图形渲染管线 顶点着色器 图元装配 几何着色器 光栅化 片段着色器 测试混合 WebGL 中的着色器 参考资料 引子 看了一个库的源码，里面用到了 WebGL ，就开始找 WebGL 的资料。发现相关的知识点很多，按照自己的理解习惯进行了整理记录。 Origin My Gi 阅读全文