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>
相关推荐
三维搬砖者6 小时前
基于 Three.js 开发三维引擎-01点类:从原理到实践
webgl·three.js
魂断蓝桥66621 小时前
如何基于three.js(webgl)引擎架构,实现3D微信小游戏(第一课)
webgl·three.js·微信小游戏·three.js路径规划、三维a*算法、javascript三维导航,·three.js小游戏
康康的幸福生活1 天前
webgl2 方法解析: getContext()
webgl
庖丁解牛2 天前
3. Babylonjs 中获取相机方向相关
前端·webgl·游戏开发
康康的幸福生活2 天前
webgl2 方法解析: createBuffer()
前端·javascript·webgl
康康的幸福生活3 天前
webgl2 方法解析: shaderSource()
webgl
魂断蓝桥6664 天前
如何基于three.js(webgl)引擎架构,实现3D医院、3D园区导航,3D科室路径导航
webgl·数字孪生·threejs·3d定位、三维室内定位、3d建筑·three.js路径规划、三维a*算法、javascript三维导航,·3d医院·3d导航·园区导航
康康的幸福生活13 天前
webgl2 方法解析: SCISSOR_TEST
javascript·webgl
魂断蓝桥66615 天前
如何基于three.js(webgl)引擎架构,实现3D机房园区,数据中心消防系统
webgl·数字孪生·three.js·物联网3d·3d机房·、3d工厂、3d工业园区、智慧制造、智慧工业、智慧工厂·bim管理系·3d消防·消防演习模拟
康康的幸福生活17 天前
webgl2 方法解析: colorMask()
webgl