WebGL初始化故障求助：全局gl对象始终为undefined问题排查

嘿，我一眼就看到了你代码里的几个关键问题，导致gl对象一直是undefined，咱们逐个解决：

1. 最核心的问题：代码执行时机错误 #

你的window.onload函数是页面完全加载后才会触发的，但你把大部分WebGL配置代码（比如gl.viewport、着色器初始化这些）都写在了这个函数外面。这意味着这些代码会先于init函数执行，此时gl还没被WebGLUtils.setupWebGL(canvas)初始化，自然就是undefined。

解决方法：把所有依赖gl和canvas的代码全部移到init函数内部。

2. 变量作用域问题 #

你在init函数内部声明了var canvas，但外面的代码试图访问canvas.width，这会导致canvas未定义的错误。要么把canvas改成全局变量，要么直接在init函数里处理视口设置。

3. 拼写错误（这些也会导致代码运行失败） #

• gl.userProgram(program) → 正确写法是 gl.useProgram(program)（少了个s）
• bufferId → 你声明的变量是bufferID（JavaScript是大小写敏感的，二者不匹配）
• fl.FLOAT → 应该是gl.FLOAT（这里是误写了命名空间）
• flase → 正确拼写是false

4. 顶点数据问题（额外小问题） #

你当前的三个顶点坐标都是y=-1，这是一条水平直线，根本画不出三角形。需要调整顶点坐标，改成能构成三角形的三个点。

修正后的完整JavaScript代码 #

var gl; 
var points; 
window.onload = function init() { 
    var canvas = document.getElementById("gl-canvas"); 
    gl = WebGLUtils.setupWebGL(canvas); 
    if (!gl) { 
        alert("WebGL is not available"); 
        return; // 初始化失败就停止执行后续代码
    } 

    // 三个顶点（修正为三角形）
    var vertices = [vec2(-1, -1), vec2(0, 1), vec2(1, -1)]; 

    // 配置WebGL
    gl.viewport(0, 0, canvas.width, canvas.height); 
    gl.clearColor(1.0, 1.0, 1.0, 1.0); 

    // 加载着色器并初始化属性缓冲区
    var program = initShaders(gl, "vertex-shader", "fragment-shader"); 
    gl.useProgram(program); 

    // 将数据加载到GPU
    var bufferID = gl.createBuffer(); 
    gl.bindBuffer(gl.ARRAY_BUFFER, bufferID); 
    gl.bufferData(gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW); 

    // 关联着色器变量与数据缓冲区
    var vPosition = gl.getAttribLocation(program, "vPosition"); 
    gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0); 
    gl.enableVertexAttribArray(vPosition); 

    render(); 
}

function render() { 
    gl.clear(gl.COLOR_BUFFER_BIT); 
    gl.drawArrays(gl.TRIANGLES, 0, 3); 
}

HTML代码（无大问题，保持原样即可） #

<!DOCTYPE html> 
<html> 
<head> 
<script id="vertex-shader" type="x-shader/x-vertex"> 
attribute vec4 vPosition; 
void main(){ 
    gl_Position = vPosition; 
} 
</script> 
<script id="fragment-shader" type="x-shader/x-fragment"> 
precision mediump float; 
void main(){ 
    gl_FragColor = vec4 ( 1.0, 0.0, 0.0, 1.0 ); 
} 
</script> 
<script type="text/javascript" src="../test1/webgl-utils.js"> 
</script> 
<script type="text/javascript" src="../test1/initShaders.js"> 
</script> 
<script type="text/javascript" src="../test1/MV.js"> 
</script> 
<script type="text/javascript" src="../test1/triangle.js"> 
</script> 
</head> 
<body> 
<canvas id="gl-canvas" width="512" height="512"> 
Oops ... your browser doesn't support the HTML5 canvas element 
</canvas> 
</body> 
</html>

现在运行修正后的代码，应该就能正常渲染出红色三角形了。

内容的提问来源于stack exchange，提问作者M. Rosenlof