WebGL进阶
文章平均质量分 79
哇塞!
山楂树の
Always believe that something wonderful is about to happen.
展开
-
WebGL画粗线
WebGL绘制模式有点、线、面三种;通过点的绘制可以实现粒子系统等,通过线可以绘制一些连线关系;面就强大了,通过面,我们可以绘制我们想绘制的所有的三维对象。然而,WebGL在绘制线条的时候,存在一个缺陷,那就是在一些机器的一些浏览器上面(大多数情况下)线宽只能设置为1,而不能设置成其他的值。,可以测试自己的电脑是否可以绘制粗线可以看出,我的Chrome有这个 问题基本思路既然画线实现不了加粗,那就使用面来模拟粗线。原创 2024-05-31 23:21:21 · 677 阅读 · 0 评论 -
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 · 1334 阅读 · 0 评论 -
Threejs性能优化方向(底层)
一、使用交叉顶点数据:用一个数组交叉地保存顶点数据,而不是用独立的顶点数组保存不同的属性,会得到更好的性能,因为顶点数组具有更好的局部内存。例如,把顶点位置读入到变换前顶点缓存时,很可能会把该顶点的法线信息也读入到变换前的顶点缓存中,在需要时供顶点着色器使用。如下原创 2024-05-18 00:19:28 · 1502 阅读 · 0 评论 -
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 · 584 阅读 · 0 评论 -
推导 模型矩阵的逆转置矩阵求运动物体的法向量
直接通过模型矩阵自身求变换后的法向量。比如说,一个法向量是(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 · 748 阅读 · 0 评论 -
Threejs Shader动态修改Merge合并几何体中单个Mesh的颜色
动态控制mergeBufferGeometries合并几何体中的单个geometry。方法:给每个几何体添加缓冲属性,存储 id和geometry顶点数量。merge合并后,每个geometry的自定义映射属性会同position一样push在一个数组中要单个控制时:通过id检索映射数组,可以得到当前geometry的顶点数量,从而得到这段顶点在merge的position中的位置根据当前geometry顶点坐标,通过onBeforeCompile,修改材质的着色代码原创 2024-05-11 22:18:18 · 1192 阅读 · 0 评论 -
点乘 及其几何意义
点乘的结果可以用来计算一个向量在另一个向量上的投影。如果有两个向量a和b,a点乘b的结果除以b的长度就是a在b上的投影的长度原创 2024-04-21 00:19:18 · 1381 阅读 · 0 评论 -
Threejs 绘制空心圆
指定圆弧半径和分段数量。原创 2024-04-17 20:56:34 · 423 阅读 · 0 评论 -
叉乘 及其几何意义
在几何学中,叉乘的应用涉及到三维空间中的向量、平面和体积等概念,是解决许多几何问题的重要工具。原创 2024-04-17 00:52:42 · 2053 阅读 · 0 评论 -
WebGl/Three 粒子系统 人物破碎及还原运动
首先,加载模型,这是万千粒子的前身,模型对象由很多面构成,这些面又是由各个点构成的,所以可以将模型的几何体对象geometry赋给粒子对象,粒子物体用Points方式渲染原创 2024-04-16 08:59:44 · 618 阅读 · 0 评论 -
Threejs/WebGL中旋转变换的原理
在WebGL中,旋转矩阵通常是一种特殊的正交矩阵,它用于在三维空间中执行旋转变换。旋转变换属于正交变换,正交变换是一种线性变换,它保持向量的长度和角度不变,同时保持向量空间的正交性。在上图中,我们把旋转矩阵Rz应用于一个三角形,把他绕Z轴旋转90度,左边是旋转之前的三角形,右图是应用变换矩阵Rz(90度),即绕Z轴(垂直屏幕向外)旋转90度之后的三角形。另外,正向旋转可以用右手法则来确定,想象一下,用右手握住旋转轴,且大拇指的方向指向这个轴的正方向,则其他手指所指的方向就是正向旋转。原创 2024-03-09 19:09:48 · 981 阅读 · 0 评论