WebGL入门（一）绘制一个点

news2024/11/16 21:50:57

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./glMatrix.min.js"></script>
</head>
<body>
    <canvas id="webglCanvas" width="500" height="500"></canvas>
    <script>
        var webgl // 全局声明webgl
        var projMat4 // 全局声明投影矩阵
        var projMat4 = mat4.create() // 创建一个4*4的矩阵

        var vertexString = `
            attribute vec4 a_Position;
            uniform mat4 proj;
            void main() {
                gl_Position = proj * a_Position;
                gl_PointSize = 60.0;
            }
        ` // 顶点着色器字符串
        var fragmentString = `
            precision mediump float;
            void main() {
                gl_FragColor = vec4(0, 1.0, 1.0, 1.0);
            }
        ` // 片元着色器字符串

        // 入口初始化函数
        function init(){
            initWebgl()
            initShader()// 初始化着色器
            initBuffer()// 数据缓冲区
            draw()// 绘制
        }
        // webgl初始化
        function initWebgl(){
            let webglDiv = document.getElementById('webglCanvas')
            webgl = webglDiv.getContext('webgl')
            webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.height) // 设置视口,四个参数分别是x,y,width,height 
            mat4.ortho(0, webglDiv.clientWidth, webglDiv.clientHeight, 0, -1, 1, projMat4) // 设置正交投影矩阵    
        }
        // 初始化着色器,shader初始化函数
        function initShader(){
            let vertexShader = webgl.createShader(webgl.VERTEX_SHADER) // 创建顶点着色器
            let fragmentShader = webgl.createShader(webgl.FRAGMENT_SHADER) // 创建片元着色器
            webgl.shaderSource(vertexShader, vertexString) // 顶点着色器绑定字符串
            webgl.shaderSource(fragmentShader, fragmentString) // 片元着色器绑定字符串
            webgl.compileShader(vertexShader) // 编译顶点着色器
            webgl.compileShader(fragmentShader) // 编译片元着色器
            let program = webgl.createProgram() // 创建着色器程序
            webgl.attachShader(program, vertexShader) // 顶点着色器绑定到着色器程序
            webgl.attachShader(program, fragmentShader) // 片元着色器绑定到着色器程序
            webgl.linkProgram(program) // 链接着色器程序
            webgl.useProgram(program) // 使用着色器程序
            webgl.program = program // 将着色器程序绑定到webgl上
        }
        // 数据缓冲区初始化函数
        function initBuffer(){
            let pointPosition = new Float32Array([100.0, 100.0, 0.0, 1.0]) // 创建一个点的位置
            let aPosition = webgl.getAttribLocation(webgl.program, 'a_Position') // 获取顶点着色器中的a_Position变量
            let buffer = webgl.createBuffer() // 创建缓冲区对象
            webgl.bindBuffer(webgl.ARRAY_BUFFER, buffer) // 绑定缓冲区对象
            webgl.bufferData(webgl.ARRAY_BUFFER, pointPosition, webgl.STATIC_DRAW) // 上传数据到缓冲区
            webgl.vertexAttribPointer(aPosition, 4, webgl.FLOAT, false, 0, 0) // 将缓冲区数据绑定到a_Position
            webgl.enableVertexAttribArray(aPosition) // 启用顶点属性数组

            let uniforproj = webgl.getUniformLocation(webgl.program, 'proj') // 获取顶点着色器中的proj变量
            webgl.uniformMatrix4fv(uniforproj, false, projMat4) // 将投影矩阵传入顶点着色器,三个参数分别是变量,是否转置,矩阵
        }
        // 绘制函数
        function draw(){
            webgl.clearColor(0.0, 0.0, 0.0, 1.0) // 设置清空颜色
            webgl.clear(webgl.COLOR_BUFFER_BIT) // 清空颜色缓冲区
            webgl.drawArrays(webgl.POINTS, 0, 1) // 绘制点,三个参数分别是绘制类型,起始位置,顶点数量
        }
        init()
    </script>
</body>
</html>