THREE.js ImmediateRenderObject: Coplanar Triangles get different shading?

Question

I am a computer graphics beginner (have had 1 semester of CG basics).

One question concerning shading (both flat and smooth) in THREE.js using ImmediateRenderObject:

Why are coplanar triangles shaded differently, both in flat and in smooth shading? The triangles, as you can see in the pictures below, have the correct face normals (i.e. all the same, perpendicular to the plane the triangles lie in, they are the blue ones in the pictures below). The vertex normals also look correct (i.e. also perpendicular to the plane except for the vertex normals of the vertices lying at the very border, red ones in the pictures below).

I have a diamond-shaped geometry (as an ImmediateRenderObject) from which I subtract a CubeGeometry at the bottom (using THREE.CSG).

Both before and after CSG operation, coplanar triangles get different shading, although face normals seem to be entirely correct (vertex normals don't seem to be entirely correct at the sharp edges of the diamond, but this shouldn't affect the coplanar parts at the top and on the different sides).

Some idea why this happens and what I could do to get the correct shading?? I would really appreciate any help!

Thanks in advance! :)

Here are the pictures:

Complete diamond with flat shading: http://i.stack.imgur.com/kWt6J.png

Top of cut diamond with flat shading: http://i.stack.imgur.com/0OJZv.png

Answer 1

Found a solution to my problem for those of you interested:

When using ImmediateRenderObject, I had filled the normal array with the vertex normals. Now, instead I fill them with the face normals which makes it all flat. With this solution, however, smooth shading does not seem to be supported. But it solves my issue!

Good luck for you! :)

Answer 2

If they're lit differently is because they're not exactly in the same plane.A quad gets split in two triangles at render time and if those two triangles are not in the same plane they get lit differently.