WebGL（四）—— 第一个WEBGL程序

qq_51550750

于 2022-03-17 09:52:33 发布

阅读量291

点赞数

文章标签： webgl

本文链接：https://blog.csdn.net/qq_51550750/article/details/123539655

版权

WebGL（四）—— 第一个WEBGL程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--    首先创建一个canvas元素-->
    <canvas id="webgl" width="500" height="500" style="background-color: lemonchiffon"></canvas>
    <script>
        //获取canvas元素
        let canvas = document.getElementById("webgl");
        //声明上下文环境，webgl
        let gl = canvas.getContext("webgl");

        //着色器
            //顶点着色器:描述顶点属性，比如坐标，大小
            //注意：gl_Position的前三个坐标x,y,z，取值范围都是[-1,1]，x,y的正方向和笛卡尔坐标系相同，z正方向是指朝向我们的方向,以图形的的中心点作为x,y,z
            let vertexShaderSource = "void main(){"+
                "   gl_PointSize=20.0;"+
                "   gl_Position=vec4(0,0,1,1.0);"+
                "}";
            //vec4类型：浮点型   vec2 vec3 vec4 mat2 mat3 mat4
            //片元着色器:处理光照和颜色的程序（处理像素的程序）
            //gl_FragColor分别代表的是RGBA四个值，红绿蓝和Alpha（透明度，0-1）
            let fagShaderSource = "void main(){"+
                "gl_FragColor = vec4(1.0,0.0,0.0,1);"+
                "}";
        //初始化着色器
        let initShader = function(gl,vertexShaderSource,fagShaderSource){
            //创建顶点着色器
            let vertexShader = gl.createShader(gl.VERTEX_SHADER);
            //创建片元着色器对象
            let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
            //引入顶点和片元着色器源码
            gl.shaderSource(vertexShader,vertexShaderSource);
            gl.shaderSource(fragmentShader,fagShaderSource);
            //编译顶点和片元着色器,编译方法是compileShader,用来编译GLSL着色器语言，把我们上面写的字符串代码变成二进制数据
            gl.compileShader(vertexShader);
            gl.compileShader(fragmentShader);
            //创建一个webgl的program对象,创建用createProgram方法
            let program = gl.createProgram();
            //把准备好的着色器对象添加到program中
            gl.attachShader(program,vertexShader);
            gl.attachShader(program,fragmentShader);
            //把program与webgl做链接
            gl.linkProgram(program);
            //把定义好的program程序添加到当前的渲染状态中
            gl.useProgram(program);


        }
        initShader(gl,vertexShaderSource,fagShaderSource);
        //绘制图像
        gl.drawArrays(gl.POINTS,0,1);



    </script>

</body>
</html>