前面已经介绍过了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;

}

WebGL入门教程(二)-webgl绘制三角形的更多相关文章

  1. WebGL入门教程(五)-webgl纹理

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 WebGL入门教程(四)-webgl颜色 这里就需要用到 ...

  2. WebGL入门教程(四)-webgl颜色

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 颜色效果图: 操作步骤: 1.创建HTML5 canva ...

  3. WebGL入门教程(三)-webgl动画

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL动画有移动.旋转和缩放,我们将移动.旋转和缩放图形,然后将其绘制到屏幕上,称为变换(tr ...

  4. WebGL简易教程(三)：绘制一个三角形(缓冲区对象)

    目录 1. 概述 2. 示例:绘制三角形 1) HelloTriangle.html 2) HelloTriangle.js 3) 缓冲区对象 (1) 创建缓冲区对象(gl.createBuffer( ...

  5. 无废话ExtJs 入门教程二十一[继承：Extend]

    无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承” ...

  6. 无废话ExtJs 入门教程二十[数据交互：AJAX]

    无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...

  7. 无废话ExtJs 入门教程二[Hello World]

    无废话ExtJs 入门教程二[Hello World] extjs技术交流,欢迎加群(201926085) 我们在学校里学习任何一门语言都是从"Hello World"开始,这里我 ...

  8. VB6 GDI+ 入门教程[4] 文字绘制

    http://vistaswx.com/blog/article/category/tutorial/page/2 VB6 GDI+ 入门教程[4] 文字绘制 2009 年 6 月 18 日 7条评论 ...

  9. mongodb入门教程二

    title: mongodb入门教程二 date: 2016-04-07 10:33:02 tags: --- 上一篇文章说了mongodb最基本的东西,这边博文就在深入一点,说一下mongo的一些高 ...

随机推荐

  1. String字符串针对常量池的优化

    String对象是java语言中重要的数据类型,但是不是基本数据类型.相对于c语言的char java做了一些封装和延伸. 针对常量池的优化:当两个String拥有相同的值时,它们只引用常量池中的同一 ...

  2. SQL Server数据库定时自动备份

    SQL Server 数据库定时自动备份[转]   在SQL Server中出于数据安全的考虑,所以需要定期的备份数据库.而备份数据库一般又是在凌晨时间基本没有数据库操作的时候进行,所以我们不可能要求 ...

  3. Bestcoder#5 1002

    Bestcoder#5 1002 Poor MitsuiTime Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (J ...

  4. setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式

    <script type="text/javascript"> setInterval(function(){ var myDate = new Date(); var ...

  5. git操作

    svn终结,git时代来临 git是最好的分布式版本控制系统 廖雪峰的git讲的蛮不错,http://www.liaoxuefeng.com/wiki/0013739516305929606dd183 ...

  6. curl发送请求时携带cookie-转载未验证

    <?php header('Content-Type:text/html;charset=utf-8'); echo "<pre>"; function curl ...

  7. 常用vim插件的安装、使用和管理

      1.Ctags Ctags工具是用来遍历源代码文件生成tags文件,这些tags文件能被编辑器或者其他工具用来快速查找定位源代码中的符号,入变量名,函数名等.比如,tags文件就是Taglist和 ...

  8. VirtualBox注册Com对象失败解决方法

    (1)用CMD命令进入VirtualBox安装目录 (2)在VirtualBox目录下输入命令VBoxSVC /ReRegServer并执行 (3)在VirtualBox目录下输入命令regsvr32 ...

  9. bash学习

    if 的使用 declare -i x=10 if [ $x -lt 14 ];then echo $x'小于14'; elif [ $x -gt 9 ];then echo $x'大于9'; els ...

  10. zabbix安装unixODBC配置完之后报错

    zabbix安装unixODBC配置完之后报错 libmysqlclient_16 not defined in file libmysqlclient_r.so.16 分析 我没有使用centos6 ...