webgl—将多组点传给webgl系统中
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只绘制三种图形:点,线段,三角形