本文旨在帮助初学者解决在使用 WebGL 绘制基本三角形时遇到的常见问题，包括顶点属性设置错误导致的控制台警告以及页面只显示 HTML 标签的问题。通过分析代码示例，我们将提供详细的步骤和注意事项，确保你能够成功运行 WebGL 程序，并理解其基本原理。
WebGL 初始化和错误排查
首先，确保你的 HTML 文件正确引入了 JavaScript 文件，并且 canvas 元素已经添加到 DOM 中。在你的 HTML 文件中，main.js 文件通过 引入，defer 属性确保脚本在 HTML 解析完成后执行。
其次，检查 WebGL 上下文是否成功获取。以下代码片段用于获取 WebGL 上下文，如果获取失败，会抛出一个错误：
const canvas = document.querySelector("canvas");
const gl = canvas.getContext("webgl");
if (!gl) {
throw new Error("webgl not supported");
}如果在这一步出现问题，请确保你的浏览器支持 WebGL，并且已经启用。
顶点着色器和片段着色器
WebGL 程序需要两个着色器：顶点着色器和片段着色器。顶点着色器负责处理顶点数据，片段着色器负责处理像素颜色。
顶点着色器：
attribute vec3 position;
void main() {
gl_Position = vec4(position, 1);
}片段着色器：
void main (){
gl_FragColor= vec4(1, 0, 0, 1);
}这两个着色器都需要编译和链接到一个 WebGL 程序中。以下代码展示了如何创建、编译和链接着色器：
// VERTEX SHADER
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, `
attribute vec3 position;
void main() {
gl_Position = vec4(position, 1);
}
`);
gl.compileShader(vertexShader);
// FRAGMENT SHADER
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, `
void main (){
gl_FragColor= vec4(1, 0, 0, 1);
}
`);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);顶点属性绑定和错误修正
控制台警告 "enableVertexAttribArray: -1 is not a valid index" 和 "vertexAttribI?Pointer: index (4294967295) must be
原因：
这通常是由于在调用 gl.getAttribLocation 时，传递的属性名称与着色器中定义的属性名称不完全匹配。
解决方法：
确保 gl.getAttribLocation 中使用的属性名称与顶点着色器中的属性名称完全一致。在你的例子中，正确的代码应该是：
const positionLocation = gl.getAttribLocation(program, "position"); // 注意这里是 "position" gl.enableVertexAttribArray(positionLocation); gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);
注意事项：
- 属性名称区分大小写，并且必须与着色器代码中的定义完全一致。
- 在调用 gl.getAttribLocation 之前，确保着色器程序已经成功链接。
顶点数据和缓冲区
顶点数据定义了三角形的三个顶点坐标。以下代码定义了一个包含三个顶点坐标的数组：
const vertexData = [0, 1, 0, 1, -1, 0, -1, -1, 0];
然后，创建一个缓冲区并将顶点数据绑定到该缓冲区：
const buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
渲染三角形
最后，使用 gl.drawArrays 函数渲染三角形：
gl.useProgram(program); gl.drawArrays(gl.TRIANGLES, 0, 3);
gl.TRIANGLES 指定渲染模式为三角形，0 指定从缓冲区起始位置开始读取顶点数据，3 指定渲染三个顶点。
页面显示问题
如果页面只显示 HTML 标签，而没有显示 WebGL 内容，请检查以下几点：
-
Canvas 元素大小： 确保 canvas 元素有宽度和高度，否则 WebGL 将无法渲染任何内容。可以在 HTML 中设置 canvas 元素的 width 和 height 属性，或者在 JavaScript 中动态设置。
WebGL 上下文获取： 确保 gl 对象成功获取。如果 gl 为 null，则说明 WebGL 上下文获取失败，可能是浏览器不支持 WebGL 或者 WebGL 被禁用。
错误处理： 检查控制台是否有任何错误信息。WebGL 错误信息通常可以帮助你找到问题所在。
-
清理画布： 在渲染之前，可以使用 gl.clearColor 和 gl.clear 函数清理画布，确保每次渲染都是从一个干净的状态开始。
gl.clearColor(0.0, 0.0, 0.0, 1.0); // 设置清除颜色为黑色 gl.clear(gl.COLOR_BUFFER_BIT); // 清除颜色缓冲区
总结
通过本文的讲解，你应该能够解决 WebGL 基础教程中遇到的顶点属性错误和页面显示问题。记住，仔细检查代码，确保属性名称匹配，正确设置 canvas 元素大小，并处理任何错误信息，这些都是成功运行 WebGL 程序的重要步骤。希望本教程能够帮助你入门 WebGL 开发，并为你未来的学习打下坚实的基础。
