使用WebGL绘制一个三角形

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #canvas {
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

    <!-- 顶点着色器 -->
    <script id="vertexShader" type="x-shader/x-vertex">
        attribute vec4 a_Position;  // 定义一个四维向量,后面我们用js改变这个变量的值，从而实现点位变化
        void main() {
            // 设置点位
            gl_Position = a_Position;

        }
    </script>

    <!-- 片元着色器 -->
    <script id="fragmentShader" type="x-sahder/x-fragment">
        void main() {
            gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);  // 设置颜色
        }
    </script>

    <script>
        const canvas = document.querySelector("#canvas");
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // 获取着色器文本
        const vsSource = document.querySelector("#vertexShader").innerText;
        const fsSource = document.querySelector("#fragmentShader").innerText;

        const gl = canvas.getContext("webgl");  // 获取三维画笔

        // 初始化着色器
        initShaders(gl, vsSource, fsSource);

        // 顶点数据
        const vertices = new Float32Array([0, 0.2, -0.1, -0.1, 0.1, -0.1]);

        // 缓冲对象
        const vertexBuffer = gl.createBuffer()

        // 绑定缓冲对象
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

        // 写入数据
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        // 获取attribute变量
        const a_Position = gl.getAttribLocation(gl.program, 'a_Position');

        // 修改attribute变量
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

        // 开启批处理功能，这样才能绘制多个点
        gl.enableVertexAttribArray(a_Position);

        gl.clearColor(0, 0, 0, 1);   // 声明颜色  rgba
        gl.clear(gl.COLOR_BUFFER_BIT);  // 刷底色

        // 绘制顶点, 3为绘制三个点
        // gl.TRIANGLES 为绘制一个三角形
        gl.drawArrays(gl.TRIANGLES, 0, 3);


        // 初始化着色器
        function initShaders(gl, vsSource, fsSource) {
            // 创建程序对象
            const program = gl.createProgram();

            // 建立着色器对象
            const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
            const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);

            // 把顶点着色对象装进程序对象中
            gl.attachShader(program, vertexShader);
            // 把片元着色对象装进程序对象中
            gl.attachShader(program, fragmentShader);

            // 连接webgl上下文对象和程序对象
            gl.linkProgram(program);

            // 启动程序对象
            gl.useProgram(program);

            gl.program = program;

            return true;
        }

        function loadShader(gl, type, source) {
            // 根据着色类型，建立着色器对象
            const shader = gl.createShader(type);

            // 将着色器源文件传入着色器对象中
            gl.shaderSource(shader, source);

            // 编译着色器对象
            gl.compileShader(shader);

            // 返回着色器对象
            return shader;
        }
    </script>
</body>
</html>

显示效果