WebGL基础教程：清空画布与顶点着色器应用-优快云博客

本文详细讲解了如何使用WebGL在HTML5 canvas上创建一个空白画布，并介绍了顶点着色器和片段着色器的设置。着重于变量命名规范和常见编程陷阱，如未使用的attribute变量可能导致编译错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本格式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Clear "canvas"</title>
    <script>
        var VSHADER_SOURCE =
            'attribute vec4 a_Position; \n' +
            'void main() {\n' +
            ' gl_Position = a_Position; \n' +
            ' gl_PointSize = 10.0; \n' +
            '}\n';

        var FSHADER_SOURCE =
            'precision mediump float; \n' +
            'uniform vec4 u_FragColor; \n' +
            'void main() {\n' +
            ' gl_FragColor = u_FragColor; \n' +
            ' }\n';
        function main() {
            var container = document.getElementsByTagName('body')[0]
            var canvas = document.getElementById('webgl');
            var gl = canvas.getContext('webgl')

            // 准备vertexShader
            var vertexShader = gl.createShader(gl.VERTEX_SHADER)
            gl.shaderSource(vertexShader, VSHADER_SOURCE)
            gl.compileShader(vertexShader)
            // 准备fragmentShader
            var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
            gl.shaderSource(fragmentShader, FSHADER_SOURCE)
            gl.compileShader(fragmentShader)

            var program = gl.createProgram()
            gl.attachShader(program, vertexShader)
            gl.attachShader(program, fragmentShader)
            gl.linkProgram(program)
            gl.useProgram(program)

            // Set clear color
            gl.clearColor(0.0, 0.0, 0.0, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);

            // 赋值vertexShader
            var a_Position = gl.getAttribLocation(program, 'a_Position')
            gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0)
            var u_FragColor = gl.getUniformLocation(program, 'u_FragColor')
            gl.uniform4f(u_FragColor, 0.0, 1.0, 0.0, 1.0)

            gl.drawArrays(gl.POINTS, 0, 1)
        }
    </script>
</head>

<body onload="main()">
    <canvas id="webgl" width="400" height="400">
        Please use a browser that supports "canvas"
    </canvas>

</body>

</html>

风格

attribute变量都以a_开头，uniform变量都以u_开头

一些小坑

比如在顶点着色器中定义了 attribute vec3 a_Positon, 如果在main(){}中没有使用到这个a_Position,那么在javascript中使用
gl.getAttribLocation(program, 'a_Position')是不能获取到这个a_Position的，应该是gl.compileShader时发现没有使用到变量，虽然定义了但编译结果并不包含这个变量。
three.js中改变mesh.geometry.attribute.position.arry中顶点坐标后，要执行 mesh.geometry.attribute.position.needsUpdate=true,three.js代码会判断position.needsUpdate=true进而自动执行position.version++,再由于version的改变触发新顶点坐标的生效。
three.jsR141中的Box3Helper继承自LineSegments->Line->Object3D, 但是Box3Helper实例执行box3helper.appleMatrix(mat) 时无法看到效果，这是因为Box3Helper覆写了updateMatrixWorld() 方法：line37 box.getCenter( this.position );，所以表现会与Object3D不同; box3可用来进行碰撞测试，OBB也用于进行碰撞测试，但是three.js当前版本没提供obbHelper。

webGL