webgl入门之hello world

最新推荐文章于 2024-04-09 19:39:36 发布

红衣大叔

最新推荐文章于 2024-04-09 19:39:36 发布

阅读量265

点赞数

分类专栏： javascript帮助文档文章标签： web webgl

本文链接：https://blog.csdn.net/gusushantang/article/details/126563500

版权

javascript帮助文档专栏收录该内容

111 篇文章

订阅专栏

先上代码后解释

<!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>Document</title>
</head>
<body>
    <canvas id="canvas" width="300px" height="300px"></canvas>
    <script>
        let canvas=document.getElementById("canvas");
        let gl=canvas.getContext("webgl");
        let vshaderStr='void main(){\n'+
        'gl_Position = vec4(0.0,0.0,0.0,1.0);\n'+
        'gl_PointSize = 10.0;\n'+
        '}\n';
        let fshaderStr='void main(){\n'+
        'gl_FragColor = vec4(0.0,1.0,0.0,1.0);\n'+
        '}\n';
        let program=createProgram(gl,vshaderStr,fshaderStr);
        gl.useProgram(program);
        gl.clearColor(0.0,0.0,0.0,1);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.POINTS,0,1);
        //创建shader 包括创建shader对象  指定shader代码 编译shader
        function createShader(gl,type,source){
            //创建shader对象 顶点着色器 gl.VERTEX_SHADER  片元着色器 gl.FRAGMENT_SHADER
            let shader=gl.createShader(type);
            //检查是否创建成功
            if(shader == null){
                throw new Error("创建shader 失败"+type);
                return null;
            }
            //加载shader代码
            gl.shaderSource(shader,source);
            //编译shader
            gl.compileShader(shader);
            //检查编译是否成功
            let successed=gl.getShaderParameter(shader,gl.COMPILE_STATUS);
            if(!successed){
                throw new Error(gl.getShaderInfoLog(shader));
                //删除创建的shader
                gl.deleteShader(shader);
                return null;
            }
            return shader;
        }
        function createProgram(gl,vsource,fsource){
            //创建webgl program对象
            let program = gl.createProgram();
            if(program == null){
                throw new Error("创建program失败");
                return null;
            }
            //创建顶点着色器
            let vshader=createShader(gl,gl.VERTEX_SHADER,vsource);
            //创建片元着色器
            let fshader=createShader(gl,gl.FRAGMENT_SHADER,fsource);
            //将shader关联到program上
            gl.attachShader(program,vshader);
            gl.attachShader(program,fshader);
            //链接对象
            gl.linkProgram(program);
            //检查是否链接成功
            let linked = gl.getProgramParameter(program,gl.LINK_STATUS);
            if(!linked){
                gl.deleteProgram(program);
                gl.deleteShader(vshader);
                gl.deleteShader(fshader);
                throw new Error(gl.getProgramInfoLog(program));
                return null;
            }
            return program;
        }
    </script>
</body>
</html>

运行结果
在这里插入图片描述
其中主要环节包括：
1、获取webgl上下文
let gl=canvas.getContext(“webgl”);
2、创建shader
3、创建program
4、关联shader到program
5、gl应用program
6、清空缓冲区
7、绘制