webgl绘制三角形

作者: antlove | 来源:发表于2019-03-10 13:29 被阅读0次

WebGL绘制个最简单的三角形
《WebGL编程指南》学习笔记6——绘制矩形
WebGL编程指南笔记二第三章第四章绘制和变换
WebGL初学：构建一个多彩三角形与矩形
WebGL-绘制三角形
学习WebGL文章目录
《WebGL编程指南》学习笔记5——绘制三角形
TWaver3D直线、曲线、曲面的绘制
WebGL 绘制Line的bug（一）
webgl绘制三角形

index.html

<!DOCTYPE html>
<html>

<head>
    <meta lang="en">
    <meta charset="UTF-8">
    <title>webgl绘制三角形</title>
    <style>
        body{
            margin:0;
        }
        canvas{
            border:1px solid #999;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="500" height="500"></canvas>
</body>

<script type="text/javascript" src="index.js"></script>

</html>

index.js

// 顶点着色器程序
var VSHADER_SOURCE =`
    attribute vec4 a_Position;
    void main() {
        //设置坐标
        gl_Position = a_Position; 
    } 
`;

// 片元着色器
var FSHADER_SOURCE =`
    void main() {
        //设置颜色
        gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
    }
`;


// 获取canvas元素
var canvas = document.getElementById('canvas');

// 获取绘制二维上下文
var gl = canvas.getContext('webgl');

if (!gl) {
    console.log("Failed");
}

/* 编译着色器 */
var vertShader = gl.createShader(gl.VERTEX_SHADER); // 创建Shader对象 
gl.shaderSource(vertShader, VSHADER_SOURCE); // 将写好的着色器附加到Shader上
gl.compileShader(vertShader); // 编译程序

var fragShader = gl.createShader(gl.FRAGMENT_SHADER); // 创建Shader对象 
gl.shaderSource(fragShader, FSHADER_SOURCE); // 将写好的着色器附加到Shader上
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');

var n = initBuffers(gl,shaderProgram);

// 清除指定<画布>的颜色
gl.clearColor(0.0, 0.0, 0.0, 1.0);

// 清空 <canvas>
gl.clear(gl.COLOR_BUFFER_BIT);

gl.drawArrays(gl.TRIANGLES, 0, n);

/**
 * 初始化缓冲
 * @param {} gl 
 * @param {*} shaderProgram 
 */
function initBuffers(gl, shaderProgram) {
    var vertices = new Float32Array([
        -0.5,-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;
}