webgl图形基础组成

莫石
338 阅读3分钟

「这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战」

webgl作为一个低级绘图语言，只能画三种图形，那就是点线面。

image.png

顶点

一般来说，顶点就是拿来定位的，很少用顶点去组合图形。绘制顶点只关心两个属性，点位和大小，gl_Position = a_Position; gl_PointSize = 10.0;。如上图，右上角的小方块就是一个顶点，我已经将整个区域作了一定的旋转变换，但是这个顶点的位置还是那么方方正正，毫不动摇。画图的时候只要将模式选择 gl.drawArrays(gl.POINTS,0,1)//绘制顶点，即可绘制顶点。

线段

我们都知道，两点确定一条直线（或者线段）。所以画线至少需要两个顶点。但是gl.vertexAttrib3f(a_Position, .1, .5, 0); vertexAttrib函数一次就只能输入一个点，再次调用此函数就会覆盖之前的数据。要想绘制多点，我们需要一个缓冲区，来存储顶点数据。

使用缓冲区的流程是 创建--> 绑定缓冲对象--> 初始化缓冲区（的数据）--> 告诉gl如何从缓冲区里取对应的顶点数据--> 激活对应的顶点属性

      // 缓冲对象
        const vertexBuffer = gl.createBuffer();
        // 绑定 缓冲对象 
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        // 写入数据
        gl.bufferData(gl.ARRAY_BUFFER, ponitsStrip, gl.STATIC_DRAW);
        // 修改顶点坐标        index, size, type, normalized, stride, offset
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
    // 赋能批处理
        gl.enableVertexAttribArray(a_Position);

上述步骤结束后，我们就能一次性使用多个点了。 将我们的绘制模式改为线。webgl有三种线模式，和svg的line polygon polyline 正好是一样的

LINES0x0001传递给  drawElements 或drawArrays 画线段。 每个顶点链接到它的下一个顶点。每两点画一条线段。
LINE_LOOP0x0002传递给  drawElements 或drawArrays 画回路。 每两个点被当作是一条独立的线段。线段首尾相连。
LINE_STRIP0x0003传递给  drawElements 或drawArrays 画一个从第一个顶点到最后一个顶点绘制一组相连的线段。

对于 lines 必须是偶数的点位，如果你只给了三个顶点，那么只能画出一条线段，最后一个顶点会被忽略

line-loop 就是一笔画连点成线，并最终回到起点，所以可用来画封闭多边形。

line-strip 和上面一样，只不过最后一点在哪，画笔就停在哪，所以一般我们称之为多段线。

三角形

对于面来说，wegl只能画三角形，任意图形都是由一个个三角形组合而成，最简单的就是拿两个直角三角形组成一个矩形。三角形是填充画法，如果你想画出三角线框，还是得用line. 三角形也有三种模式

 gl.drawArrays(gl.TRIANGLES, 0, 6) // 填充的三角形 四个点结果直接忽略了第四个点,6个就直接两个三角形 没有关联
   gl.drawArrays(gl.TRIANGLE_FAN, 0, 5) //  ， 下一个三角形以上一个三角形的第三条边 相反方向（下一个的第一个条边） 三角扇
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 5) // ， 下一个三角形以上一个三角形的第二条边起始相反方向（下一个的最后一条边）  下一个点为第二个点 三角扇

triangles 是独立三角形 ，如果你只给了四个顶点，那么只能画出一个三角形，最后一个顶点会被忽略

TRIANGLE_FAN 是三角扇， 连续绘制三角形，会复用上一个三角形的第三条边。

TRIANGLE_STRIP 是三角带， 连续绘制三角形，会复用上一个三角形的第二条边。

三角扇和三角带的具体细节下次再写。

avatar
文章
阅读
粉丝