webGL 绘制基本图元


webGL方法 gl.drawArrays() 即强大又灵活,通过给第1个参数指定不同的值,就能有以7种不同的方式来绘制图形。

gl.POINTS 一系列点
gl.LINES 一系列单独的线段
gl.LINE_STRIP 一系列连接的线段
gl.LINE_LOOP 一系列连接的线段
gl.TRIANGLES 一系列单独的三角形
gl.TRIANGLE_STRIP 一系列条带状的三角形
gl.TRIANGLE_FAN 一系列三角形组成的类似扇形的图形

源码参考

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>绘制三角型</title>
 <script src="../lib/webgl-utils.js"></script>
 <script src="../lib/webgl-debug.js"></script>
 <script src="../lib/cuon-utils.js"></script>
 <script src="main.js"></script>
</head>
<body onload="main()">
 <canvas id="webgl" width="400" height="400">
    你的浏览器暂时不支持canvas, 请升级到最新版本
 </canvas>
</body>
</html>
// 顶点着色器
var VSHADER_SOURCE =
    'attribute vec4 a_Position;\n' +
    'void main() {\n' +
    'gl_Position = a_Position;\n' +
    '}\n';

// 片元着色器
var FSHADER_SOURCE =
    'precision mediump float;\n' +
    'uniform vec4 u_FragColor;\n' +
    'void main() {\n' +
    'gl_FragColor = u_FragColor;\n' +
    '}\n';

// 主程序
function main() {
    var canvas = document.getElementById('webgl');
    var gl = getWebGLContext(canvas);
    if (!gl) {
        console.log('未能获取WebGL的呈现上下文');
        return;
    }

    // 初始化着色器
    if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
        console.log('初始化着色器失败');
        return;
    }

    // 缓冲区
    var n = initVertexBuffers(gl);
    if (n < 0) {
        console.log('未能设置顶点的位置');
        return;
    }

    // 改变点的颜色
    var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
    if (!u_FragColor) {
        console.log('获取u_FragColor的存储位置失败');
        return;
    }
    gl.uniform4f(u_FragColor, 0.5, 0.5, 1.0, 1.0);

    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES , 0, n);
}

function initVertexBuffers(gl) {
    var vertices = new Float32Array([
        -0.5, 0.5,
        -0.5, -0.5,
        0.5, 0,
        -0.6, 0.6,
        0.7, 0.8,
        0.5, 0.5
    ]);
    var n = vertices.length / 2;
    // 1. 创建缓冲区对象
    var vertexBuffer = gl.createBuffer();
    if (!vertexBuffer) {
        console.log('创建缓冲区对象失败');
        return -1;
    }
    // 2. 绑定缓冲区对象
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    // 3. 向缓冲区中写入数据
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

    var a_Position = gl.getAttribLocation(gl.program, 'a_Position');

    if (a_Position < 0) {
        console.log('未能获取a_Position的存储位置');
        return -1;
    }
    // 4. 将缓冲区对象分配给 attribute 变量
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
    // 5. 开启 attribute 变量
    gl.enableVertexAttribArray(a_Position);

    return n;
}

声明:UX|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - webGL 绘制基本图元


心无旁骛似明镜