- 博客(151)
- 收藏
- 关注
RSS订阅原创 Games101 透视投影矩阵推导
透视投影，从一个点往外延伸出来一个四棱锥，这个点就是相机，定义 远平面f 和 近平面n，透视投影视椎体的区别就在于它的远平面要比近平面更大，那么如何计算这个不规则的视体矩阵呢？将透视相机的Frustum挤压为正交相机的Cuboid；再用正交投影矩阵相乘与上方变换矩阵相乘，即可得到最终的透视投影矩阵
2024-06-26 01:01:32
589
原创 Games101 正交投影矩阵推导
正交投影不管是远处还是近处，都是直接挤在屏幕上就好，它没有近大远小的效果。首先，把相机放在原点上，往-z方向看，上方向是y；这样摆放相机的好处是，把z坐标扔掉，得到的结果自然而然就是平面的上的一张图。将z扔掉后，所有的像素都在xy平面上了，不管xy的覆盖范围有多大，都给他移到 -1~1 * -1~1 的区间，此时就是正交投影的成像结果
2024-06-24 23:21:46
426
原创 Three.js 性能监测工具 Stats.js
通过stats.js库可以查看three.js当前的渲染性能，具体说就是计算three.js的渲染帧率(FPS),所谓渲染帧率(FPS)，简单说就是three.js每秒钟完成的渲染次数，一般渲染达到每秒钟60次为最佳状态。stats.js下载链接：https://github.com/mrdoob/stats.js。
2024-05-31 23:56:09
409
原创 WebGL画粗线
WebGL绘制模式有点、线、面三种；通过点的绘制可以实现粒子系统等，通过线可以绘制一些连线关系；面就强大了，通过面，我们可以绘制我们想绘制的所有的三维对象。然而，WebGL在绘制线条的时候，存在一个缺陷，那就是在一些机器的一些浏览器上面（大多数情况下）线宽只能设置为1，而不能设置成其他的值。，可以测试自己的电脑是否可以绘制粗线可以看出，我的Chrome有这个 问题基本思路既然画线实现不了加粗，那就使用面来模拟粗线。
2024-05-31 23:21:21
610
原创 Threejs（WebGL）绘制线段优化：Shader修改gl.LINES模式为gl.LINE_STRIP
场景中有大量的非连续线段，每条线段由大量的点构成（曲率较大），并且需要合并渲染，这时，一般考虑使用LineSegments画线，因为LineSegments底层是基于 gl.LINES 的WebGL标准进行绘制，v0 v1、 v1 v2、 v2 v3、 v3 v4.......但是，这种方法会有一定代价。
2024-05-31 21:20:33
1193
原创 Threejs性能优化方向（底层）
一、使用交叉顶点数据：用一个数组交叉地保存顶点数据，而不是用独立的顶点数组保存不同的属性，会得到更好的性能，因为顶点数组具有更好的局部内存。例如，把顶点位置读入到变换前顶点缓存时，很可能会把该顶点的法线信息也读入到变换前的顶点缓存中，在需要时供顶点着色器使用。如下
2024-05-18 00:19:28
1251
原创 WebGL性能优化：退化三角形
第二个三角形带由(V5,V6,V7,)、(V7,V6,V8)这两个三角形组成,它们与元素数组缓存中最后位置的元素索引(5,6,7,8)相对应。首先是第-个三角形带的3个三角形，对应的索引分别为(0,1,2)、(2,1,3)和(2,3,4)。这种不连续性或两个三角形带间存在跳转的解决方法是插入额外的索引（如果使用gl.drawArrays()函数，则插入额外的顶点），这样就得到退化三角形，退化三角形是指三角形至少有两个索引（或顶点）是相同的，因此，存在面积为0的三角形，这样的三角形很容易被GPU检测并删除。
2024-05-17 23:11:54
552
原创 推导 模型矩阵的逆转置矩阵求运动物体的法向量
直接通过模型矩阵自身求变换后的法向量。比如说，一个法向量是（1，0，0），沿Y轴平移2.0个单位后，就变成了（1，2，0）。总之，计算变换后的物体表面的法向量方向时，是求诸于模型矩阵自身，还是模型矩阵的逆转值矩阵，取决于模型矩阵中已经包含的变换类型（平移、旋转或缩放）。这里，为了获得变换后的法向量，我们试图使用模型矩阵乘以原先的法向量（1，1，0）。令模型矩阵为M，令初始的法向量为n，令变换矩阵为M＇，也就是用来正确变换法向量n的矩阵，令垂直于n的向量为s，令变换后的法向量为n＇，令垂直于n＇的向量为s＇
2024-05-12 15:53:44
691
原创 Threejs 动态修改InstanceMesh实例化几何体中单个实例的颜色
instanceMesh是使用InstancedMesh类来创建实例化的几何体。它适用于当需要大量重复的几何体时，但是每个实例之间有不同的变换属性（如位置、旋转、缩放等）。场景：在InstanceMesh多实例创建后，动态修改某个实例的颜色。思路：InstanceMesh外层材质颜色置为白色，创建时调用setColorAt对每个实例设置color要创建后修改，需要为InstanceMesh添加一个数组，按序存放每个小实例的id，根据id检索数组，获取当前实例在多实例中
2024-05-11 23:58:37
562
原创 Threejs Shader动态修改Merge合并几何体中单个Mesh的颜色
动态控制mergeBufferGeometries合并几何体中的单个geometry。方法：给每个几何体添加缓冲属性，存储 id和geometry顶点数量。merge合并后，每个geometry的自定义映射属性会同position一样push在一个数组中要单个控制时：通过id检索映射数组，可以得到当前geometry的顶点数量，从而得到这段顶点在merge的position中的位置根据当前geometry顶点坐标，通过onBeforeCompile，修改材质的着色代码
2024-05-11 22:18:18
946
原创 点乘 及其几何意义
点乘的结果可以用来计算一个向量在另一个向量上的投影。如果有两个向量a和b，a点乘b的结果除以b的长度就是a在b上的投影的长度
2024-04-21 00:19:18
1115
原创 Shader 渐变屏幕
uv坐标：二维空间每个像素绝对位置(0,0 ~ 宽高) gl_FragCoord.xy / 设备分辨率。思考，最终操作改变每个片元的颜色，就是根据uv坐标的不同逐片元计算，使用cos控制周期性效果。cos周期变化：delta时间，每帧间隔为主键。前置工作，创建缓冲，对顶点着色器传递顶点数据。对片元着色传递这些控制变量。
2024-04-20 17:51:32
232
原创 WebGl/Three 粒子系统 人物破碎及还原运动
首先，加载模型，这是万千粒子的前身，模型对象由很多面构成，这些面又是由各个点构成的，所以可以将模型的几何体对象geometry赋给粒子对象，粒子物体用Points方式渲染
2024-04-16 08:59:44
583
原创 双向链表
双向链表：既可以从头遍历到尾,又可以从尾遍历到头。一个节点既有向前连接的引用,也有一个向后连接的引用.双向链表可以有效的解决单向链表中提到的问题。特点：可以使用一个head和一个tail分别指向头部和尾部的节点。每个节点都由三部分组成: 前一个节点的指针(prev)/保存的元素(item)/后一个节点的指针(next)。双向链表的第一个节点的prev是null双向链表的最后的节点的next是nul
2024-03-24 15:51:06
557
原创 单向链表
链表类似于火车: 有一个火车头,火车头会连接一个节点,节点上有乘客(类似于数据),并且这个节点会连接下-个节点,以此类推.要存储多个元素，可以选择链表，但不同于数组，链表中的元素在内存中不必是连续的空间链表的每个元素由一个存储元素本身的节点和一个指向下一个元素的引用(有些语言称为指针或者连接)组成
2024-03-24 15:35:50
246
原创 Threejs/WebGL中旋转变换的原理
在WebGL中，旋转矩阵通常是一种特殊的正交矩阵，它用于在三维空间中执行旋转变换。旋转变换属于正交变换，正交变换是一种线性变换，它保持向量的长度和角度不变，同时保持向量空间的正交性。在上图中，我们把旋转矩阵Rz应用于一个三角形，把他绕Z轴旋转90度，左边是旋转之前的三角形，右图是应用变换矩阵Rz(90度)，即绕Z轴（垂直屏幕向外）旋转90度之后的三角形。另外，正向旋转可以用右手法则来确定，想象一下，用右手握住旋转轴，且大拇指的方向指向这个轴的正方向，则其他手指所指的方向就是正向旋转。
2024-03-09 19:09:48
933
原创 JS将图片转Base64的两种方法
实现原理：使用xhr请求图片,并设置返回的文件类型为Blob对象[xhr.responseType = “blob”]使用FileReader 对象接收blob。
2024-03-08 21:33:31
2839
原创 线性代数：向量空间
目录向量空间 Ax = 0 的解空间S Ax = b 的全体解向量所构成集合不是向量空间 基、维数、子空间自然基与坐标 例1例2
2024-02-21 23:45:19
688
1
原创 线性代数：逆、转置、分块、多项式 矩阵公式总结
目录逆矩阵、转置矩阵重要公式公式 证明矩阵分块基本运算分块的逆（主副对角线分块对角阵的逆、主副对角线上下三角分块对角阵的逆） 例矩阵多项式例克拉默法则及逆矩阵求方程组
2024-01-21 19:01:51
1094
1
原创 线性代数：矩阵运算（加减、数乘、乘法、幂、除、转置）
目录加减数乘 矩阵与矩阵相乘 矩阵的幂矩阵转置 方阵的行列式 方阵的行列式，证明：|AB| = |A| |B|
2024-01-21 18:00:33
911
原创 线性代数——行列式按行（列）展开
一、余子式：将行列式某元素所在行和列的元素全去掉 剩余部分所构成的行列式，称为该元素的余子式二、代数余子式三、行列式等于它的任一行（列）的各元素与对应代数余子式乘积之和四、行列式某行元素（列）与其他行（列）对应元素的代数余子式相乘，然后相加，最后结果为0五、范德蒙德行列式
2024-01-13 16:56:24
1580
2
原创 线性代数——行列式相关性质
一、行列式与它的转置列行列式相等二、对换行列式的两行（列），行列式变号三、行列式某行（列）有公因子k，则k可以提到行列式外四、行列式中若两行成比例，则行列式为0五、行列式的某一行（列）的元素都是两数之和，则六、将行列式的某行（列）元素乘同一数加到另一行（列）对应的元素上，所得新行列式的值等于原行列式七、拉普拉斯展开式八、递推法求n阶行列式九、对称行列式与反对称行列式
2024-01-13 16:28:14
789
原创 C++ 类模板
C++中的类模板允许您创建可以适用于多个类型的通用类。类模板是一种将类型参数化的方法，可以根据需要实例化为具体类型的类。类模板语法:template类template ---声明创建模板typename---表面其后面的符号是一种数据类型，可以用class代替T ---通用的数据类型，名称可以替换，通常为大写字母模板参数列表可以包含一个或多个类型参数，用逗号分
2023-12-16 16:41:47
853
原创 C++ 函数模板
C++中的函数模板是一种通用的编程工具，允许您编写可以适用于不同类型的函数。函数模板是一种将类型参数化的方法，以便在需要时生成特定类型的函数。函数模板的使用：函数模板的声明使用关键字template来指示它是一个模板，后面跟着模板参数列表。使用函数模板有两种方式：自动类型推导、显示指定类型；模板参数列表可以包含一个或多个类型参数，用逗号分隔；在函数声明中，使用模板参数作为函数参数、返回类型或局部变量的类型；函数模板的定义通常放在头文件中。
2023-12-16 15:55:22
887
echarts，想问下箭头所指的文字和小点点是什么配置项
2023-09-15
threejs如何实现链接中的鼠标跟字体交互效果
2023-09-09
TA创建的收藏夹 TA关注的收藏夹
TA关注的人