Why am I getting extra faces on top of my mesh?

Questions
1

Hey all,

I’m possibly trying to do something silly, which to load an SVG, extrude it, oversample the straight lines, and then warp that geometry to curve the final mesh. It’s working pretty well except after my manual modifier/warp on the geometry, I end up with a handful of extra faces on top of my model that I don’t want and can’t seem to get rid of.

There’s a demo here: https://blackmad.github.io/webgl-svg-leather-demo/
with all the code here: https://github.com/blackmad/webgl-svg-leather-demo/blob/db916edd29d3e029ebcde424e9d40596c3d00ab6/main.js

I tried to simplify it by using a ShapeGeometry instead of an ExtrudeGeometry but in both cases I’m getting the same behavior, those extra faces on top (which then when I texture it look very wrong). I tried to further simplify the example by removing all the holes from my loaded SVG and just using the outline. None of this seems to have helped.

In this reduced example, I don’t want the dense white lines I’m seeing on top of this wireframe in the bulging area. (why the bottom isn’t bulging in this example is a question for another day)

Thanks in advance for looking,
-David

2

In general, three.js internally uses an Earcut implementation to triangulate shape definitions. The engine uses the algorithm without modifications so it’s not possible to influence they way triangles are computed.

Such extra faces are in general not bad. If you have problems when using textures, then it’s often an issue of the related texture coordinates. Can you please texture your geometry with a uv debug map like https://threejs.org/examples/textures/uv_grid_opengl.jpg? This makes it easy to see if the are any errors or discontinuities in your texture coordinates.

3

Thanks for the reply. The issue I’m trying to debug is with textures, I’m getting an ugly stretched texture on top, which is why I was going after those top faces first

updated the demo @ https://blackmad.github.io/webgl-svg-leather-demo/

4

oh wow, I think this is entirely an issue in code logic - I’m not doing the same line expansion on the bottom vertex so I don’t have enough points to do a matching curve on the bottom, so it’s getting a weird geometry,

5

Is there a good way to take a simple geometry like a line/square and add a bunch more interpolated points to it so it’s easier to run geometry transforms on it?

6

Sigh, nope, even fixing (closing) the outer path so I can generate more points on it doesn’t fix those textured top & bottom faces. I’m really confused about why the geometry is getting interpreted this way.

image
image576×702 99 KB

7

It seems like running tesselation on the extruded geometry fixed my problems!

      maxEdgeLength = 1;
      var times = 5; //Times to do the split of faces
      var tessellateModifier = new THREE.TessellateModifier(maxEdgeLength);
      for (var i = 0; i < times; i++) {
        tessellateModifier.modify(geometry);
      }

image
image890×1484 265 KB

http://dump.blackmad.com/leathergl/index.html