WebGL 基础教程：解决顶点属性错误和页面显示问题-js教程-PHP中文网

WebGL 基础教程：解决顶点属性错误和页面显示问题

碧海醫心

发布： 2025-09-23 18:25:01

原创

633人浏览过

webgl 基础教程：解决顶点属性错误和页面显示问题

本文旨在帮助初学者解决在使用 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 中使用的属性名称与顶点着色器中的属性名称完全一致。在你的例子中，正确的代码应该是：

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

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 中动态设置。
```
<canvas width="500" height="500"></canvas>
```
登录后复制
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 开发，并为你未来的学习打下坚实的基础。

以上就是WebGL 基础教程：解决顶点属性错误和页面显示问题的详细内容，更多请关注php中文网其它相关文章！