![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
WebGL
文章平均质量分 89
_XXHolic_
这个作者很懒,什么都没留下…
展开
-
Field Play:Runge-Kutta
龙格-库塔法是一种求解常微分方程数值解的单步算法。原创 2022-08-22 08:13:48 · 260 阅读 · 1 评论 -
【译】Filed Play:简介
数学函数可视化翻译 2022-08-15 08:50:22 · 309 阅读 · 0 评论 -
JavaScript WebGL 绘制顺序
WebGL 绘制顺序原创 2022-08-08 08:40:17 · 445 阅读 · 0 评论 -
JavaScript WebGL 三维相关概念
WebGL 三维相关概念理解。原创 2022-08-02 08:46:21 · 396 阅读 · 0 评论 -
JavaScript WebGL 矩阵
引子本以为可以开始尝试三维的效果了,查了一下资料之后发现要先了解矩阵。在这里集中收集一下相关基础知识点。OriginMy GitHub简介简单来说,矩阵(Matrix)是数字按行和列的矩形排列。一般描述先行后列,例如下面 2×3 矩阵:矩阵中每个元素表示也可以根据行和列标记,例如 a1,2 表示第 1 行的第 2 列元素。在应用数学学科中,矩阵常见于统计分析。在物理学中,矩阵于电路学、力学、光学和量子物理中都有应用。计算机科学中,三维动画制作需要用到矩阵。单位矩阵单位矩阵有如原创 2022-03-26 16:40:01 · 1476 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 · 623 阅读 · 0 评论 -
JavaScript WebGL 使用图片疑惑点
引子JavaScript WebGL 使用图片之后产生了一些疑问。OriginMy GitHub为什么纹理坐标取几个点就可以获取图片内容?WebGL 中图像的坐标系原点位于左下角,水平正方向向右,垂直正方向向上。纹理坐标是表示图像中位置的两个分量。第一个分量 s 是距离图像左侧的百分比。第二个分量 t 是距离图像底部的百分比。WebGL 中几何体最终都是由三角形构成,使用图片的时候不一定都是三角形,需要使用纹理坐标指定对应分解的三角形顶点在图像中的位置。为了让纹理坐标适用任何图像,使用百分比指原创 2022-01-10 08:42:26 · 275 阅读 · 0 评论 -
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 阅读 · 0 评论 -
JavaScript WebGL 绘制一个面
引子JavaScript WebGL 基础疑惑点之后进行了一些优化,然后尝试绘制常见二维的面。WebGL 中几何体最终都是由三角形构成,由三角形切入比较合适。OriginMy GitHub绘制三角形这是示例,基于绘制一条直线主要的变化有:顶点绘制图元顶点三角形有三个顶点,在基础疑惑点中知道坐标系是右手坐标系,个人习惯描述顶点的顺序以图形中心为原点,从第一象限到第四象限。 let vertices = [ 0.5, 0.5, 0.0, // 第一象限 -0.5,原创 2021-12-20 08:59:45 · 404 阅读 · 0 评论 -
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 阅读 · 0 评论 -
JavaScript WebGL 绘制一条直线
引子接着 WebGL 基础概念,做一个绘制直线的简单示例。主要参考以下两篇文章:绘制一个点绘制三角形OriginMy GitHub绘制一条线下面不会对每个使用的函数进行详细的解释,个人比较喜欢先对整体逻辑有个感觉,实际使用时再按需去查资料。创建 WebGL 上下文在基础概念中有提过是通过 Canvas 元素使用 WebGL : <canvas id="demo" width="300" height="200"></canvas> c原创 2021-12-06 08:53:54 · 1461 阅读 · 0 评论 -
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 · 1533 阅读 · 0 评论