八顶点立方体的法向量

Question

我在玩WEBGL，今天遇到了一个立方体顶点法线的问题。

我用立方体网格从互联网上检查了我的代码，它工作得很好。

问题是，来自互联网的立方体有24个顶点(每个面4个*6个面)，我认为这对我的立方体来说是非常重要的。

拨弄我的魔方 \ 篡改互联网立方体 (我的代码在第200行)

我发现一个立方体不需要超过8个顶点和12个索引。但是当我渲染我的立方体时，我会在屏幕上得到这样一个奇怪的形状(因为法线？)：

​

这是与我的立方体处于几乎相同的旋转位置的多维数据集：

​

这是我的立方体：

var cube = {
    "vertices" : [
        -0.5 , 0.5 , 0.5, // 0
         0.5 , 0.5 , 0.5, // 1
        -0.5 ,-0.5 , 0.5, // 2
         0.5 ,-0.5 , 0.5, // 3

        -0.5 , 0.5 , -0.5, // 4
         0.5 , 0.5 , -0.5, // 5
        -0.5 ,-0.5 , -0.5, // 6
         0.5 ,-0.5 , -0.5 // 7
    ],
    "normals" : [
        0.57    , 0.57      , -0.57 ,
        0.57    , -0.57     , -0.57 ,
        -0.57   , -0.57     , -0.57 ,
        -0.57   , 0.57      , -0.57 ,
        0.57    , 0.57      , 0.57 ,
        0.57    , -0.57     , 0.57 ,
        -0.57   , -0.57     , 0.57 ,
        -0.57   , 0.57      , 0.57 
    ],
    "indices" : [
        0 , 2 , 3 ,
        0 , 3 , 1 ,

        0 , 4 , 5 ,
        0 , 5 , 1 ,

        0 , 4 , 6 ,
        0 , 6 , 2 ,

        2 , 6 , 7 ,
        2 , 7 , 3 ,

        1 , 5 , 7 ,
        1 , 7 , 3 ,

        4 , 6 , 7 ,
        4 , 7 , 5 
    ]
}

我的问题是：

可以为一个8顶点立方体创建正确的法线吗？如果没有，有什么可供选择的？

Answer 1

您需要理解，vertex不仅仅是空间中的一个点，而是一组不同的属性，连接到一个对象中。这些属性包括位置，但也可能有正常，颜色，纹理坐标等。

在3D图形中，你通常需要两个或更多的顶点放置在同一个位置，但是有不同的法线、颜色或纹理和弦。这就是你的立方体的情况--立方体通常只有8个角，但是所有这些角连接着三个边，每个边都有不同的法线，所以这就是为什么你见过的所有立方体都有24个顶点。

事实上，你的立方体和球体非常相似，有着非常简单的几何学，在球体上的每个顶点都只有一个法线，光在顶点周围是光滑的。在立方体中，你需要把每一面阴影成一个平面，所以所有构建这面的顶点都需要同样的法线。

如果你把立方体看作一个6个不同的四边形，并用不同的顶点创建所有的四边形，那就更容易理解了。

Answer 2

你可以通过几何着色来绕过这个问题。

一个几何图形着色器接受一个形状，并输出另一个(可以是相同的类型)。在您的情况下，它应该只输出与输入相同的三角形。它还应该计算正常值并将其发送到FS。

在这里查找VS、GS和FS的代码：https://community.khronos.org/t/calculate-normals-in-vertex-shader/71573/4

有关几何图形着色器的更多信息，请查看：“可视化法线向量”此处：https://learnopengl.com/Advanced-OpenGL/Geometry-Shader