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?