javascript - Normal vectors for an eight vertex cube - Stack Overflow

admin管理员组

文章数量:1328403

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.

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 (my code stars at line 200)

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:

This is 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 
    ]
}

My question is :

It is possible to create correct normals for a 8 vertex cube? If not, what are the alternatives?

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.

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 (my code stars at line 200)

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:

This is 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 
    ]
}

My question is :

It is possible to create correct normals for a 8 vertex cube? If not, what are the alternatives?

• javascript
• 3d
• webgl
• cube
• normals

Share Improve this question Follow asked Aug 25, 2014 at 8:48 Ionel LupuIonel Lupu 2,81166 gold badges3232 silver badges5656 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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.

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.

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.

You could use a pass through Geometry shader to get around this.

A geometry shader takes in a shape and outputs another one (which can be of the same type). In your case it should just output the same triangle it takes as input. It should also calcualte the normal and send it over to the FS

Find code for the VS, GS and FS here: https://munity.khronos/t/calculate-normals-in-vertex-shader/71573/4

For more info on geometry shaders check: "Visualizing normal vectors" here: https://learnopengl./Advanced-OpenGL/Geometry-Shader

本文标签： javascriptNormal vectors for an eight vertex cubeStack Overflow