WebGL魔法：用鼠标作画，打造指尖上的艺术画板
2023-12-03 12:48:42
WebGL魔法：用鼠标作画，释放你的指尖创意
WebGL，全称Web Graphics Library，是一种基于JavaScript的图形API，它允许在网页浏览器中呈现交互式的3D图形。WebGL的出现，彻底改变了网页游戏的格局，也为创意编程开辟了新的可能性。
今天，我们将一起探索WebGL的魅力，用鼠标作为画笔，在浏览器中绘制出灵动的线条和斑斓的色彩。我们将使用HTML5和JavaScript作为编程语言，无需安装任何软件，即可开启一场指尖上的艺术之旅。
准备工作：
- 现代浏览器，如Chrome、Firefox或Safari
- HTML和JavaScript编辑器
- 一颗跃跃欲试的心
第一步：创建画布
首先，我们需要创建一个画布来容纳我们的杰作。在HTML中，可以使用canvas元素：
<canvas id="myCanvas"></canvas>
然后，在JavaScript中获取画布元素：
const canvas = document.getElementById('myCanvas');
第二步：设置WebGL上下文
下一步，我们需要设置WebGL上下文，以便与图形硬件进行交互：
const gl = canvas.getContext('webgl');
第三步：着色器
着色器是WebGL中用于渲染图形的程序。我们使用两种着色器：顶点着色器和片元着色器。顶点着色器处理顶点数据，而片元着色器处理每个像素的颜色。
第四步：创建顶点缓冲区对象
顶点缓冲区对象（VBO）存储着顶点数据，包括顶点位置、法线、纹理坐标等信息。我们创建一个VBO来存储我们的顶点位置：
const vertices = [
-1, -1, 0, // 左下角
1, -1, 0, // 右下角
1, 1, 0, // 右上角
-1, 1, 0, // 左上角
];
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
第五步：鼠标事件监听
为了用鼠标作画，我们需要监听鼠标事件并获取鼠标位置：
canvas.addEventListener('mousemove', (event) => {
const x = event.clientX;
const y = event.clientY;
// ...
});
第六步：绘制点
现在，让我们开始用鼠标绘制点。我们在鼠标移动事件中执行以下步骤：
// 计算鼠标位置
const x = event.clientX;
const y = event.clientY;
// 将鼠标位置转换成WebGL坐标系
const glX = (x - canvas.offsetLeft) * 2 / canvas.width - 1;
const glY = (canvas.height - y + canvas.offsetTop) * 2 / canvas.height - 1;
// 将鼠标位置存储到顶点缓冲区
vertices[8] = glX; // 右下角的x坐标
vertices[9] = glY; // 右下角的y坐标
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// 绘制点
gl.drawArrays(gl.POINTS, 0, 1); // 绘制单个点
第七步：循环
为了让绘制持续进行，我们需要在循环中不断执行鼠标事件监听和绘制点：
function render() {
// ...
requestAnimationFrame(render);
}
render();
体验你的魔法画布
现在，让我们体验一下我们的WebGL画布。在浏览器中运行你的代码，拿起鼠标，挥洒你的创意吧！
鼠标移动时，你会看到画布上实时绘制出一个个灵动的点。你可以随意涂鸦、书写或创作任何你想要的东西。WebGL的强大功能让你的指尖成为画笔，在网页上挥洒出无穷的艺术可能性。
结语
WebGL为创意编程和交互式绘图开辟了新的天地。用鼠标作画只是一个起点，你可以探索更多令人惊叹的WebGL技术，打造属于自己的3D世界、游戏或艺术作品。
现在，拿起你的鼠标，开启你的WebGL艺术之旅吧！释放你的想象力，让你的指尖成为创造力的源泉。
