一起学 WebGL：图元的类型

2024-06-03 11:10:17

大家好，我是前端西瓜哥，今天来说说 WebGL 中的三种图元。

在 WebGL 中，图元有三种：点、线、以及三角形。

绘制的 API 为：

gl.drawArrays(mode, first, count)

这里的 mode 就是要绘制的图元类型。

我们绘制 4 个点，下面是示意图，并按顺序标明绘制方向。

下面来看看这四个顶点在不同图元类型下的效果。

gl.POINTS

点。

一个个绘制顶点，各个顶点之间没有联系。

gl.drawArrays(gl.POINTS, 0, 4);

gl.LINES

线段。

每两个点一组，绘制多条线段。

gl.drawArrays(gl.LINES, 0, 4);

gl.LINE_STRIP

线条（strip）。

多个点按顺序依次相连，形成一条多个线段组成的折线。

gl.drawArrays(gl.LINE_STRIP, 0, 4);

gl.LINE_LOOP

回路。

类似 gl.LINE_STRIP，也是多个点顺序相连，但多了一个头尾顶点相连。

gl.drawArrays(gl.LINE_LOOP, 0, 4);

gl.TRIANGLES

三角形。

三个点为一组，绘制一个三角形。如果最后一组凑不够三个点，会被丢弃不绘制。

gl.drawArrays(gl.TRIANGLES, 0, 4);

gl.TRIANGLE_STRIP

三角带。

有点像 gl.LINE_STRIP，从第二个点开始，会和前两个点为一组绘制一个三角形，也就是一个点最多会被 3 个三角形共享。所以相比 gl.TRIANGLES，可以用更少的信息去绘制同样的效果。

gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

可以看到，第 1、2 个顶点形成的边被两个三角形共用了。

gl.TRIANGLE_FAN

三角扇。

从第二个点开始，和它的上一个点，以及第一个点组成一个三角形。

也就是第一个点会被所有三角形共用。

gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);

适合用来绘制多边形。

动手试试

demo 地址。

https://codesandbox.io/s/47120y?file=/index.js

修改最后一行代码，改为上面的图元模式，看看效果吧。

或者你可以追加一些顶点坐标看看效果，记得不要忘记改 gl.drawArrays 方法的最后一个参数，即使用的顶点的个数。

结尾

我是前端西瓜哥，欢迎关注我，学习更多 WebGL 知识。

一起学 WebGL：图元的类型相关推荐

【零基础学WebGL】矩阵变换
矩阵变量 GLSL ES语言中,通过关键字mat2.mat3.mat4声明矩阵,并提供内置函数mat2().mat3().mat4()构造矩阵. 支持三种方式初始化矩阵: 从第一列开始,逐列指定元素的 ...
学编程买什么类型的电脑适合？从预算到配置，给你安排的明明白白！
在大学刚入学的时候,很多小伙伴对于自己是不是需要电脑,需要什么类型的电脑还不是多清楚. 经过半学期的学习,应该对自己的需求比较明确了. 今天就为大家更新整理了一份笔记本电脑选购指南,大家根据自己的情况 ...
【我的OpenGL学习进阶之旅】介绍一下图元的类型：三角形、直线和点精灵
目录一.图元 1.1 三角形 1.2 直线 1.2.1 直线的宽度 1.2.1.1 线段的宽度用`glLineWidth` API调用指定. 1.2.1.2 支持的线宽范围查询. 1.3 点精灵 1 ...
0基础学C++：整数类型
慕课武汉大学戴光明.马钊老师的课程<零基础C语言>,边听边学边做笔记. 把123放入a房间,把456放入b房间,这样是不行的十进制是给人看的,计算机只能识别二进制假如用一个字节来放整数 ...
python数字类型怎么学,python的数字类型学习之数据类型
1.在python中,数字并不是一个真正的对象类型,而是一组类似类型的分类.它支持通常的数字类型,还能够可以通过常量直接创建数字,还可以处理数字表达式. 2.数字常量: (1)整数和浮点数常量 (2) ...
从头开始学JavaScript (十三)——Date类型
说明:UTC:国际协调日期 GMT:格林尼治标准时间一.date类型的创建使用new操作符和Date()构造函数 var now=new Date(): 传入参数:Date.parse()和Dat ...
【影像组学】理论学习——特征类型
文献阅读的总结,供个人学习. 放射学特征分类 1.基于统计学 (1)直方图特征 (2)纹理特征 2.基于模型 3.基于变换 4.基于形状 1.基于统计学 (1)直方图特征最简单的统计描述符基于全局灰 ...
一起学 WebGL：感受三维世界之视图矩阵
大家好,我是前端西瓜哥.之前绘制的图形都是在 XY 轴所在的平面上,这次我们来加入一点深度信息 z,带你走入三维的世界. 视图矩阵对于一个立方体来说,我们从它的正前方看,不管距离它多远,也只能看到一 ...
跟我学c++中级篇——类型擦除
一.类型擦除很多人一直都认为,类型擦除是一些高级语言(如Java)才具有的,其实在c++中也可以实现类型擦除.那么什么是类型擦除呢?我们都知道,C/c++是一门强类型语言,也就是说,编译器必须知道数 ...

最新文章

热门文章