Question

我正在使用WEBGL，今天遇到了我的立方体顶点法线的问题。

我使用立方体网格from internet检查了我的代码，效果很好。

问题在于，互联网上的立方体有24个顶点（每个面部4个* 6个面），这对于我认为的多维数据集来说是很重要的。

FIDDLE MY CUBE | FIDDLE INTERNET CUBE（我的代码在第200行明星）

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

这是与我的立方体几乎相同的旋转位置的立方体形式互联网： enter image description here

这是我的立方体：

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个角，但所有这些角都连接3个边，每个边有不同的法线，所以这就是为什么你看到的所有实例立方体都有24个顶点。 / p>

实际上，您的立方体非常类似于球体，具有非常简单的几何形状，其方式是球体上的每个顶点只有一个法线，并且顶点周围的光照是平滑的。在立方体中，您需要将每个边都作为平面遮挡，因此构建该边的所有顶点都需要相同的法线。

如果您将多维数据集视为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

八个顶点立方体的法线向量

2 个答案: