【笔记】《WebGL编程指南》学习-第2章WebGL入门(5-通过鼠标点击画点）

这一节的目标：在鼠标点击的位置上绘制出点来

运行结果：



老规矩，先来看一下示例程序

ClickedPoints.js

//顶点着色器程序
//顶点着色器程序
var VSHADER_SOURCE =
'attribute vec4 a_Position;'+
'void main(){'+
'gl_Position=a_Position;'+
'gl_PointSize=10.0;'+
'}';

//片元着色器程序
var FSHADER_SOURCE=
'void main(){'+
'gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);'+
'}';

function main() {
//获取canvas元素
var canvas = document.getElementById("webgl");
if(!canvas){
console.log("Failed to retrieve the <canvas> element");
return;
}

//获取WebGL绘图上下文
var gl = getWebGLContext(canvas);
if(!gl){
console.log("Failed to get the rendering context for WebGL");
return;
}

//初始化着色器
if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){
console.log("Failed to initialize shaders.");
return;
}

//获取attribute变量存储位置
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');

if(a_Position < 0){
console.log("Failed to get the storage location of a_Position");
return;
}

canvas.onmousedown = function(ev){
click(ev,gl,canvas,a_Position);
};

//指定清空<canvas>颜色
gl.clearColor(0.0, 0.0, 0.0, 1.0);

//清空<canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
}

var g_points = [];
function click(ev, gl, canvas, a_Position){
var x= ev.clientX;
var y = ev.clientY;
var rect = ev.target.getBoundingClientRect();
x = ((x - rect.left) - canvas.width / 2) / (canvas.width / 2);
y = (canvas.height / 2 - (y - rect.top)) / (canvas.height / 2);
//将坐标存储到g_points数组中
g_points.push(x);
g_points.push(y);

//清除<canvas>
gl.clear(gl.COLOR_BUFFER_BIT);

var len = g_points.length;
for(var i = 0; i < len; i+=2){
//将点的位置传递到变量中
gl.vertexAttrib3f(a_Position, g_points[i], g_points[i+1], 0.0);

//绘制点
gl.drawArrays(gl.POINTS, 0, 1);
}
}

注册事件响应函数

事件响应函数能够异步地响应用户在网页上的操作，如点击鼠标、按下键盘等等。为了使用事件响应函数，你需要对其进行注册。对待定的用户输入（比如点击鼠标），<canvas>有特定的属性与之对应，我们把事件处理函数注册在这些属性上。

响应鼠标点击事件

在上面的JS文件中，click(）这个函数主要完成了：

获取鼠标点击的位置并存储在一个数组中；

清空<canvas>

根据数组的每个元素，在相应的位置绘制点。

var g_points = [];
function click(ev, gl, canvas, a_Position){
var x= ev.clientX;
var y = ev.clientY;
var rect = ev.target.getBoundingClientRect();
x = ((x - rect.left) - canvas.width / 2) / (canvas.width / 2);
y = (canvas.height / 2 - (y - rect.top)) / (canvas.height / 2);
//将坐标存储到g_points数组中
g_points.push(x);
g_points.push(y);

//清除<canvas>
gl.clear(gl.COLOR_BUFFER_BIT);

var len = g_points.length;
for(var i = 0; i < len; i+=2){
//将点的位置传递到变量中
gl.vertexAttrib3f(a_Position, g_points[i], g_points[i+1], 0.0);

//绘制点
gl.drawArrays(gl.POINTS, 0, 1);
}
}

鼠标点击位置的信息存储在事件对象 ev 中，该对象传给了 click(）函数，可以通过访问 ev.clientX 和 ev.clientY 来获取位置坐标。但是，由于以下两点原因，我们不能直接使用这两个坐标值：

鼠标点击位置坐标是在“浏览器客户区”(client area) 中的坐标，而不是在<canvas>中的。



<canvas>的坐标系统与 WebGL 的坐标系统，其原点位置和 Y 轴的正方向不一样。



首先，你需要将坐标从浏览器客户区坐标下转换到<canvas>坐标系下，然后再转换到 WebGL 坐标系下。

首先，获取<canvas> 浏览器客户区的中的坐标，rect.left 和 rect.top 是 <canvas> 的原点在浏览器客户区中的坐标。

那么 (x - rect.left) 和 (y - rect.top) 就可以将客户区坐标系下的坐标（x, y）转换为 <canvas> 坐标系下的坐标。

接下来，将 <canvas>坐标系下的坐标转换到 WebGL 坐标系统中，而WebGL的原点是在 <canvas> 的中心，<canvas>中心的坐标是（canvas.width/2, canvas.height/2）。

然后，你就可以使用（（x-rect.left）- canvas.width/2）和 （canvas.height/2 - （y - rect.top））将<canvas>的原点平移到中心点。

因为 WebGL 中轴的坐标区间为 -1.0 到 1.0，所以最后一步我们将 x 坐标除以 canvas.width/2，将 y 坐标除以 canvas.height/2，将<canvas> 坐标映射到 WebGL坐标。

为什么要把鼠标每次点击的位置都记录下来，而不是仅仅记录最近一次鼠标点击的位置。这是因为WebGL使用的是颜色缓冲区。

WebGL 系统中的绘制操作实际上是在颜色缓冲区中进行绘制的，绘制结束后系统将缓冲区的内容显示在屏幕上，然后颜色缓冲区就会被重置。因为我们有必要将没vishubiao点击的位置记录下来。鼠标每次点击之后，程序都重新绘制了所有的点。

示例程序运行结果：



关于本小节后提到的实验：

在每次画点之前，不清空<canvas>会有什么结果。



在运行程序后，先看到黑色的背景，但第一次点击鼠标后，背景就变成了白色，然后绘制了一个红点。

这是因为在绘制点之后，颜色缓冲区就被 WebGL 重置为了默认的颜色（0.0， 0.0， 0.0， 0.0）。默认的颜色 alpha 分量是 0.0，也就是说默认背景色是透明的了。因此<canvas>就成透明的了，你就能通过<canvas>元素看到网页的背景颜色（白色）。