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

Question

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

javascript3dwebglcubenormals

4

我在玩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个顶点组成的立方体创建正确的法线？如果不行，那么有什么替代方案？

- Ionel Lupu

2个回答

0

你可以使用一个透传几何着色器来解决这个问题。

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

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

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

- frankelot

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kolenda · Accepted Answer

你需要明白，顶点不仅仅是空间中的一个点，它实际上是一组不同的属性连接成一个对象。这些属性包括位置，但也可能有法线、颜色、纹理坐标等。

在三维图形中，你经常需要将两个或更多顶点放置在同一位置，但具有不同的法线、颜色或纹理坐标。这就是你的立方体的情况 - 一般情况下，立方体只有8个角落，但所有这些角落都连接着3个面，每个面都有不同的法线，这就是为什么你看到的所有立方体示例都有24个顶点的原因。

事实上，你的立方体与球非常相似，几何形状非常简单，球上的每个顶点只有一个法线，而在立方体中，你需要将每个面作为一个平整表面着色，所以构建该面的所有顶点需要相同的法线。

如果你将立方体看作6个不同的四边形，用单独的顶点创建所有这些四边形可能更容易理解。