前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用webgl画出一个三角形。
效果图:
在WebGL入门教程(一)-初识webgl中,知道如何绘制一个点
//绘制一个点 gl.drawArrays(gl.POINTS, 0, 1);
但是图形是有多个点组成,那么就应该考虑如何绘制多个点,WebGL提供了一种很方便的机制,缓冲区对象(buffer object),它是WebGL系统中的一块内存区域,它可以一次性向着色器传入多个顶点的数据,然后将这些数据保存在其中,供顶点着色器使用。
首先先找到三个点,操作步骤:
1.创建HTML5 canvas
2.获取画布 canvas 的 ID
3.获取WebGL
4.编译着色器
5.使用缓冲区对象向顶点传入多个顶点数据
6.绘制图像
以上1~4参考:http://www.cnblogs.com/bsman/p/6128447.html
4.编译着色器
修改顶点着色器,去掉gl_PointSize,这个只有绘制点的时候才有用
//顶点着色器程序 var VSHADER_SOURCE = "attribute vec4 a_Position;" + "void main() {" + //设置坐标 "gl_Position = a_Position; " + "} ";
5.使用缓冲区对象向顶点传入多个顶点数据又分为五步
5.1创建缓冲区对象
//创建缓冲区对象 var vertexBuffer = gl.createBuffer();
5.2绑定缓冲区对象
//将缓冲区对象绑定到目标 gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);
其中gl.ARRAY_BUFFER表示缓冲区对象包含了顶点的数据,要是换成gl.ELEMENT_ARRAY_BUFFER则表示包含了顶点的索引;vertexBuffer表示上一步创建的缓存区对象。
5.3将数据写入缓冲区对象
//向缓冲区写入数据 gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);
其中:gl.ARRAY_BUFFER表示目标;vertices表示写入缓存区对象的数据(类型化数组);第三个参数有3种(
gl.STATIC_DRAW:表示只会向缓存区对象写入一次数据,但需要绘制很多次;
gl.STREAM_DRAW:表示只会向缓存区对象写入一次数据,然后绘制若干次;
gl.DYNAMIC_DRAW:表示会向缓存区对象多次写入数据,并绘制很多次;
)
其中第二个参数,类型化数组是WEBGL为了优化性能引入的一种特殊的数组,该数组不支持push,pop有(
Int8Array :8位整形数
UInt8Array :8位无符号整形数
Int16Array :16位整形数
UInt8Array :16位无符号整形数
Int32Array :32位整形数
UInt8Array :32位无符号整形数
Float32Array :单精度32位浮点数
Float64Array :双精度64位浮点数
)属性方法有get(index)、set(index,value)、set(array,offset)、length
这种数组一定要new,否则报错,错误信息如下:
GL ERROR :GL_INVALID_OPERATION :glDrawArrays: attempt to access out of range vertices in attribute 0
例如:
var vertices = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5]);
5.4将缓冲区对象分配给一个attribute变量
//将缓冲区对象分配给a_Position变量 gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
第一个参数:指定待分配attribute变量的存储位置
第二个参数:指定缓存区中每个顶点的分量个数(1~4)
第三个参数:类型有,gl.UNSIGNED_BYTE无符号字节,gl.SHORT短整数,gl.UNSIGNED_SHORT无符号短整数,gl.INT整型,gl.UNSIGNED_INT无符号整型,gl.FLOAT浮点型。
第四个参数:表示是否将非浮点型的数据归到[0,1][-1,1]区间
第五个参数:相邻两个顶点的字节数。默认为0
第六个参数:表示缓存区对象的偏移量(以字节为单位),就是attribute变量从缓冲区中的何处开始存储。
5.5开启attribute变量
//连接a_Position变量与分配给它的缓冲区对象 gl.enableVertexAttribArray(a_Position);
就是开启attribute变量,是缓存区对attribute变量分配生效,使顶点着色器能够访问缓冲区内的数据。
6.绘制图像
WebGL可以绘制的图形有:
点 | gl.POINTS | 一系列点,绘制v0,v1……。 |
线段 | gl.LINES | 一系列单独的线段,绘制(v0,v1),(v2,v3)……如果是奇数,最后一个省略。 |
线条 | gl.LINE_STRIP | 一系列连接的线段,绘制(v0,v1),(v1,v2),(v2,v3)……除了第一个和最后一个,其他的点点即是起点又是终点。 |
回路 | gl.LINE_LOOP | 一系列连接的线段,绘制(v0,v1),(v1,v2),(v2,v3)……(vn,v0),最后一个点会连接起点。 |
三角形 | gl.TRIANGLES | 一系列单独的三角形,绘制(v0,v1,v2),(v3,v4,v5)……如果不是3的倍数,剩下的将会被忽略。 |
三角带 | gl.TRIANGLES_STRIP | 一系列连接的三角形,绘制(v0,v1,v2),(v2,v1,v3),(v2,v3,v4)……以此类推,第二个是(v2,v1,v3)而不是(v1,v2,v3)是为了保持绘制按照逆时针绘制 |
gl.drawArrays(gl.TRIANGLES, 0, n);
完整代码:
html代码
<!DOCTYPE html> <html> <head> <meta lang="en"> <meta charset="UTF-8"> <title>WebGL study</title> <link href="../ClickedPoints/style.css"> <script type="text/javascript" src="../Triangle/js.js"></script> </head> <body> <canvas id="canvas" width="200px" height="200px"></canvas> </body> </html>
javascript代码
/** * Created by HBX on 2016/12/3. */ window.onload = function () { //顶点着色器程序 var VSHADER_SOURCE = "attribute vec4 a_Position;" + "void main() {" + //设置坐标 "gl_Position = a_Position; " + "} "; //片元着色器 var FSHADER_SOURCE = "void main() {" + //设置颜色 "gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);" + "}"; //获取canvas元素 var canvas = document.getElementById(\'canvas\'); //获取绘制二维上下文 var gl = canvas.getContext(\'webgl\'); if (!gl) { console.log("Failed"); return; } //编译着色器 var vertShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vertShader, VSHADER_SOURCE); gl.compileShader(vertShader); var fragShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fragShader, FSHADER_SOURCE); gl.compileShader(fragShader); //合并程序 var shaderProgram = gl.createProgram(); gl.attachShader(shaderProgram, vertShader); gl.attachShader(shaderProgram, fragShader); gl.linkProgram(shaderProgram); gl.useProgram(shaderProgram); //获取坐标点 var a_Position = gl.getAttribLocation(shaderProgram, \'a_Position\'); if (a_Position < 0) { console.log(\'Failed to get the storage location of a_Position\'); return; } var n = initBuffers(gl,shaderProgram); if(n<0){ console.log(\'Failed to set the positions\'); return; } // 清除指定<画布>的颜色 gl.clearColor(0.0, 0.0, 0.0, 1.0); // 清空 <canvas> gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLES, 0, n); } function initBuffers(gl,shaderProgram) { var vertices = new Float32Array([ 0.0, 0.5, -0.5, -0.5, 0.5, -0.5 ]); var n = 3;//点的个数 //创建缓冲区对象 var vertexBuffer = gl.createBuffer(); if(!vertexBuffer){ console.log("Failed to create the butter object"); return -1; } //将缓冲区对象绑定到目标 gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer); //向缓冲区写入数据 gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW); //获取坐标点 var a_Position = gl.getAttribLocation(shaderProgram, \'a_Position\'); //将缓冲区对象分配给a_Position变量 gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); //连接a_Position变量与分配给它的缓冲区对象 gl.enableVertexAttribArray(a_Position); return n; }