WebGL鼠标事件绘制像素点教程：深入理解属性与缓冲区管理

本教程旨在指导开发者如何在webgl中通过鼠标事件实时绘制单个像素点。文章将详细解释如何利用`gl.vertexattrib2f`直接设置顶点属性，并结合`gl.drawarrays`正确绘制，避免不必要的缓冲区操作。同时，会探讨鼠标坐标转换、着色器配置，并提供一个完整的示例，帮助读者掌握webgl中事件驱动的图形绘制基础。

在WebGL中，通过JavaScript与GPU进行交互，实现鼠标事件驱动的图形绘制是学习其工作原理的重要一环。常见的需求是在Canvas上根据鼠标位置绘制一个像素点。然而，在这个过程中，开发者常常会遇到一些关于缓冲区管理和属性设置的困惑，例如“顶点缓冲区不足以完成绘制调用”的错误。本教程将深入解析这些问题，并提供一个高效、简洁的解决方案。

理解绘制单个像素的核心挑战

最初尝试在WebGL中根据鼠标事件绘制单个像素时，开发者可能会倾向于为每个鼠标事件创建一个新的缓冲区，将鼠标坐标存入其中，然后进行绘制。这种方法不仅效率低下，而且容易因对gl.drawArrays参数的误解而导致错误。

核心问题通常在于：

1. gl.drawArrays 的 count 参数不匹配： 如果缓冲区中只有一个顶点数据，但drawArrays的count参数设置为3，WebGL会尝试读取不存在的顶点数据，从而引发“Vertex buffer is not big enough for the draw call”错误。
2. gl.vertexAttrib2f 与 gl.vertexAttribPointer 的混淆： 对于单个动态变化的顶点属性，直接使用gl.vertexAttrib2f设置属性值比通过缓冲区和gl.vertexAttribPointer更为直接和高效。后者主要用于从缓冲区中解析批量顶点数据。
3. 不必要的缓冲区创建与管理： 频繁地创建、绑定和填充缓冲区会带来显著的性能开销，尤其是在高频率的鼠标事件中。

简化方案：直接设置顶点属性绘制单个像素

对于绘制单个像素点的场景，WebGL提供了一种更简洁的机制：直接通过gl.vertexAttrib2f系列函数设置顶点属性，而无需使用缓冲区。

1. 初始化与着色器设置

首先，我们需要获取WebGL上下文，编译并链接着色器程序。

const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl', { preserveDrawingBuffer: true });

// 辅助函数：编译和链接着色器
function setup(ctx, vertSource, fragSource) {
  const vs = ctx.createShader(ctx.VERTEX_SHADER);
  ctx.shaderSource(vs, vertSource);
  ctx.compileShader(vs);
  if (!ctx.getShaderParameter(vs, ctx.COMPILE_STATUS)) {
    console.error('Vertex shader compilation failed:', ctx.getShaderInfoLog(vs));
    ctx.deleteShader(vs);
    return null;
  }

  const fs = ctx.createShader(ctx.FRAGMENT_SHADER);
  ctx.shaderSource(fs, fragSource);
  ctx.compileShader(fs);
  if (!ctx.getShaderParameter(fs, ctx.COMPILE_STATUS)) {
    console.error('Fragment shader compilation failed:', ctx.getShaderInfoLog(fs));
    ctx.deleteShader(fs);
    return null;
  }

  const program = ctx.createProgram();
  ctx.attachShader(program, vs);
  ctx.attachShader(program, fs);
  ctx.linkProgram(program);
  if (!ctx.getProgramParameter(program, ctx.LINK_STATUS)) {
    console.error('Program linking failed:', ctx.getProgramInfoLog(program));
    ctx.deleteProgram(program);
    return null;
  }
  return program;
}

// 获取着色器源码（从HTML脚本标签中获取）
const vertSource = document.getElementById('vert1').textContent;
const fragSource = document.getElementById('frag1').textContent;

const program = setup(gl, vertSource, fragSource);
if (!program) {
  console.error("Failed to setup WebGL program.");
  // 处理错误或退出
}

gl.useProgram(program);

2. 配置顶点属性与Uniform

获取顶点位置属性的location，并禁用其数组功能，因为我们将直接设置其值。同时，设置分辨率uniform，用于着色器中的坐标转换。

InsCode

InsCode 是CSDN旗下的一个无需安装的编程、协作和分享社区

下载

// 获取a_position属性的位置
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
// 禁用属性数组，因为我们将直接设置其值，而不是从缓冲区读取
gl.disableVertexAttribArray(positionAttributeLocation);

// 获取u_resolution uniform的位置，并设置Canvas的尺寸
const resolutionUniformLocation = gl.getUniformLocation(program, 'u_resolution');
gl.uniform2f(resolutionUniformLocation, gl.canvas.width, gl.canvas.height);

3. 鼠标事件处理与绘制

