WebGL绘制三角形

<!--
 * @Author: 苹果园dog
 * @Date: 2020-11-20 15:42:15
 * @LastEditTime: 2020-11-20 17:34:46
 * @LastEditors: Please set LastEditors
 * @Description: 
    webgl提供了一种很方便的机制，即缓冲区对象（buffer object），它可以一次性地向着色器传入多个顶点的数据。
    缓冲区对象是是webgl中的一块内存区域，我们可以一次性向缓冲区对象填充大量的顶点数据，然后将这些数据保存在其中，共着色器使用。
    我们在initVertexBuffers函数中利用缓冲区对象向顶点着色器传输了多个顶点的数据，所以还需要第三个参数告诉gl.drawArray()函数
    需要绘制多少个顶点。webgl系统并不知道缓冲区中有多少个顶点数据，所以应该显式告知。
    使用缓冲区对象向顶点着色器传输多个顶点数据的五个步骤
    1、创建缓冲区对象（gl.createBuffer()）
    2、绑定缓冲区对象(gl.bindBuffer())
    3、将数据写入缓冲区对象(gl.bufferData())
    4、将缓冲区对象分配给一个attribute变量（gl.vertexAttribPointer（））
    5、开启attribute变量（gl.enableVetexAttribArray()）
 * @FilePath: \web\webgl\ch03\multiPoints.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body onload="main()">
    <canvas id="webgl" width="800" height="800"></canvas>
    <script src="../lib/webgl-utils.js"></script>
    <script src="../lib/webgl-debug.js"></script>
    <script src="../lib/cuon-utils.js"></script>
    <script>
        //顶点着色器
        var VSHADER_SOURCE=`
        attribute vec4 a_Position;
        void main(){
            gl_Position =a_Position;
        }
        `;
        //片元着色器
        var FSHADER_SOURCE=`
        void main(){
            gl_FragColor=vec4(0.0,0.0,1.0,1.0);
        }
        `;

        function main() {
            //获取<canvas>元素
                var canvas = document.getElementById('webgl');
            //获取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);            
            //设置canvas背景色
            gl.clearColor(0.0, 0.0, 0.0, 1.0);
            //清除canvas
            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.5, 0.6,-0.5,0.8,-0.5,0.7,0.7]);
            var n=6;//点的个数
            //创建缓冲区对象
            var vertexBuffer=gl.createBuffer();
            if(!vertexBuffer){
                console.log('failed to create the buffer object!');
                return -1;
            }
            //将缓冲区对象绑定到目标
            gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);
            //向缓冲区对象写入数据
            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;
            }
            //将缓冲区对象分配给a_Position变量
            //gl.vertexAttribPointer(location,size,type,normalized,stride,offset)
            gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,0,0);
            gl.enableVertexAttribArray(a_Position);
            return n;
        }
    </script>
</body>
</html>
posted on 2020-11-24 14:19 苹果园dog 阅读(194) 评论(0) 编辑收藏举报
刷新页面返回顶部
WebGL绘制三角形

导航

公告
