webgl学习的第一个案例

跑错行的人

已于 2022-12-24 16:19:07 修改

阅读量512

点赞数

文章标签： html 前端 blender webgl javascript

于 2022-12-04 15:24:05 首次发布

本文链接：https://blog.csdn.net/qq_40712151/article/details/128172399

版权

跟着大佬学习——b站-web图形学工作站
webgl的变换矩阵
webgl绘制点：
1.主要需要渲染一个二维画布，
2.然后获取三维画笔，设置渲染区域，投影区域，
3.创建顶点着色器和片元着色器，将glsl相关字符串与着色器相连接（目前的理解，可能有错），编译着色器，初始化webgl项目，将着色器添加到项目中，连接项目，使用项目
4.绘制

<!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.0">
    <title>控制点坐标</title>
    <script src="./glMatrix-0.9.6.min.js"></script>
    <script>
        var webgl;
        var projMat4;
        //创建单位矩阵
        projMat4 = mat4.create()
            //模板字符串（顶点着色器）点坐标，投影坐标系
            //mat4表示4*4矩阵
        var vertex5String = `
        attribute vec4 a_position;
        uniform mat4 proj;
        void main(){
            gl_Position =proj* a_position;
            gl_PointSize = 60.0;
        }
        `;
        var fragmentString = `
        void main(){
            gl_FragColor = vec4(0,0,1.0,1.0);
        }
        `;



        function init() {
            initWebgl();
            initShader();
            initBuffer();
            draw();

        }
        //webgl初始化函数
        function initWebgl() {
            //获取容器
            let webglDiv = document.getElementById("webglcanvas")
                //获取上下文，即画笔
            webgl = webglDiv.getContext("webgl")
                //webgl的可视域（原点，x距离，y距离）
            webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight)
                //webgl的投影坐标系（距离，投影矩阵）
            mat4.ortho(0, webglDiv.clientWidth, webglDiv.clientHeight, 0, -1, 1, projMat4)

        }
        //shader初始化函数（GPU计算语言）
        function initShader() {
            //
            let vsshader = webgl.createShader(webgl.VERTEX_SHADER);
            let fssageder = webgl.createShader(webgl.FRAGMENT_SHADER);

            //由于设置webglShader着色器的GLSL的程序代码（shader[着色器对象]，source[GLSL代码的字符串]）
            webgl.shaderSource(vsshader, vertex5String);
            webgl.shaderSource(fssageder, fragmentString)

            webgl.compileShader(vsshader);
            webgl.compileShader(fssageder);

            let program = webgl.createProgram();
            webgl.attachShader(program, vsshader);
            webgl.attachShader(program, fssageder);

            webgl.linkProgram(program);
            webgl.useProgram(program);

            webgl.program = program;

        }
        //数据缓冲区初始化函数
        function initBuffer() {
            let pointPosition = new Float32Array([100.0, 100.0, 0.0, 1.0])
                //获取着色器中声明的变量，然后对其进行赋值
            let aPosition = webgl.getAttribLocation(webgl.program, "a_position")
                //为顶点attribute变量赋值([指定待修改顶点attribute变量的存储位置]，[顶点attribute变量的各分量值])
            webgl.vertexAttrib4fv(aPosition, pointPosition);
            //返回统一变量位置（program,name）
            let uniforproj = webgl.getUniformLocation(webgl.program, "proj");
            //通过统一变量引用将同一变量值传入渲染管线（uniform的位置，）
            webgl.uniformMatrix4fv(uniforproj, false, projMat4);


        }
        //webgl绘制函数
        function draw() {
            webgl.clearColor(0.0, 0.0, 0.0, 1.0);
            webgl.clear(webgl.COLOR_BUFFER_BIT);
            webgl.drawArrays(webgl.POINTS, 0, 1);

        }
    </script>
</head>

<body onload="init()">
    <canvas id="webglcanvas" width="500" height="500"></canvas>
</body>

</html>