- 博客(116)
- 收藏
- 关注
RSS订阅原创 JavaScript WebGL 矩阵
引子本以为可以开始尝试三维的效果了，查了一下资料之后发现要先了解矩阵。在这里集中收集一下相关基础知识点。OriginMy GitHub简介简单来说，矩阵（Matrix）是数字按行和列的矩形排列。一般描述先行后列，例如下面 2×3 矩阵：矩阵中每个元素表示也可以根据行和列标记，例如 a1,2 表示第 1 行的第 2 列元素。在应用数学学科中，矩阵常见于统计分析。在物理学中，矩阵于电路学、力学、光学和量子物理中都有应用。计算机科学中，三维动画制作需要用到矩阵。单位矩阵单位矩阵有如
2022-03-26 16:40:01
1476
原创 风场可视化：随机重置
引子在绘制轨迹的效果中，过一段时间就会发现，最后只剩下固定的几条轨迹，原文中也提到了这种现象，也提供了解决思路，个人还是想结合源码再看看。源库：webgl-windOriginMy GitHub原因随着时间推移，有些粒子产生的偏移超过了范围就会消失，所以需要随机重置消失的风粒子。解决方案需要考虑的问题有：什么时候重置？重置的判断条件是什么？重置的方式是什么？什么时候重置？在绘制轨迹中，我们知道了产生的偏移是在最后更新粒子纹理信息阶段，这个时机判断保留新的粒子状态
2022-03-19 09:39:33
551
原创 风场可视化：绘制轨迹
引子了解绘制粒子之后，接着去看如何绘制粒子轨迹。源库：webgl-windOriginMy GitHub绘制轨迹在原文中提到绘制轨迹的方法是将粒子绘制到纹理中，然后在下一帧上使用该纹理作为背景（稍微变暗），并每一帧交换输入/目标纹理。这里涉及两个重点使用的 WebGL 功能点：JavaScript WebGL 图片透明处理JavaScript WebGL 帧缓冲区对象基于绘制粒子的基础上，增加逻辑的主要思路：初始化时，增加了背景纹理 B 和屏幕纹理 S 。创建每个
2022-03-12 09:49:26
1920
原创 风场可视化：绘制粒子
引子了解风场数据之后，接着去看如何绘制粒子。源库：webgl-windOriginMy GitHub绘制地图粒子查看源库，发现单独有一个 Canvas 绘制地图，获取的世界地图海岸线坐标，主要格式如下：{ "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "scalerank": 1, "featu
2022-03-05 09:47:55
1183
1
原创 风场可视化：风场数据
引子了解 WebGL 基础之后，接着去看获取解析风场数据的逻辑，又遇到问题。系统：MacOS版本：11.6OriginMy GitHub安装 ecCodes在文章示例源库的说明中，首先要安装 ecCodes ，尝试使用 HomeBrew 但不行。于是就按照 ecCodes 源库的介绍本地进行编译安装。在进行第 4 步的时候，碰到了问题：No CMAKE_Fortran_COMPILER could be found.查询资料说是缺少 gfortran ，可以使用命
2022-02-20 14:37:52
2759
翻译 【译】A GPU Approach to Particle Physics
引子想到原文中有提到参考的教程，就去看了下，发现对一些逻辑的理解很有帮助，顺便翻译记录一下。原文：A GPU Approach to Particle PhysicsOriginMy GitHub正文我的 GPGPU 系列的下一个项目是一个粒子物理引擎，它在 GPU 上计算整个物理模拟。粒子受重力影响，会与场景几何体产生反弹。这个 WebGL 演示使用了着色器功能，并不需要严格按照 OpenGL ES 2.0 规范要求，因此它可能在某些平台上无法工作，尤其是在移动设备上。这将在本
2022-02-13 12:11:24
248
1
翻译 【译】How I built a wind map with WebGL
引子对风场可视化的效果感兴趣，搜资料的时候发现这篇文章，读了后觉得翻译一下以便再次查阅。原文：How I built a wind map with WebGLOriginMy GitHub正文查看我的基于 WebGL 的风场模拟演示！让我们深入了解它的工作原理。我要坦白的说：在 Mapbox 工作的最后几年里，我像躲避瘟疫一样避免直接的 OpenGL/WebGL 编程。原因之一：OpenGL API 和术语让我深感恐惧。它看起来总是那么复杂、混乱、丑陋和冗长，以至于我永远都
2022-02-07 09:00:10
373
原创 JavaScript WebGL 帧缓冲区对象
引子在看 How I built a wind map with WebGL 的时候，里面用到了 framebuffer ，就去查了下资料单独尝试了一下。OriginMy GitHub帧缓冲区对象WebGL 有一个能力是将渲染结果作为纹理使用，使用到的就是帧缓冲区对象（framebuffer object）。在默认情况下，WebGL 最终绘图结果存储在颜色缓冲区，帧缓冲区对象可以用来代替颜色缓冲区，如下图所示，绘制在帧缓冲区中的对象并不会直接显示在 Canvas 上，因此这种技术也被称为离屏
2022-02-01 18:45:05
3289
原创 JavaScript WebGL 图片透明处理
引子JavaScript WebGL 使用图片疑惑点中提到两张图片叠加，默认情况下，即使有透明的区域也不会透过看到。现在就来看这个透明的处理。OriginMy GitHub关于透明说到透明，在颜色编码中由 Alpha 通道负责，透明度存储方式有：Premultiplied Alpha ：表示颜色信息在存储的时候会将透明信息与 RGB 相乘，比如 RGB 是 (1, 1, 1)，透明度为 0.5 ，那么存储时为：(0.5, 0.5, 0.5, 0.5) 。Non-premultiplied
2022-01-17 09:07:06
621
原创 JavaScript WebGL 使用图片疑惑点
引子JavaScript WebGL 使用图片之后产生了一些疑问。OriginMy GitHub为什么纹理坐标取几个点就可以获取图片内容？WebGL 中图像的坐标系原点位于左下角，水平正方向向右，垂直正方向向上。纹理坐标是表示图像中位置的两个分量。第一个分量 s 是距离图像左侧的百分比。第二个分量 t 是距离图像底部的百分比。WebGL 中几何体最终都是由三角形构成，使用图片的时候不一定都是三角形，需要使用纹理坐标指定对应分解的三角形顶点在图像中的位置。为了让纹理坐标适用任何图像，使用百分比指
2022-01-10 08:42:26
275
原创 JavaScript WebGL 使用图片
引子JavaScript WebGL 设置颜色效果始终有限，这时候就会想到使用图片，这就涉及到 WebGL 中的纹理使用，比预想中要麻烦的多。OriginMy GitHub使用图片纹理(texture)可以用来添加模拟物体的细节，在 3D 游戏中各种模拟的物体都使用了纹理。在绘制矩形的基础上主要有以下几个方面的变化：数据顶点着色器片元着色器缓冲纹理坐标数据加载并创建纹理绘制数据先准备一张图片，然后为了把纹理映射到对应的矩形上，需要指定矩形每个顶点各自对应纹理的那个位置。纹
2022-01-04 08:47:00
706
2
原创 JavaScript WebGL 设置颜色
引子JavaScript WebGL 绘制一个面之后想着可以尝试复杂一点的了，没想到设置颜色的时候又出现问题了。OriginMy GitHub设置颜色在之前的示例中，都是设置单一的颜色，但每个顶点都可以拥有各自的颜色信息。基于绘制三角形主要有下面几方面变化：数据顶点着色器片元着色器缓冲颜色数据数据颜色数据有 4 个分量：R、G、B、A 。 let colors = [ 1.0, 0.0, 0.0, 1.0, // red 0.0, 1.0, 0.0, 1.
2022-01-01 13:34:08
2352
原创 JavaScript WebGL 绘制一个面
引子JavaScript WebGL 基础疑惑点之后进行了一些优化，然后尝试绘制常见二维的面。WebGL 中几何体最终都是由三角形构成，由三角形切入比较合适。OriginMy GitHub绘制三角形这是示例，基于绘制一条直线主要的变化有：顶点绘制图元顶点三角形有三个顶点，在基础疑惑点中知道坐标系是右手坐标系，个人习惯描述顶点的顺序以图形中心为原点，从第一象限到第四象限。 let vertices = [ 0.5, 0.5, 0.0, // 第一象限 -0.5,
2021-12-20 08:59:45
403
原创 JavaScript WebGL 基础疑惑点
引子尝试 JavaScript WebGL 绘制一条直线 之后总算是熟悉了一点，但还是有些疑惑，在此集中记录一下。OriginMy GitHub顶点坐标范围为什么要在 -1.0 到 1.0 之间 ？在绘制直线的示例中，如果按照 Canvas 的大小修改顶点坐标，发现大都看不到对应的点。查资料说每个顶点的 x，y，z 坐标都应该在 -1.0 到 1.0 之间，超出这个坐标范围的顶点都将不可见。原因是整个过程中涉及到多个坐标系统的转换。多个坐标系转换的优点是，一些操作或运算在特定的坐标系中才有意
2021-12-13 09:06:25
172
原创 JavaScript WebGL 绘制一条直线
引子接着 WebGL 基础概念，做一个绘制直线的简单示例。主要参考以下两篇文章：绘制一个点绘制三角形OriginMy GitHub绘制一条线下面不会对每个使用的函数进行详细的解释，个人比较喜欢先对整体逻辑有个感觉，实际使用时再按需去查资料。创建 WebGL 上下文在基础概念中有提过是通过 Canvas 元素使用 WebGL ： <canvas id="demo" width="300" height="200"></canvas> c
2021-12-06 08:53:54
1461
原创 JavaScript WebGL 基础概念
引子看了一个库的源码，里面用到了 WebGL ，就开始找 WebGL 的资料。发现相关的知识点很多，按照自己的理解习惯进行了整理记录。OriginMy GitHub简介WebGL 是一个跨平台、免费的开放式 Web 标准，用于基于 OpenGL ES 的初级 3D 图形 API 。可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形，而无需使用插件。在 JavaScript 中可以通过 HTML5 的 Canvas 元素使用。WebGL 1.0 基于 OpenGL ES 2
2021-12-01 08:50:29
1532
原创 JavaScript 数学曲线—心形线
引子继双角线，接着尝试心形线（Cardioid）。OriginMy GitHub简介Cardioid 是 Castillon 在 1741 年《Philosophical Transactions of the Royal Societyin》的一篇论文中首次使用的名称，它是一条曲线，是圆周上一点绕着半径相等的圆的圆周旋转所形成的轨迹。在笛卡尔坐标系中公式描述：其中 a 为常数。绘制参数化转换：这是示例，绘制主要逻辑代码：function draw() { let a =
2021-11-22 09:00:09
852
原创 JavaScript 数学曲线—双角线
引子继星形线，接着尝试双角线（Bicorn）。OriginMy GitHub简介双角线也称为三角帽（cocked-ha）曲线，是 Sylvester 在 1864 年研究的一组四次曲线的名称。Cayley 在 1867 年研究了同样的曲线。在笛卡尔坐标系中公式描述：其中 a 为常数。绘制参数化转换：这是示例，绘制主要逻辑代码：function draw() { let a = -100, start = 0; let x = 0, y = 0, points = []
2021-11-15 08:57:13
692
原创 JavaScript 数学曲线—星形线
引子继连锁螺线，接着尝试星形线（Astroid）。OriginMy GitHub简介Johann Bernoulli 在 1691-1692 年首次讨论了星形线。它也出现在 Leibniz 1715 年的信件中。它有时被称为四尖瓣，很明显因为它有四个尖。Astroid 直到 1836 年才在维也纳出版的一本书中获得了现在的名称。即使在 1836 年以后，文献中也出现了各种名称，包括 cubocycloid 和 paracycle 。在笛卡尔坐标系中公式描述：其中 a 为常数。绘制
2021-11-08 09:31:47
883
原创 JavaScript 数学曲线—连锁螺线
引子继等角螺线，接着尝试连锁螺线。OriginMy GitHub简介在 阿基米德螺线 中提到的通用的公式，当 c = -2 时，就是连锁螺线，又称为 Lituus 曲线。Roger Cotes 在他的著作 《Harmonia Mensurarum》(1722) 中对该曲线进行了描述。Maclaurin 在 1722 年为曲线命名。在极坐标系中公式描述：公式说明：r ：径向距离。a ：常数。θ ：极角。绘制用 canvas 绘制曲线，canvas 的坐标系是笛卡尔坐标系，需
2021-11-01 08:58:06
313
原创 JavaScript 数学曲线—等角螺线
引子继阿基米德螺线之后，发现等角螺线。OriginMy GitHub简介等角螺线又称为黄金螺线或对数螺线，1638 年 Descartes 发现了等角螺线，后来 Jakob Bernoulli 研究发现了等角螺线自再造的特性，Jakob Bernoulli 对螺线非常着迷，以至于他要求刻在自己的墓碑上，并附词 “eadem mutata resurgo”（“纵使改变，依然故我”）。最后，Torricelli 独立完成了这项工作，并找到了曲线的长度。等角螺线名称的由来，由于其特性：在螺线上任
2021-10-25 09:09:01
1466
原创 JavaScript 数学曲线—阿基米德螺线
引子最近在研究曲线运动的时候，尝试了用 AI 导出的 SVG 路径之后，发现有些还是回归到数学中更合适一些。搜集了一些资料，尝试后总结一下。OriginMy GitHub简介阿基米德螺旋是以公元前 3 世纪希腊数学家阿基米德命名的螺旋。它是一个轨迹，对应于一个点在一段时间内的位置，该点沿着一条以恒定角速度旋转的线以恒定速度离开一个固定点。在极坐标系中的公式描述：当 c = 1 时，就是通常所说的阿基米德螺旋。公式说明：r ：径向距离。a ：常数，起始点与极坐标中心的距离。b ：
2021-10-24 10:04:08
1021
翻译 【译】Learn D3 入门文档：Further Topics
引子继 Learn D3: Interaction 最后一篇。原文：Learn D3: Further Topics版本：Published Mar 24, 2020OriginMy GitHub正文如果你从一开始就坚持这个教程，深呼吸，鼓励一下自己！???? 你已经涵盖了很多领域，并对典型的可视化有了重要的了解。但我们还没有到达顶峰！不，这只是大本营。是时候向上看，看看未来会发生什么。????干净的数据是有效数据可视化的先决条件。想要体验数据收集和清理，请阅读关于
2021-10-08 08:11:17
124
翻译 【译】Learn D3 入门文档：Interaction
引子继 Learn D3: Joins 第八篇，只是英文翻译，可修改代码的部分用静态图片替代了，想要实时交互请阅读原文。原文：Learn D3: Interaction版本：Published Mar 24, 2020OriginMy GitHub正文几乎总是有太多的信息无法合理地“容纳”在图表中。因此，设计不仅仅是决定如何展示某些东西，而是根据我们认为对想象中的读者重要的东西，来决定展示什么和不展示什么。多亏了计算机，真正的读者现在有了发言权：可以根据读者兴趣的需要定制
2021-10-02 07:20:05
164
翻译 【译】Learn D3 入门文档：Joins
引子继 Learn D3: Animation 第七篇，只是英文翻译，可修改代码的部分用静态图片替代了，想要实时交互请阅读原文。原文：Learn D3: Joins版本：Published Mar 24, 2020OriginMy GitHub正文如果你熟悉此教程中的 D3 ，你可能会惊讶于 D3 选择器被提及的如此之少。那是因为你可能不需要它们！D3 选择器适用一个特殊的定位：快速，动态图表的增量更新。如果你关注的是静态图表，或者每帧都可以从头开始重新绘制的图表，那么
2021-09-22 08:53:07
229
翻译 【译】Learn D3 入门文档：Animation
引子继 Learn D3: Shapes 第六篇，只是英文翻译，可修改代码的部分用静态图片替代了，想要实时交互请阅读原文。原文：Learn D3: Animation版本：Published Mar 24, 2020OriginMy GitHub正文与在纸上绘制的图形不同，计算机图形不必是静态的；就像弗兰肯斯坦的怪物一样，他们可以通过动画活过来！✨上面的折线图逐步显示。这个可有可无的效果，应该谨慎使用，因为它会引起注意，但它至少强化了 x 代表时间，并给一个原本枯燥的图
2021-09-13 08:57:34
132
翻译 Learn D3 入门文档：Shapes
引子继 Learn D3: Scales 第五篇，只是英文翻译，可修改代码的部分用静态图片替代了，想要实时交互请阅读原文。原文：Learn D3: Shapes版本：Published Mar 24, 2020OriginMy GitHub正文SVG 和 Canvas 允许任何类型的图形是有意通用的；相比之下，D3 用于可视化，因此提供了专门的形状词汇，这些形状是生成路径数据的函数。路径可以画圆、矩形、直线、曲线、俯冲动作、老虎????， 还有你能想象到的任何事情。路径的
2021-09-06 08:53:08
194
翻译 【译】Learn D3 入门文档：Scales
引子继 Learn D3: Data 第四篇，只是英文翻译，可修改代码的部分用静态图片替代了，想要实时交互请阅读原文。原文：Learn D3: Scales版本：Published Mar 24, 2020OriginMy GitHub正文在 D3 数据图形所有工具中，最基本的是比例尺，它将数据的抽象维度映射到可视变量。为了尝试，看看这些小（但美味！）水果的数据集。我们通常认为维度是空间的，比如三维空间中的位置，但抽象维度不一定是空间的。它可能是定量的，例如上面每个水
2021-09-02 09:02:54
182
翻译 Learn D3 入门文档: Data
引子继 Learn D3: By Example 第三篇，只是英文翻译，可修改代码的部分用静态图片替代了，想要实时交互请阅读原文。原文：Learn D3: Data版本：Published Mar 24, 2020OriginMy GitHub正文在 Observable 上有多种方法可以获取数据。但由于我们刚刚开始，让我们使用最简单的：文件附件。这个笔记本有一个包含每日温度读数的 CSV 文件。我使用 Shift-Command-U ⇧⌘U 键盘快捷键添加它；你还可以通
2021-08-23 08:50:40
419
翻译 Learn D3 入门文档: By Example
引子继 Learn D3: Introduction 第二篇，只是英文翻译，可修改代码的部分用静态图片替代了，想要实时交互请阅读原文。原文：Learn D3: By Example版本：Published Mar 24, 2020OriginMy GitHub正文开始使用 D3 的最佳方式之一是浏览示例库。如果你运气好（而且有很多选择，你的几率也不错），你可能会找到一个可以重新调整用途的示例。这可以节省学习如何从头开始构建的大量精力。例如，要构造一个 treemap ，你
2021-08-16 09:53:50
228
翻译 【译】Learn D3 入门文档: Introduction
引子D3 很早就听说了想要尝试一下，找到的中文版翻译在查 API 的时候可以参考，对于入门不太方便，打算先把官方最新的入门教程同步翻译一下。原文：Learn D3: Introduction版本：Published Mar 24, 2020OriginMy GitHub正文本系列将引导你踏出使用 D3.js 的第一步。在我们开始之前，值得简单考虑一下：为什么要费心学习 D3 ？为什么要在 Observable 上学习？首先，D3 很受欢迎（179M 下载量和 97K
2021-08-09 09:34:13
755
翻译 Lerna 基本概念
引子最近工作上要接触相关的东西，开始熟悉文档，进行相关翻译记录，方便以后查阅。基于 Lerna 版本 : v3.22.1 。Lerna 是一个管理有多个包的 JavaScript 项目的工具。OriginMy GitHub关于将大的代码库分成独立版本的包，对于代码共享，是非常有用的。然而，在许多存储库中进行修改，会变混乱和难以跟踪，跨库的测试，很快会变的复杂。为了解决这些（和很多其它）问题，一些项目将会把他们的代码库组织成多个包的存储库（有些时候称为 monorepos）。像 Babe
2021-08-03 08:53:47
4539
原创 图片 src 为二进制的处理
引子请求一张图片，返回的数据类型是二进制，要将图片显示出来。OriginMy GitHub图片 src 为二进制的处理这种场景下，首先想到图片的 src 为 base64 的情况，了解 Base64 后，认为理论上可行。查询资料，发现了类似的疑惑和问题，在回复中提供的解决方法有：使用 URL.createObjectURL() 方法。使用 window.btoa() 方法。使用 FileReader 对象的 readAsDataURL() 方法。下面分别进行验证。方法URL.c
2021-07-19 16:52:03
622
原创 ASCII 和 Base64
引子在工作中，遇到了图片转换的问题，碰到了几个概念，查了点资料，在此记录一下。OriginMy GitHubASCIIASCII 的全称是 American Standard Code for Information Interchange（美国标准信息交换码），是电子通信的字符编码标准。ASCII 码表示计算机、电信设备和其它设备中的文本。大多数现代字符编码的制订都是基于 ASCII，尽管它们支持很多其它的字符。ASCII 是从电报码中发展出来的。第一次商业使用是由贝尔数据服务公司推广的
2021-07-12 09:15:23
1296
原创 CSS Writing Modes
引子对 CSS Flexible Box Layout 中的一些概念进一步阐述。OriginMy GitHub介绍CSS Writing Modes 定义的 CSS 功能，是为了支持国际上各种书写模式，例如从左到右的拉丁语和印度语，从右到左的希伯来语和阿拉伯语，双向的混合拉丁语和阿拉伯语和垂直的亚洲剧本。在 CSS 中 writing mode （书写模式）是由 writing-mode、direction、text-orientation 属性决定。它主要根据其 inline base d
2021-07-10 09:31:16
288
原创 屏幕尺寸、像素、分辨率和 devicePixelRatio
引子最开始写页面的时候，对页面里面的 px 还是蛮好奇的，电脑上的分辨率好像正好跟页面渲染的宽度值对应，但手机里面却不是这样的，记得当时还去找了相关资料，好像知道是怎么回事。最近脑海里再次想起了这个问题，但已经不知道该如何表述，又没有相关的笔记，这个觉得有必要区分一下相关的概念。OriginMy GitHub屏幕尺寸屏幕尺寸是指屏幕对角线的尺寸，经常看到的描述是英寸（缩写 in），1 in = 2.54 cm 。像素像素是屏幕上图像显示的最小可控元件，它不是一个点或者一个方块，而是一个抽
2021-07-03 09:53:49
736
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人