webgl问题useProgram: program is not valid

weixin_47524222 2022-05-08 11:20:11

刚刚初次学习webgl，写了一段程序，出现了这个报错，希望各位大佬能够指点迷津

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>绘制</title>
</head>

<body onload="main()">
    <script id="vertexShader" type="x-shader/x-vertex">
        void main(){
            gl_PointSize = 100.0;
            gl_Position = vec4(0.0,0.0,0.0,1);
        };
    </script>
    <script id="fragmentShader" type="x-shader/x-fragment">
        void main(){
            gl_FragColor = vec4(1.0,0.0,0.0,1.0);
        };
    </script>
    <canvas id="canvas"></canvas>
    <script type="text/javascript">
        function initShaders(gl, vertexShader, fragmentShader) {
            //创建程序对象
            const program = gl.createProgram();
            //建立着色对象
            //把顶点着色对象装进程序对象中
            gl.attachShader(program, vertexShader);
            //把片元着色对象装进程序对象中
            gl.attachShader(program, fragmentShader);
            //连接webgl上下文对象和程序对象
            gl.linkProgram(program);
            //启动程序对象
            gl.useProgram(program);
            return program;
        }
        function main() {
            var canvas = document.getElementById('canvas')
            var gl = canvas.getContext('webgl')
            // 获得着色器源码
            const vsSource = document.getElementById('vertexShader').innerText
            const fsSource = document.getElementById('fragmentShader').innerText
            // 建立顶点着色器对象
            const vertexShader = gl.createShader(gl.VERTEX_SHADER)
            gl.shaderSource(vertexShader, vsSource) // 把源文件装入对象中
            gl.compileShader(vertexShader)
            // 建立片元着色器对象
            const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
            gl.shaderSource(fragmentShader, fsSource)
            gl.compileShader(fragmentShader)
            // 创建程序对象
            program = initShaders(gl,vertexShader,fragmentShader)
            gl.drawArrays(gl.POINTS, 0, 1)
        }
    </script>
</body>

</html>

...全文