在mousemove事件监听器中，我们将进行以下操作：

1. 获取鼠标坐标： 将浏览器窗口坐标转换为Canvas内部坐标，并调整Y轴方向以匹配WebGL的坐标系（左下角为原点，Y轴向上）。
2. 设置顶点属性： 使用gl.vertexAttrib2f直接将转换后的鼠标坐标传递给a_position属性。
3. 绘制点： 调用gl.drawArrays(gl.POINTS, 0, 1)，明确指示绘制一个点。

canvas.addEventListener('mousemove', (e) => {
    // 获取Canvas在视口中的位置和尺寸
    const br = canvas.getBoundingClientRect();
    // 计算鼠标在Canvas内部的X坐标
    const x = e.clientX - br.left;
    // 计算鼠标在Canvas内部的Y坐标，并将其从浏览器坐标系（Y向下）
    // 转换为WebGL坐标系（Y向上，原点在左下角）
    const y = br.height - (e.clientY - br.top);

    // 直接设置a_position属性的值为鼠标坐标
    gl.vertexAttrib2f(positionAttributeLocation, x, y);
    // 绘制一个点。`gl.POINTS`表示绘制点，`0`表示从第0个顶点开始，`1`表示只绘制一个顶点。
    gl.drawArrays(gl.POINTS, 0, 1);
});

4. 着色器代码

着色器负责将传入的像素坐标转换为裁剪空间坐标，并为像素着色。

顶点着色器 (vert1) 这个着色器将从JavaScript传入的像素坐标（例如，600x400 Canvas上的[300, 200]）转换为WebGL所需的裁剪空间坐标（-1到1）。

// vertex shader
attribute vec2 a_position;   // 从JS传入的像素坐标
uniform vec2 u_resolution;   // Canvas的分辨率

void main() {
  // 1. 将像素坐标转换为0.0到1.0的范围
  vec2 zeroToOne = a_position / u_resolution;

  // 2. 将0.0到1.0的范围转换为0.0到2.0的范围
  vec2 zeroToTwo = zeroToOne * 2.0;

  // 3. 将0.0到2.0的范围转换为-1.0到+1.0的裁剪空间坐标
  vec2 clipSpace = zeroToTwo - 1.0;

  // 设置最终的顶点位置
  gl_Position = vec4(clipSpace, 0.0, 1.0);
}

片元着色器 (frag1) 这个着色器为每个像素设置固定的颜色。

// fragment shader
precision mediump float; // 精度声明

uniform vec4 u_color; // 尽管本例中未使用，但可用于动态设置颜色

void main() {
    gl_FragColor = vec4(1,0,1,1); // 设置为洋红色 (RGBA)
}

关键概念与修正解析

gl.drawArrays(mode, first, count) 参数理解

• mode: 指定要绘制的图元类型，如gl.POINTS（点）、gl.TRIANGLES（三角形）等。
• first: 指定从哪个顶点开始绘制，通常为0。
• count: 这是关键，指定要绘制的顶点数量。如果你的属性是单个点，那么count必须是1。原始代码中的错误就是将count设置为3，导致WebGL尝试读取不存在的顶点数据。

gl.vertexAttrib2f() 与 gl.vertexAttribPointer() 的区别

• gl.vertexAttrib2f(index, x, y): 用于直接为由index指定的顶点属性设置一个静态的2D浮点值。当你的顶点属性值是动态的、单个的，并且不打算从缓冲区中批量读取时，这是最直接有效的方法。它需要先调用gl.disableVertexAttribArray(index)。
• gl.vertexAttribPointer(index, size, type, normalized, stride, offset): 用于告诉WebGL如何从当前绑定的ARRAY_BUFFER中解析顶点数据。它通常与gl.enableVertexAttribArray(index)一起使用，适用于从缓冲区中读取多个顶点或复杂几何体的场景。

鼠标坐标转换

浏览器事件中的e.clientX和e.clientY是相对于浏览器视口左上角的坐标，Y轴向下增长。 WebGL的裁剪空间通常以Canvas的中心为原点，X轴向右，Y轴向上。 为了将鼠标坐标正确映射到WebGL的坐标系，需要进行以下转换：

• x = e.clientX - br.left: 将鼠标X坐标从视口原点偏移到Canvas左边缘。
• y = br.height - (e.clientY - br.top):
  • e.clientY - br.top: 将鼠标Y坐标从视口原点偏移到Canvas上边缘。
  • br.height - ...: 将Y坐标从Canvas上边缘为0（向下增长）转换为Canvas下边缘为0（向上增长）。

完整示例代码

以下是一个完整的HTML文件，包含了所有必要的JavaScript、着色器和CSS，可以直接运行以观察效果。

何时需要使用缓冲区？

尽管对于单个像素点的绘制，直接设置属性更有效，但在以下场景中，缓冲区是不可或缺的：