6.绘制三角形

愿你出走半生,归来仍是少年

        上一个案例通过Buffer实现了点集合的传入并一次性绘制多个点。当前案例通过Buffer传入多个点,并一次性通过点绘制出一个三角形。

1.知识点

1.1.gl_PointSize

        只有在绘制点时才有效,该案例中的顶点着色器中已移除此代码。

1.2.gl.drawArrays

        前面案例中都是gl.POINTS参数,标定绘制点。当前案例使用gl.TRIANGLES,实现三角形绘制。

绘制类型
类型 释义 结果(P表示点,数字表示顺序)
POINTS 一系列点 P0、P1、P2
LINES 一系列单独的线段。两个相邻顶点组成一个线段。 (P0,P1) (P2,P3)
LINE_STRIP 一系列连接的线段。 (P0,P1)、(P1,P2)
LINE_LOOP 一系列连接的线段,最后一个点会返回连接第一个点 (P0,P1)、(P1,P2)......(Pn,P0)
TRIANGLES 一系列单独的三角形(只会三个点组成三角形绘制,若最后点不够,将会舍弃) (P0,P1,P2)、(P3,P4,P5)
TRIANGLE_STRIP 一系列带状的三角形 (P0,P1,P2)、(P2,P1,P3)、(P2,P3,P4)
TRIANGLE_FAN         一系列三角形组成的类似于扇形的图形
6.绘制三角形_第1张图片 基础图形

2.代码






3.效果

6.绘制三角形_第2张图片

你可能感兴趣的:(WebGL,typescript,webgl,前端)