八顶点立方体的法向量答案

【问题标题】：Normal vectors for an eight vertex cube八顶点立方体的法向量
【发布时间】：2014-08-25 08:48:28
【问题描述】：

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

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

问题是来自互联网的立方体有 24 个顶点（每个面 4 个 * 6 个面），这对于我认为的立方体来说已经很多了。

FIDDLE MY CUBE | FIDDLE INTERNET CUBE（我的代码在第 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 个顶点的立方体创建正确的法线吗？如果没有，有什么替代方案？

【问题讨论】：

标签： javascript 3d webgl cube normals

【解决方案1】：

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

在 3D 图形中，您通常需要将两个或多个顶点放置在同一位置，但具有不同的法线、颜色或纹理坐标。你的立方体就是这种情况——立方体通常只有 8 个角，但所有这些角都连接 3 个边，每边都有不同的法线，所以这就是你看到的所有示例立方体都有 24 个顶点的原因。

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

如果您将立方体视为 6 个不同的四边形并创建具有单独顶点的所有这些四边形，可能会更容易理解。

【讨论】：

有趣。但是为什么像 Blender 这样的程序会导出（obj）模型只有 8 个顶点、8 个法线和 12 个索引呢？它是如何呈现的？而我不能？
他们在运行时扩展它们。但是他们以较小的格式导出它们。通常建模包使用单独的位置索引，单独的法线索引，单独的顶点颜色索引等。You can do the same in WebGL with some work 但我不推荐它。

【解决方案2】：

您可以使用通过几何着色器来解决此问题。

几何着色器接受一个形状并输出另一个形状（可以是相同的类型）。在您的情况下，它应该只输出与输入相同的三角形。它还应该计算法线并将其发送给 FS

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

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

【讨论】：