从鼠标拖动到屏幕像素一帧画面要在 CPU、GPU、显示器之间接力跑完。这篇用大白话讲清整条链路外加一个很多人都会踩的「变换累加」误区。一、一句话结论在 WebGL 里「动」几乎从不靠改几何而靠改矩阵。轨迹那几千个点一次性进了显存后基本不动旋转、平移、改原点都只是在每帧那张「合成矩阵」上做文章GPU 再用成千个核心把原始点并行重算成屏幕坐标。记住三件事几何不动原始坐标进显存后是固定参照平移 / 旋转 / 改原点默认都不碰它。每帧一张矩阵所有「动」折进投影 × 视图 × 模型这一张矩阵才 16 个数。GPU 并行重算顶点着色器拿原始点 × 矩阵几千点同时算。二、一帧是怎么画出来的从你松手前的最后一动到像素点亮要走 10 道接力、跨 4 个地盘渲染管线 10 步接力总览软硬件分工一张表看懂干什么谁在干软 / 硬算旋转角、出矩阵CPU · 你的 JS软件翻译命令、传矩阵浏览器 GPU 进程 驱动ANGLE软件 / 桥接转点、连线、上色GPU 着色器核心硬件 · 可编程光栅化GPU 固定电路硬件 · 固定功能交换缓冲、扫描输出显示控制器 显示器硬件为什么旋转这么顺几何不重传每帧只换一张 16 个数的矩阵GPU 几千核心并行重算所有点。改动极小、并行极大 —— 60 帧/秒轻轻松松。三、「旋转」到底改了什么一个常见误区很多人以为每帧把上一帧转好的点再加一点转动像滚雪球一样累上去。这是错的。真这么干P_n P_(n-1) Δ浮点误差会一帧帧累积轨迹慢慢变形、漂移。实际是每一帧都拿没动过的原始坐标当输入乘上累加来的总矩阵从头算出这一帧的位置屏幕坐标 M总 × P原始累加的是矩阵或它背后的角度点永远从原始重算。不变 / 累加 / 重算 三者关系这样做的好处连成一串不漂移误差不累积、可逆矩阵清回单位阵即还原、便宜几何常驻显卡、可组合三件事乘成一张矩阵。补充累加「角度」再每帧重建矩阵最稳若直接累乘矩阵M ΔR · M连乘久了浮点会让旋转矩阵慢慢「不正交」工程上常用四元数或定期重新正交化来兜底。四、改「原点」呢也只是矩阵让用户改模型的原点 / 初始位置渲染里还是一张矩阵吗是的。「把原点相对模型挪一下」正是平移矩阵的定义本身。更进一步根本没有「绝对的原始坐标」那串数字本来就是相对某个原点才有意义。改原点 换个坐标系描述同一堆几何。于是有两种做法屏幕上一模一样(a) 加一个矩阵原始坐标不变偏移叠进模型矩阵 —— 实时首选。(b) 重写顶点数据把每个点按新原点重算 —— 只在精度大世界 / GIS、导出、烘焙时才需要。原点改变 模型矩阵里多出来的一个因子渲染器从头到尾只看最终那张合成矩阵所以两种做法跑出来的像素完全相同。五、速查背下这几条就够原始几何只进一次显存之后基本不动。屏幕坐标 合成矩阵 × 原始坐标每帧从原始重算不是在上一帧结果上累加。累加在角度 / 矩阵上在点坐标上累加会漂移。平移、旋转、改原点 —— 全是矩阵。「加矩阵」vs「重写数据」产生相同像素只有精度 / 导出 / 烘焙才真改数据。CPU 算矩阵串行 · 软件GPU 转点上色并行 · 硬件显示控制器扫描输出。