webgl入门实例-07顶点缓冲区示例

实现效果

实现代码

html 复制代码
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <meta name="description" content="Render voxel primitives with different shape types." />
    <meta name="cesium-sandcastle-labels" content="Showcases, WEBGL" />
    <title>WEBGL Demo</title>
</head>

<body>
    <canvas id="myCanvas" style="border: 1px solid red;" width='600' height='600'></canvas>

    <script type="text/plain" id="VSHADER_SOURCE">
        attribute vec3 v3Position;
        void main(void)
        {
            gl_Position = vec4(v3Position, 1.0);
        }
    </script>

    <script type="text/plain" id="FSHADER_SOURCE">
        void main(void)
        {
            gl_FragColor = vec4(0.0, 1.0, 1.0, 1.0);
        }
    </script>
    
    <script id="cesium_sandcastle_script">
        "use strict";
        function Init() {
            //Sandcastle_Begin
            var webgl = null;
            var VSHADER_SOURCE = document.getElementById("VSHADER_SOURCE").textContent;
            var FSHADER_SOURCE = document.getElementById("FSHADER_SOURCE").textContent;

            var canvas = document.getElementById('myCanvas');
            webgl = canvas.getContext("webgl");

            webgl.viewport(0, 0, canvas.clientWidth, canvas.clientHeight);

            var vertexShaderObject = webgl.createShader(webgl.VERTEX_SHADER);
            var fragmentShaderObject = webgl.createShader(webgl.FRAGMENT_SHADER);

            webgl.shaderSource(vertexShaderObject,VSHADER_SOURCE);
            webgl.shaderSource(fragmentShaderObject,FSHADER_SOURCE);

            webgl.compileShader(vertexShaderObject);
            webgl.compileShader(fragmentShaderObject);

            if (!webgl.getShaderParameter(vertexShaderObject, webgl.COMPILE_STATUS)) 
            { 
                alert("error:vertexShaderObject");
                return; 
            }
            if (!webgl.getShaderParameter(fragmentShaderObject, webgl.COMPILE_STATUS))
            { 
                alert("error:fragmentShaderObject");
                return;
            }

            var programObject = webgl.createProgram();

            webgl.attachShader(programObject, vertexShaderObject);
            webgl.attachShader(programObject, fragmentShaderObject);

            var v3PositionIndex = 0;
            webgl.bindAttribLocation(programObject, v3PositionIndex, "v3Position");

            webgl.linkProgram(programObject);
            if (!webgl.getProgramParameter(programObject, webgl.LINK_STATUS)) 
            { 
                alert("error:programObject"); 
                return; 
            }

            webgl.useProgram(programObject);

            //1 顶点缓冲区
            //2 索引缓冲区
            //3 纹理
            //4 帧缓冲
            //5 深度缓冲区
            //6 颜色缓冲区
            //7 模板缓冲区

            //1 模型矩阵
            //2 观察矩阵
            //3 投影矩阵
            //4 视口

            var vertexArray = [
                0.0, 1.0, 0.0,//上顶点
                -1.0, -1.0, 0.0,//左顶点
                1.0, -1.0, 0.0//右顶点
            ];

            // 该示例中并未使用到z坐标，因此以下顶点数据与 vertexArray 相等 对应的 ebgl.vertexAttribPointer的第二个参数变为2即可
            // 如：webgl.vertexAttribPointer(v3PositionIndex,2,webgl.FLOAT,false,0,0)
            var vertexArray1 = [
                0.0, 1.0,//上顶点
                -1.0, -1.0,//左顶点
                1.0, -1.0//右顶点
            ];

            // 顶点缓冲区
            var triangleBuffer = webgl.createBuffer(); 
             // 指定绘制所使用的顶点数据 从 该缓冲区中获取
            webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);
            // 分配内存 Float32单精度  Float16半精度
            // webgl.STATIC_DRAW的作用是告诉显卡该数据在内存中不会被改变
            // webgl.STREAM_DRAW数据偶尔变化，变得不多的情况
            // webgl.DYNAMIC_DRAW数据动态变化大
            // 性能优化：尽量减少数据更新，变多少，更新多少
            webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(vertexArray), webgl.STATIC_DRAW); //申请在显卡中开辟新的内存 将数据存入显卡内存

            webgl.clearColor(0.0, 0.0, 0.0, 1.0);
            webgl.clear(webgl.COLOR_BUFFER_BIT);

            webgl.enableVertexAttribArray(v3PositionIndex);

            webgl.vertexAttribPointer(
                v3PositionIndex, 
                3, // 对应gl_Position，对应vec4，vec4中，除第四个分量为1外，其余未分配的将自动填充为0，如第一个点 vec4( 0.0, 1.0, 0.0, 1.0)
                webgl.FLOAT, 
                false, 
                0,  // 指定多少个字节存储一个顶点的信息，如 x, y, z 共3个
                0
            );

            webgl.drawArrays(
                webgl.TRIANGLES, 0, 3 // 绘制3个点，顶点shader就被执行3次

            );
             //Sandcastle_End
        }

        window.onload = function() {
            Sandcastle.finishedLoading();
            Init()
        }
    
    </script>
</body>

</html>