Mesh appears serrated when subdivided with the SubdivisionModifier

Questions
1

Hello,

I am trying to apply the SubdivisionModifier to a mesh exported from Blender with the Three.js JSON exporter (Vertices, Faces and Normals only)

It looks like this in Blender

And in my browser it’s rendered like this (the colour / opacity is normal, and the object is not intersecting another object in the scene)

I don’t understand why there are these saw-like protuberances.

I have checked that the mesh is clean and that it subdivides well in Blender, even after triangulating the faces.

It is an extract from a full body mesh which is subdivided correctly by Three.js’ SubdivisionModifier.

When I subdivide the mesh in Blender, apply the modifier and import the higher res mesh in Three.js, it is rendered correctly.

Do you have any idea of what is happening ?
Thanks

2

Your mesh is modelled using quads (4 sided polygons). Three.js doesn’t support these, it can only render triangular polygons, so they are automatically subdivided. Usually this works pretty well, but it looks like in your case it’s causing problem. Probably the easiest fix here is to subdivide the quads in blender before re-exporting.

3

Hello Looeee,

Thank you for your help. I have just tried that. It didn’t have any visible impact on the subdivision (the pattern didn’t change).

I would have thought the JSON exporter was doing it automatically (this is what happens when you export to some other exchange formats), but I noticed the file size was larger after triangulating the faces so I guess it is as you say: Three.js triangulates the faces during importation.

I can hide the problem by extruding every outer edge loop and insetting them a little bit, but it breaks the workflow (I mark seams on the global mesh, then use an edge split modifier to separate the parts before exporting. This allows me to make changes on the original mesh as a whole).

4

Hello,

I also experimented issues when exporting subdivision surfaces from Blender to Three.
It seems that this is due indeed to the use of triangle faces only, and the replacement of the Catmull-Clark subdivision algorithm with the Loop Scheme algorithm : https://github.com/mrdoob/three.js/issues/4455

Using triangles should help to get an acceptable result, but you will never be able to get the exact same surface as the one you see in Blender.
Another way to deal with that would be to pick back the Catmull-Clark from previous three.js version and use it as a special importer for quad meshes…

1 Like