一起学 WebGL:图元的类型

开发 前端
在 WebGL 中,图元有三种:点、线、以及三角形。今天来说说 WebGL 中的三种图元。

大家好,我是前端西瓜哥,今天来说说 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 方法的最后一个参数,即使用的顶点的个数。

责任编辑:姜华 来源: 前端西瓜哥
相关推荐

2023-05-04 08:48:42

WebGL复合矩阵

2023-06-26 15:14:19

WebGL纹理对象学习

2023-04-13 07:45:15

WebGL片元着色器

2023-04-12 07:46:24

JavaScriptWebGL

2023-03-29 07:31:09

WebGL坐标系

2023-05-16 07:44:03

纹理映射WebGL

2023-05-31 20:10:03

WebGL绘制立方体

2023-04-11 07:48:32

WebGLCanvas

2023-05-17 08:28:55

2023-04-27 08:27:29

WebGL变形矩阵

2023-04-17 09:01:01

WebGL绘制三角形

2023-05-08 07:29:48

WebGL视图矩阵

2022-12-02 14:20:09

Tetris鸿蒙

2022-11-29 16:35:02

Tetris鸿蒙

2022-11-14 17:01:34

游戏开发画布功能

2023-03-30 09:32:27

2023-05-06 07:23:57

2023-11-13 22:27:53

Mapping数据库

2023-02-28 07:28:50

Spritepixijs

2024-02-28 12:12:20

Pipeline数据机制
点赞
收藏

51CTO技术栈公众号