webgl学习四绘制彩色三角形

作者: MrSwilder | 来源:发表于2020-11-20 11:25 被阅读0次

webgl学习四绘制彩色三角形
《WebGL编程指南》学习笔记6——绘制矩形
WebGL绘制个最简单的三角形
WebGL学习(2) - 3D场景
《WebGL编程指南》学习笔记5——绘制三角形
WebGL编程指南笔记二第三章第四章绘制和变换
WebGL初学：构建一个多彩三角形与矩形
WebGL-绘制三角形
学习WebGL文章目录
《WebGL编程指南》学习笔记20——绘制彩色的三角形

一、代码

<html>

<head>
    <title>
        使用顶点缓冲区
    </title>
    <script type="text/javascript" src="./lib/webgl-debug.js"></script>
    <script type="text/javascript" src="./lib/webgl-utils.js"></script>
    <script type="text/javascript" src="./lib/cuon-utils.js"></script>
</head>

<body onload="main()">
    <canvas id='canvas' width="800" height="800"></canvas>
    <script type="text/javascript">
        //定义变量存储位置
        //attribute：存储顶点位置，经常变的，无精度限定
        //uniform:存储不变的值，有精度限定
        var VShader =
            "attribute vec4 a_color;\n" +
            "varying vec4 v_color;\n" +
            "attribute vec4 a_position;\n" +
            "void main(){\n" +
            "gl_Position=a_position;" +
            "gl_PointSize=10.0;\n" +
            "v_color=a_color;\n" +
            "}"


        var FShader =
            "precision mediump float;\n" +
            "varying vec4 v_color;\n" +
            "void main(){\n" +
            "gl_FragColor=v_color;\n" +

            "}"


        function main() {
            var canvas = document.getElementById("canvas");
            var gl = getWebGLContext(canvas);
            if (!gl) {
                console.log("获取webgl上下文失败")
                return;
            }
            if (!initShaders(gl, VShader, FShader)) {
                console.log("初始化着色器失败");
                return;
            }
            //获取着色器中的变量的地址
            var a_position = gl.getAttribLocation(gl.program, 'a_position')
            if (a_position < 0) {
                console.log("获取a_position变量地址失败")
                return;
            }

            var a_color = gl.getAttribLocation(gl.program, 'a_color')
            if (a_color < 0) {
                console.log("获取a_color变量地址失败")
                return;
            }


            initVertexBuffer(gl, a_position, a_color);
            gl.clearColor(0, 0, 0, 1)
            gl.clear(gl.COLOR_BUFFER_BIT)
            gl.drawArrays(gl.TRIANGLES, 0, 3)


        }


        //初始化颜色缓冲区
        function initVertexBuffer(gl, a_position, a_color) {
            var vertexs = new Float32Array([
                1.0, 0, 0.0, 1, 0, 0, 1, -1.0, 0, 0.0, 0, 1, 0, 1,
                0, 1.0, 0.0, 0, 0, 1, 1
            ])

            //计算所占字节数
            var fsize = vertexs.BYTES_PER_ELEMENT;

            //创建缓冲区
            var vextexBuffer = gl.createBuffer();
            if (!vextexBuffer) {
                console.log("创建缓冲区失败")
                return;
            }
            //绑定到顶点缓冲区
            gl.bindBuffer(gl.ARRAY_BUFFER, vextexBuffer);
            //给顶点缓冲区传值,GL_STATIC_DRAW表示数据变得很少
            gl.bufferData(gl.ARRAY_BUFFER, vertexs, gl.STATIC_DRAW);
            //将顶点缓冲区的值给a_position变量
            gl.vertexAttribPointer(a_position, 3, gl.FLOAT, false, fsize * 7, 0);

            //开启顶点缓冲区中的Attribute类型变量a_position
            gl.enableVertexAttribArray(a_position)
                //将顶点缓冲区的值给a_color变量,7个一组，占四个数字，偏移3
            gl.vertexAttribPointer(a_color, 4, gl.FLOAT, false, fsize * 7, fsize * 3);
            gl.enableVertexAttribArray(a_color)
        }
    </script>
</body>

</html>