本教程旨在指导开发者如何在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，用于着色器中的坐标转换。
// 获取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传入的像素坐标（例如，600×400 Canvas上的[300, 200]）转换为WebGL所需的裁剪空间坐标（-1到1）。
// vertex shaderattribute 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 shaderprecision 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，可以直接运行以观察效果。
WebGL鼠标事件绘制像素点 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; } 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); } precision mediump float; // uniform vec4 u_color; // 如果需要动态颜色，可以启用此uniform void main() { gl_FragColor = vec4(1,0,1,1); // 固定为洋红色 } 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 += 'WebGL初始化失败，请检查控制台输出。
'; 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); // 绘制一个点 });
何时需要使用缓冲区？
尽管对于单个像素点的绘制，直接设置属性更有效，但在以下场景中，缓冲区是不可或缺的：
以上就是WebGL鼠标事件绘制像素点教程：深入理解属性与缓冲区管理的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1536350.html
微信扫一扫 
支付宝扫一扫 
