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

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

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

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

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

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

核心问题通常在于：

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

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

对于绘制单个像素点的场景，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，用于着色器中的坐标转换。

神卷标书

神卷标书，专注于AI智能标书制作、管理与咨询服务，提供高效、专业的招投标解决方案。支持一站式标书生成、模板下载，助力企业轻松投标，提升中标率。

查看详情

// 获取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事件监听器中，我们将进行以下操作：

获取鼠标坐标： 将浏览器窗口坐标转换为Canvas内部坐标，并调整Y轴方向以匹配WebGL的坐标系（左下角为原点，Y轴向上）。
设置顶点属性： 使用gl.vertexAttrib2f直接将转换后的鼠标坐标传递给a_position属性。
绘制点： 调用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，可以直接运行以观察效果。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL鼠标事件绘制像素点</title>
    <style>
        body { margin: 0; overflow: hidden; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f0f0; }
        canvas {
            background: #efe; /* 设置Canvas背景色，以便观察绘制效果 */
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="600" height="400"></canvas>

    <!-- 顶点着色器 -->
    <script id="vert1" type="x-vertex-shader">
        attribute vec2 a_position;
        uniform vec2 u_resolution;

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

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

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

          gl_Position = vec4(clipSpace, 0.0, 1.0);
        }
    </script>

    <!-- 片元着色器 -->
    <script id="frag1" type="x-fragment-shader">
        precision mediump float;

        // uniform vec4 u_color; // 如果需要动态颜色，可以启用此uniform

        void main() {
            gl_FragColor = vec4(1,0,1,1); // 固定为洋红色
        }
    </script>

    <script>
        const canvas = document.getElementById('canvas');
        // 获取WebGL上下文，并设置preserveDrawingBuffer为true以保留绘制内容
        const gl = canvas.getContext('webgl', { preserveDrawingBuffer: true });

        if (!gl) {
            alert('Your browser does not support WebGL');
        }

        // 辅助函数：编译和链接着色器
        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;
        }

        // 获取着色器源码
        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. Exiting.");
            // 可以添加更多错误处理，例如禁用Canvas或显示错误信息
            canvas.style.display = 'none';
            document.body.innerHTML += '<p style="color: red;">WebGL初始化失败，请检查控制台输出。</p>';
            throw new Error("WebGL program setup failed.");
        }

        gl.useProgram(program);

        // 获取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);

        // 设置清除颜色为浅绿色，以便区分背景和绘制的点
        gl.clearColor(0.9, 0.9, 0.9, 1.0); // R, G, B, A
        gl.clear(gl.COLOR_BUFFER_BIT); // 清除颜色缓冲区

        // 监听鼠标移动事件
        canvas.addEventListener('mousemove', (e) => {
            const br = canvas.getBoundingClientRect();
            const x = e.clientX - br.left;
            const y = br.height - (e.clientY - br.top); // 转换Y坐标系

            gl.vertexAttrib2f(positionAttributeLocation, x, y); // 直接设置属性值
            gl.drawArrays(gl.POINTS, 0, 1); // 绘制一个点
        });
    </script>
</body>
</html>

登录后复制