Normal vectors for an eight vertex cube

Question

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?

Answer 1

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.