WebGL入门教程-webgl绘制三角形

Posted 侯老板

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了WebGL入门教程-webgl绘制三角形相关的知识,希望对你有一定的参考价值。

前面已经介绍过了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绘制三角形的主要内容,如果未能解决你的问题,请参考以下文章

WebGL简易教程:颜色

WebGL入门教程-webgl颜色

WebGL101 Hello WebGL (上)

webgl 三角形绘制

WebGL简易教程:图形变换(模型视图投影变换)

WebGL简易教程:第一个三维示例(使用模型视图投影变换)