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

Answer 1

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://community.khronos.org/t/calculate-normals-in-vertex-shader/71573/4

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

Answer 2

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.