网格挤出时UV坐标计算：8顶点立方体UV映射实现问询

嘿，这个问题我太熟了——很多人在优化3D模型顶点数的时候都会踩这个坑！先给你拍板：完全可以只用8个顶点实现优质的立方体UV映射，但关键得搞懂为什么之前用24个顶点没问题，而8个顶点就出问题了。

你之前用24个顶点（每个面4个独立顶点）能正常UV映射，是因为每个顶点只属于一个面，所以每个顶点的UV坐标只对应这个面的纹理位置。但立方体的8个角点，每个都属于3个不同的面——比如正面右上角的顶点，同时也是顶面右下角、右侧面左上角的顶点，这三个面里它的UV位置完全不一样！如果直接给这个顶点分配一组UV，渲染三个面时都会用这组UV，结果自然是拉伸、错位的错误映射。

要实现8个顶点的正确UV映射，核心是让每个顶点在不同面上使用不同的UV坐标，有两种靠谱的方案：

方案1：顶点着色器中根据法线计算UV（最常用） #

这种方法不需要额外的顶点属性，只需要给每个顶点传递位置和法线，然后在顶点着色器里根据法线方向判断当前顶点属于哪个面，动态计算对应的UV：

1. 先给立方体的8个顶点设置正确的法线：比如正面的4个顶点法线是(0,0,1)，顶面是(0,1,0)，以此类推。
2. 在顶点着色器里，根据法线方向选择对应的坐标分量来生成UV，同时把顶点的局部坐标从[-0.5, 0.5]（假设立方体中心在原点，边长为1）转换到[0,1]的UV范围。

举个GLSL伪代码的例子：

attribute vec3 aPosition;
attribute vec3 aNormal;
varying vec2 vUv;

void main() {
    gl_Position = uProjection * uModelView * vec4(aPosition, 1.0);
    
    // 根据法线方向计算对应面的UV
    vec2 uv;
    if (aNormal.z > 0.9) { // 正面（+Z）
        uv = aPosition.xy + 0.5;
    } else if (aNormal.z < -0.9) { // 背面（-Z）
        uv = vec2(1.0 - (aPosition.x + 0.5), aPosition.y + 0.5);
    } else if (aNormal.y > 0.9) { // 顶面（+Y）
        uv = aPosition.xz + 0.5;
    } else if (aNormal.y < -0.9) { // 底面（-Y）
        uv = vec2(aPosition.x + 0.5, 1.0 - (aPosition.z + 0.5));
    } else if (aNormal.x > 0.9) { // 右侧面（+X）
        uv = aPosition.zy + 0.5;
    } else { // 左侧面（-X）
        uv = vec2(1.0 - (aPosition.z + 0.5), aPosition.y + 0.5);
    }
    vUv = uv;
}

这种方法的好处是只用8个顶点，索引数也正常（6个面×2个三角形×3个顶点=36个索引），完全不需要复制顶点，而且UV映射效果和24个顶点的版本一致。

方案2：给顶点分配多组UV通道（适合复杂纹理需求） #

如果你的纹理需要更精细的控制（比如每个面的UV偏移、缩放不同），可以给每个顶点存储3组UV坐标（对应它所属的3个面），然后在绘制每个面的时候，指定使用对应的UV通道。不过这种方法需要GPU支持多UV属性，而且绘制时要注意面与UV通道的对应关系，相对复杂一些，一般方案1就足够应对大部分场景了。

• 确保每个顶点的法线方向正确，否则着色器会判断错面，UV还是会出错。
• 检查顶点的局部坐标范围，比如如果你的立方体是从[0,1]而不是[-0.5,0.5]，那UV计算时就不需要加0.5了。

内容的提问来源于stack exchange，提问作者padmalcom