本文旨在帮助初学者解决在使用 WebGL 绘制基本三角形时遇到的常见问题，包括顶点属性设置错误导致的控制台警告以及页面只显示 HTML 标签的问题。通过分析代码示例，我们将提供详细的步骤和注意事项，确保你能够成功运行 WebGL 程序，并理解其基本原理。

WebGL 初始化和错误排查

首先，确保你的 HTML 文件正确引入了 JavaScript 文件，并且 canvas 元素已经添加到 DOM 中。在你的 HTML 文件中，main.js 文件通过 <script src=”main.js” defer></script> 引入，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 < MAX_VERTEX_ATTRIBS” 表明 gl.getAttribLocation 返回了 -1，这意味着 WebGL 无法找到名为 “position” 的顶点属性。

原因：

这通常是由于在调用 gl.getAttribLocation 时，传递的属性名称与着色器中定义的属性名称不完全匹配。

解决方法：

确保 gl.getAttribLocation 中使用的属性名称与顶点着色器中的属性名称完全一致。在你的例子中，正确的代码应该是：

GenStore

AI对话生成在线商店，一个平台满足所有电商需求

21

查看详情

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 内容，请检查以下几点：

1. Canvas 元素大小： 确保 canvas 元素有宽度和高度，否则 WebGL 将无法渲染任何内容。可以在 HTML 中设置 canvas 元素的 width 和 height 属性，或者在 JavaScript 中动态设置。

   <canvas width="500" height="500"></canvas>

2. WebGL 上下文获取： 确保 gl 对象成功获取。如果 gl 为 null，则说明 WebGL 上下文获取失败，可能是浏览器不支持 WebGL 或者 WebGL 被禁用。

3. 错误处理： 检查控制台是否有任何错误信息。WebGL 错误信息通常可以帮助你找到问题所在。

4. 清理画布： 在渲染之前，可以使用 gl.clearColor 和 gl.clear 函数清理画布，确保每次渲染都是从一个干净的状态开始。

   gl.clearColor(0.0, 0.0, 0.0, 1.0); // 设置清除颜色为黑色 gl.clear(gl.COLOR_BUFFER_BIT); // 清除颜色缓冲区

总结

通过本文的讲解，你应该能够解决 WebGL 基础教程中遇到的顶点属性错误和页面显示问题。记住，仔细检查代码，确保属性名称匹配，正确设置 canvas 元素大小，并处理任何错误信息，这些都是成功运行 WebGL 程序的重要步骤。希望本教程能够帮助你入门 WebGL 开发，并为你未来的学习打下坚实的基础。