随笔分类 -  WebGL

Field Play：Runge-Kutta
摘要：目录 引子 相关概念 Runge-Kutta 参考资料 引子 在 Filed Play：简介中提到了这个方法，查资料了解了一下。 Origin My GitHub 相关概念 极限 有时不能直接计算某个值，但可以看看逐渐接近时的情况，看下面的例子： 当 x = 1 时，发现结果是 0/0 ，这个在数学 阅读全文
posted @ 2022-08-22 08:12 XXHolic 阅读(86) 评论(0) 推荐(0) 编辑
Filed Play：简介
摘要：目录 引子 What? How this project works? Float packing 参考资料 引子 在尝试数学函数可视化的时候，发现了一个有趣的库 Field Play ，对 README 中的说明进行部分翻译记录，做个初步了解。 Origin My GitHub What? 让我们 阅读全文
posted @ 2022-08-15 08:47 XXHolic 阅读(59) 评论(0) 推荐(0) 编辑
JavaScript WebGL 绘制顺序
摘要：引子 在 JavaScript WebGL 三维相关概念中尝试一些效果的时候，又碰到了新问题，就去查了资料，自己尝试后总结下。 Origin My GitHub 绘制顺序 之前二维绘制顺序并没有产生明显的不好效果，现在绘制三维影响就比较大了。 先看看二维相同一套顶点不同顺序的效果： 二维面顺序示例 阅读全文
posted @ 2022-08-08 08:36 XXHolic 阅读(120) 评论(0) 推荐(0) 编辑
JavaScript WebGL 三维相关概念
摘要：目录 引子 齐次坐标 空间转换 可视域 参考资料 引子 在 JavaScript WebGL 矩阵之后，发现在实现三维效果之前还有一些概念需要理解，就去查了下资料，按照自己的习惯整合了一下。 Origin My GitHub 齐次坐标 三维坐标理论上三个分量就够了，但在看相关程序的时候，发现会出现 阅读全文
posted @ 2022-08-02 08:38 XXHolic 阅读(311) 评论(0) 推荐(0) 编辑
JavaScript WebGL 矩阵
摘要：目录 引子 简介 单位矩阵 负矩阵 转置 基本运算 矩阵与向量相乘 二维变换 WebGL 二维变换 参考资料 引子 本以为可以开始尝试三维的效果了，查了一下资料之后发现要先了解矩阵。在这里集中收集一下相关基础知识点。 Origin My GitHub 简介 简单来说，矩阵（Matrix）是数字按行和 阅读全文
posted @ 2022-03-26 16:38 XXHolic 阅读(384) 评论(0) 推荐(0) 编辑
JavaScript WebGL 帧缓冲区对象
摘要：目录 引子 帧缓冲区对象 示例 观察及思考 参考资料 引子 在看 How I built a wind map with WebGL 的时候，里面用到了 framebuffer ，就去查了下资料单独尝试了一下。 Origin My GitHub 帧缓冲区对象 WebGL 有一个能力是将渲染结果作为纹 阅读全文
posted @ 2022-02-01 18:40 XXHolic 阅读(221) 评论(0) 推荐(0) 编辑
JavaScript WebGL 图片透明处理
摘要：目录 引子 关于透明 α 混合 参考资料 引子 JavaScript WebGL 使用图片疑惑点中提到两张图片叠加，默认情况下，即使有透明的区域也不会透过看到。现在就来看这个透明的处理。 Origin My GitHub 关于透明 说到透明，在颜色编码中由 Alpha 通道负责，透明度存储方式有： 阅读全文
posted @ 2022-01-17 08:54 XXHolic 阅读(270) 评论(0) 推荐(0) 编辑
JavaScript WebGL 使用图片疑惑点
摘要：目录 引子 为什么纹理坐标取几个点就可以获取图片内容？ 纹理坐标跟顶点坐标一定要一一对应？ 激活纹理和绑定纹理目标的顺序是否有要求？ 相同位置多个纹理会怎么样？ 参考资料 引子 JavaScript WebGL 使用图片之后产生了一些疑问。 Origin My GitHub 为什么纹理坐标取几个点就 阅读全文
posted @ 2022-01-10 08:41 XXHolic 阅读(91) 评论(0) 推荐(0) 编辑
JavaScript WebGL 使用图片
摘要：目录 引子 使用图片 数据 顶点着色器 片元着色器 缓冲纹理坐标数据 加载并创建纹理 绘制 效果 参考资料 引子 JavaScript WebGL 设置颜色效果始终有限，这时候就会想到使用图片，这就涉及到 WebGL 中的纹理使用，比预想中要麻烦的多。 Origin My GitHub 使用图片 纹 阅读全文
posted @ 2022-01-04 08:44 XXHolic 阅读(178) 评论(0) 推荐(0) 编辑
JavaScript WebGL 设置颜色
摘要：目录 引子 设置颜色 效果 动态自定义示例 参考资料 引子 JavaScript WebGL 绘制一个面之后想着可以尝试复杂一点的了，没想到设置颜色的时候又出现问题了。 Origin My GitHub 设置颜色 在之前的示例中，都是设置单一的颜色，但每个顶点都可以拥有各自的颜色信息。 基于绘制三角 阅读全文
posted @ 2022-01-01 13:17 XXHolic 阅读(174) 评论(0) 推荐(0) 编辑
JavaScript WebGL 绘制一个面
摘要：目录 引子 绘制三角形 执行过程 高清处理 绘制矩形 索引缓冲对象 参考资料 引子 JavaScript WebGL 基础疑惑点之后进行了一些优化，然后尝试绘制常见二维的面。 WebGL 中几何体最终都是由三角形构成，由三角形切入比较合适。 Origin My GitHub 绘制三角形 这是示例，基 阅读全文
posted @ 2021-12-20 08:55 XXHolic 阅读(179) 评论(0) 推荐(0) 编辑
JavaScript WebGL 基础疑惑点
摘要：目录 引子 顶点坐标范围为什么要在 -1.0 到 1.0 之间 ？ 多次缓冲数据是覆盖还是增量 ？ vertexAttribPointer 解析顶点一次就足够了 ？ useProgram 函数激活一次就足够了 ？ 基于的坐标系是什么 ？ 常见的变量类型有那些 ？ 内置的输入/输出变量有那些 ？ 参考 阅读全文
posted @ 2021-12-13 08:59 XXHolic 阅读(77) 评论(0) 推荐(0) 编辑
JavaScript WebGL 绘制一条直线
摘要：目录 引子 绘制一条线 创建 WebGL 上下文 准备顶点数据并缓冲 顶点着色器 片段着色器 着色器程序 绘制 示例 参考资料 引子 接着 WebGL 基础概念，做一个绘制直线的简单示例。 主要参考以下两篇文章： 绘制一个点 绘制三角形 Origin My GitHub 绘制一条线 下面不会对每个使 阅读全文
posted @ 2021-12-06 08:51 XXHolic 阅读(308) 评论(0) 推荐(0) 编辑
JavaScript WebGL 基础概念
摘要：目录 引子 简介 状态机 图形渲染管线 顶点着色器 图元装配 几何着色器 光栅化 片段着色器 测试混合 WebGL 中的着色器 参考资料 引子 看了一个库的源码，里面用到了 WebGL ，就开始找 WebGL 的资料。发现相关的知识点很多，按照自己的理解习惯进行了整理记录。 Origin My Gi 阅读全文
posted @ 2021-12-01 08:34 XXHolic 阅读(193) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示