webgl-fundamental
文章平均质量分 95
zgy1111222
这个作者很懒,什么都没留下…
展开
-
webgl入门-矩阵变换
这一篇主要讲解了如何使用矩阵统一变换一个物体的多个顶点,下一篇我们会让矩阵包含多种变换信息,比如移动加旋转,旋转加缩放。原创 2024-05-23 15:44:05 · 878 阅读 · 0 评论 -
webgl入门-绘制三角形
在实际项目中,我们绘制完了图形,往往还会对其进行修改变换,下一篇咱们会说一下如何变换图形。原创 2024-05-23 15:42:27 · 885 阅读 · 0 评论 -
webgl入门-js与着色器间的数据传输
webgl 的同步绘图的现象,其实是由webgl 底层内置的颜色缓冲区导致的。“胸有成竹”大家知道吧?这个颜色缓冲区就是“胸有成竹”的胸,它在电脑里会占用一块内存。在我们使用webgl 绘图的时候,是先在颜色缓冲区中画出来,这样的图像还在胸中,所以外人看不见,只有webgl系统自己知道。在我们想要将图像显示出来的时候,那就照着颜色缓冲区中的图像去画,这个步骤是webgl 内部自动完成的,我们只要执行绘图命令即可。颜色缓冲区中存储的图像,只在当前线程有效。原创 2024-05-14 12:23:47 · 841 阅读 · 0 评论 -
webgl入门
webgl 是在网页上绘制和渲染三维图形的技术,可以让用户与其进行交互。我们之前学过的div+css、canvas 2d 都是专注于二维图形的,它们虽然也能模拟一部分三维效果,但它们和webgl 比起来,那就是玩具枪和AK47的差别。综上所述,webgl 绘图好麻烦啊!麻烦不是不学的理由,因为后面还有three.js 为你排忧解难。那我们为啥不直接学习three.js 呢?那是因为three.js 若是只想画个旋转的立方体还好,若是要深入学习,实现复杂的模型交互逻辑,就必须要有webgl 基础了。原创 2024-05-14 10:26:03 · 790 阅读 · 0 评论 -
WebGL 理论基础 01 WebGL 基础概念
顶点着色器的作用是计算顶点的位置。根据计算出的一系列顶点位置,WebGL可以对点, 线和三角形在内的一些图元进行光栅化处理。当对这些图元进行光栅化处理时需要使用片段着色器方法。片段着色器的作用是计算出当前绘制图元中每个像素的颜色值。着色器获取数据的4种方法。属性(Attributes)和缓冲缓冲是发送到GPU的一些二进制数据序列,通常情况下缓冲数据包括位置,法向量,纹理坐标,顶点颜色值等。 你可以存储任何数据。属性用来指明怎么从缓冲中获取所需数据并将它提供给顶点着色器。 例如你可能在缓冲中用三个32位的浮点原创 2024-03-21 20:19:47 · 664 阅读 · 1 评论