第3章 交互和动画

本课主线：从鼠标事件到图形对象

鼠标给浏览器的是窗口位置，WebGL需要的是图形空间中的数据；如果还要选中对象，就必须建立屏幕位置与对象之间的关系。

输入设备：物理设备与逻辑角色

请求模式 vs 事件模式

scanf("%d", &x);

canvas.addEventListener("click", callback);

事件对象：程序从事件中得到什么？

事件不仅告诉我们“发生了点击”，还携带位置、按键、目标元素等测量数据。

canvas.addEventListener("mousedown", function(event) {
    console.log(event.clientX, event.clientY);
});

坐标系不一样：不能直接使用鼠标坐标

浏览器窗口坐标以左上角为原点（Y轴向下）；WebGL 裁剪空间 (NDC) 以中心为原点，范围映射在 [-1, 1] 且 Y轴向上。

坐标映射公式 (Screen → NDC)

设 Canvas 宽度为 w，高度为 h，鼠标在 Canvas 内的像素坐标为 (xw, yw)：

X 轴映射： x = -1 + 2 · x_w / w

Y 轴映射： y = -1 + 2 · (h - y_w) / h

核心要点：Y 轴方向反转（h - yw）是完成屏幕像素到 GPU 渲染坐标转换的关键。

随堂测验 1：鼠标坐标怎样变成 WebGL 坐标？

更稳健的Canvas坐标转换

如果Canvas不在页面左上角，直接用 event.clientX / canvas.width 会产生偏移。

function pointerToNDC(event, canvas) {
    const rect = canvas.getBoundingClientRect();

    const xCanvas = (event.clientX - rect.left) * canvas.width / rect.width;
    const yCanvas = (event.clientY - rect.top) * canvas.height / rect.height;

    const x = 2 * xCanvas / canvas.width - 1;
    const y = 1 - 2 * yCanvas / canvas.height;

    return [x, y];
}

Demo：Pointer → GPU 坐标转换实验台

点击怎样变成GPU中的新顶点？

坐标转换之后，得到的是WebGL可用的位置数据。接下来把它写入Buffer，并在下一次绘制中显示出来。

let index = 0;

canvas.addEventListener("click", function(event) {
    const [x, y] = pointerToNDC(event, canvas);
    const point = new Float32Array([x, y]);

    gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);
    gl.bufferSubData(gl.ARRAY_BUFFER, 2 * 4 * index, point);
    index++;
});

function render() {
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.POINTS, 0, index);
    requestAnimationFrame(render);
}

交互式程序必须保存跨事件状态

一次点击只能提供一个位置。绘制矩形需要两次点击，因此程序必须记住第一次点击的位置。

firstPoint = [x, y];
waitingSecond = true;

makeRectangle(firstPoint, [x, y]);
waitingSecond = false;

Demo：两次点击生成矩形

从“点在哪里”到“点中了谁”

位置输入只能告诉程序用户点击了哪个屏幕位置；拾取要回答的是这个位置对应哪个图形对象。

Picking（对象拾取）的三种常见思想

前向渲染从对象绘制到像素；反向拾取要从鼠标点击的屏幕像素锁定对应图形对象。

拾取思想判断与随堂测验

拓展：窗口事件与触摸手势

AI Bug Hunt：为什么点画偏了？

现象：鼠标点击Canvas中心附近，但点总是向右下偏移。

canvas.addEventListener("click", function(event) {
    const x = -1 + 2 * event.clientX / canvas.width;
    const y = -1 + 2 * (canvas.height - event.clientY) / canvas.height;
    addPoint(x, y);
});

本课总结：用户操作如何进入图形流水线

第三章整体关系

第三章把前两章的静态绘制程序扩展为真正的交互式图形应用。