webgl应用的整体流程：
获取webgl绘图上下文—-
初始化着色器—
设置点的坐标信息—
设置canvas背景色—-
清空canvas—
绘制
1.webgl借助canvas绘制的
2.绘制线
首先确定线的点坐标，Webgl运行在GPU中，而js代码运行在CPU中，最终将绘制的图像通过htm’l中的canvas元素进行呈现。
需要将js中的坐标传给webgl系统，传送多个点使用的方法是缓冲区对象：缓冲区对象是webgl系统中的一块存储区，在缓冲区对象中保存想要的绘制的所有顶点的数据
缓冲区对象使用方法：gl.createBuffer()使用首先创建缓冲区
gl.bindBuffer:绑定缓冲区对象的作用是指定缓冲区数据的用途，因为缓冲区不仅可以用来存储顶点数据，同样可以存储颜色信息，需要进行明确的确定
gl.bufferData:将js中的顶点坐标数据写入到缓冲区中
gl.vertexAttribPointer():目的是将缓冲区和顶点着色器中存放顶点坐标的变量建立链接，但是此时着色器还不能从缓冲区读取顶点坐标数据
gl.enableVertexAttribArray():正式启用缓冲区和顶点着色器之间的连接，也就是说顶点着色器可以从缓冲区读取顶点坐标值了
最后使用基本图元的绘制方法
gl.drawArrays(int mode,int first,int count)
first:指定从哪个点开始绘制，一般为0
count:表示绘制需要多少个点
mode:表示绘制的方法：
gl.POINTS:绘制一系列的点
gl.LINES:绘制一系列的单独线段，每两个点作为线段，线段之间不想连接
gl.LINE_STRIP:绘制连续的线段
gl.LINE_LOOP:绘制闭合的线圈
gl.TRIANGLE_STRIP:绘制一个三角带
gl.TRIANGLE_FAN:绘制一个三角扇
gl.TRIANGLE:绘制一系列三角形，每三个点为一个三角形
webgl只绘制三种图形：点，线段，三角形
Original: https://blog.csdn.net/qq_40712151/article/details/128413838
Author: 跑错行的人
Title: webgl—将多组点传给webgl系统中
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/794508/
转载文章受原作者版权保护。转载请注明原作者出处！