前面已经介绍过了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. 【UWP】通过特定URI打开Win10指定设置页面[转]

    系统设置其实也是一个Modern应用,它与ms-settings:协议进行了关联. 在设置应用中的每一个具体的设置页面都有一个URI(统一资源标识符)与之对应,通过这些URI就可以直达某个具体的设置页 ...

  2. java从基础知识（十）java多线程（下）

    首先介绍可见性.原子性.有序性.重排序这几个概念 原子性:即一个操作或多个操作要么全部执行并且执行的过程不会被任何因素打断,要么都不执行. 可见性:一个线程对共享变量值的修改,能够及时地被其它线程看到 ...

  3. java从基础知识（九）I/O

    java中的流可以从不同的角度进行分类 按流的方向:输入流.输出流(注意这里的输入(read).输出是相对于程序而言的(writer),个人认为从读.写角度理解更为直观) 按处理数据单位:字节流.字符 ...

  4. cookie （储存在用户本地终端上的数据）

    Cookie,有时也用其复数形式 Cookies,指某些网站为了辨别用户身份.进行 session 跟踪而储存在用户本地终端上的数据(通常经过加密).定义于 RFC2109 和 2965 中的都已废弃 ...

  5. JS学习：第一周——NO.3面向对象

    [面向对象基础知识] 封装:对于功能相同的代码,我们只需封装一次,以后再遇到类似的功能,只需调用即可,无需重写,避免大量冗余代码. 对象的特征:方法和属性: 面向对象的特点: 封装:低耦合高内聚: 继 ...

  6. Virtualbox 上调整 Mac OS 分辨率 最简单方法

    Mac OS 分辨率:VBoxManage setextradata "Mac OS X 10.10" VBoxInternal2/EfiGopMode 3       ----代 ...

  7. ubuntu

    mongoChef: http://3t.io/mongochef/download/core/platform/#tab-id-3 背景色改成豆沙绿: /usr/share/themes/Ambia ...

  8. 基于netty轻量的高性能分布式RPC服务框架forest<上篇>

    工作几年,用过不不少RPC框架,也算是读过一些RPC源码.之前也撸过几次RPC框架,但是不断的被自己否定,最近终于又撸了一个,希望能够不断迭代出自己喜欢的样子. 顺便也记录一下撸RPC的过程,一来作为 ...

  9. sqlserver添加主键

    sqlServer中给表添加主键的sql: alter table market_media_medical_history alter column pk_id bigint not null; a ...

  10. vue笔记

    安装vue脚手架工具 sudo cnpm install -g vue-cli