Fixing normals in custom threejs capsule geometry

Question

In an effort to learn a little bit more about custom geometry in three.js, I tried adapting Paul Bourke's capsule geometry example.

With my custom capsule geometry, I am currently having two issues:

The middle face normals are not oriented properly.
There is a hard seam along the side. (EDIT: fixed by deliberately computing the face normals. updated code in the gist)

And maybe one bonus question that has been lingering on my mind:

What might a general strategy be to add vertex loops in that middle segment?

I'm really happy with the geometry in general, but would anyone be able to give me some direction on how to address these issues? I feel like the normal issue in the middle segment must be the orientation of the faces, and here is the related face construction snippet:

  for(let i = 0; i <= N/2; i++){
    for(let j = 0; j < N; j++){
      let vec = new THREE.Vector4(
        i         * ( N + 1 ) +   j       ,
        i         * ( N + 1 ) + ( j + 1 ) ,
        ( i + 1 ) * ( N + 1 ) + ( j + 1 ) ,
        ( i + 1 ) * ( N + 1 ) +   j
      );

      let face_1 = new THREE.Face3(vec.x,vec.y,vec.z);
      let face_2 = new THREE.Face3(vec.x,vec.z,vec.w);

      geometry.faces.push(face_1);
      geometry.faces.push(face_2);
    }
  }

CapsuleGeometry.js

Are the normals correct if you explicitly compute them? Also, what is a "vertex loop", and what do you mean by adding them to the middle segment? — meowgoesthedog
@meowgoesthedog I just managed to remove the seam by explicitly computing the normals, which leaves the issue of the backwards normals in the middle segment. By "vertex loops", I mean adding extra segments along the connection between the two caps. — aceslowman

pailhead pailhead · Accepted Answer · 2018-04-05T19:57:24

The shading/normal seam is there because you have probably explicitly defined a hard edge there.

When you run your loops to generate the vertices, you probably duplicate the starting position. If you start at 0, and go all the way to 2PI, 0==2PI. When you weave the triangles, you probably tell the lest one to use the 2PI instead of 0 and even though they are in the same position, as far as triangles are concerned, they point to different vertices, and are thus not connected.

for(let i = 0; i <= N/4; i++){ //change to i < N 
for(let j = 0; j <= N; j++){

If you tell the last triangle in the loop to point to the beginning vertex you will make a continous surface that geometry.computeVertexNormals() can smooth out.

You can also just compute these normals directly. All the normals can be obtained in these case from the vertex positions of the original sphere before expanding it.

Fixing normals in custom threejs capsule geometry

1 Answers