八顶点立方体的法向量 [英] Normal vectors for an eight vertex cube

问题描述

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

I was playing around with WEBGL and today and a encountered a problem with my cube's vertex normals .

我用立方体网格检查了我的代码来自互联网 并且效果很好.

I checked my code with a cube mesh from internet and it works great.

问题是来自互联网的立方体有 24 个顶点(每个面 4 个 * 6 个面)，我认为这对我的立方体来说太多了.

The thing is that the cube from internet has 24 vertices (4 for each face * 6 faces) which is way to much for I cube I think.

FIDDLE MY CUBE |FIDDLE INTERNET CUBE(我的代码位于第 200 行)

FIDDLE MY CUBE | FIDDLE INTERNET CUBE (my code stars at line 200)

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

I figured out that a cube needs no more than 8 vertices and 12 indices. But when I render my cube I get a weird shape on screen like this(because of the normals?):

这是互联网上的立方体，旋转位置与我的立方体几乎相同:

This is the cube form internet in almost the same rotation position as my cube:

这是我的立方体:

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 个顶点的立方体创建正确的法线?如果没有，有哪些替代方案?

推荐答案

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

You need to understand, that the vertex is not just a point in the space, it's rather a set of distinct properties, connected into one object. Those properties include position, but may also have normal, color, texture coordinates, etc.

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

In 3D graphics you'll often need two or more vertices placed in the same location, but with different normals, colors or texture coords. And this is the case with your cube - the cube in general has just 8 corners, but all of those corners connects 3 sides and every side has different normal, so it's the reason why all example cubes you've seen had 24 vertices.

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

In fact your cube is very similar to a sphere, with very simple geometry, in a way that every vertex on the sphere has just one normal and the lighting is smooth around the vertex. In the cube you need to shade every side as a flat surface, so all vertices that build that side needs the same normal.

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

It may be simpler to understand if you look at the cube as a 6 distinct quads and create all those quads with separate vertices.

这篇关于八顶点立方体的法向量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！