三维几何视图 (WebGL2 渲染)
标准几何体模式
GPU 顶点显存状态 (VBO)
状态：完全静止 (Static)
模型包含 24 个顶点，12 个三角面。几何数据一次性上传后，每帧旋转无需重写 Buffer！
当前观察顶点 (Inspected Vertex v₀)
原始 VBO 坐标：aPosition = [1.00, 1.00, 1.00, 1.0]
CPU / 应用端状态控制与矩阵解算
绕 Y 轴旋转 (θ):
35°
绕 X 轴旋转:
20°
平移 (tx, ty):
0.0
缩放 (Scale):
1.0×
CPU 实时计算的模型矩阵 (uModelMatrix)
4×4 列优先 (Float32Array)
CPU → GPU 数据传输通道 (API 调用)
// 每帧只向 GPU 传输 16 个 float (64 字节)
gl.uniformMatrix4fv(uModelLoc, false, modelMatrix);
gl.uniformMatrix4fv(uModelLoc, false, modelMatrix);
GPU 顶点着色器显微镜 (Per-Vertex)
GLSL ES 3.00
#version 300 es
in vec4 aPosition; // 从 VBO 读入 (保持不变)
uniform mat4 uModelMatrix; // CPU 传入 (每帧更新)
void main() {
gl_Position = uModelMatrix * aPosition;
}
in vec4 aPosition; // 从 VBO 读入 (保持不变)
uniform mat4 uModelMatrix; // CPU 传入 (每帧更新)
void main() {
gl_Position = uModelMatrix * aPosition;
}
🔍 顶点 v₀ 单顶点代数计算输出：
P' = M · P
gl_Position = [0.82, 1.15, 0.76, 1.00]
gl_Position = [0.82, 1.15, 0.76, 1.00]
架构策略对比 (三种实现方案)：
方案 B (行业标准推荐)：CPU 仅计算一次 4×4 矩阵并上传 64 字节，由 GPU
对成千上万顶点做高度并行变换。总传输量极低，性能最优。