CODEWITHSUNDEEP
javascriptthree.jsgeometrynormals
aceslowman
aceslowman

Reputation: 631

Fixing normals in custom threejs capsule geometry

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:

  1. The middle face normals are not oriented properly.
  2. 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:

  1. 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

image of geometry normal issues

geometry in wireframe view

Upvotes: 0

Views: 882

Answers (1)

pailhead
pailhead

Reputation: 5431

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.

Upvotes: 1

Related Questions