一起学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 地址。

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

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

网站栏目：一起学WebGL：图元的类型
文章URL：http://www.shufengxianlan.com/qtweb/news15/102465.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联