D03-03
两次点击生成矩形 Two-Click Rectangle Builder
核心问题：“交互程序怎样记住第一次点击，并在第二次点击时生成完整几何？”
WebGL 2.0 (ES 3.00)
大学计算机图形学 · 第3章 交互与动画
交互建模画布 (Interactive Canvas)
点击第1次选P1，移动预览，点击第2次固定矩形
绘制模式：gl.TRIANGLE_FAN (4 Vertices /
Rect)
总点击数: 0
事件与状态显微镜 (State Machine)
first = true
STATE 0: WAIT_FIRST_POINT
等待第 1 次点击，Canvas 无未定顶点
↓ click #1 (记录角点 P1)
STATE 1: WAIT_SECOND_POINT
已保存 P1，鼠标移动实时预览
↓ click #2 (生成几何并提交 Buffer)
STATE 2: RECT_COMMITTED
4 顶点写入 GPU Buffer，重置为 STATE 0
📐 几何推导：2 点 → 4 顶点
P1 (输入1):
(--, --)
(--, --)
P2 (输入2):
(--, --)
(--, --)
P3 (推导点):
(--, --)
(--, --)
P4 (推导点):
(--, --)
(--, --)
💡 坐标组合原理：
P3.x = P1.x, P3.y = P2.y ； P4.x = P2.x, P4.y = P1.y
只需 2 个点击角点，其余 2 点全部由数学关系推导！
P3.x = P1.x, P3.y = P2.y ； P4.x = P2.x, P4.y = P1.y
只需 2 个点击角点，其余 2 点全部由数学关系推导！
事件轨迹 (EVENT LOG)
最近 8 条
- #00 system ready, waiting for input
几何与 GPU 监视器 (Geometry & GPU)
Rect #0
| 顶点 | X (NDC) | Y (NDC) | 数据来源 (Source) |
|---|---|---|---|
| P1 | -- | -- | Mouse click #1 |
| P3 | -- | -- | Derived (x1, y2) |
| P2 | -- | -- | Mouse click #2 |
| P4 | -- | -- | Derived (x2, y1) |
GPU Vertex Buffer (ARRAY_BUFFER)
Static
已存顶点: 0 / 400
占用显存: 0 B / 3.2
KB
// gl.bufferSubData 待提交数据预览
[等待第二次点击以组装 4 顶点浮点数据...]
[等待第二次点击以组装 4 顶点浮点数据...]
🔍 坐标转换简报 (承接 D03-02)
展开 ▼