My glTF model has visible seams across quads

[Shannon_Poole]

I’m not really sure this is the best place to ask this question as I am fairly new to 3d asset creation. I have mostly dealt with the code side of things. My goal is to load this file using my own renderer engine but my renderer and threejs have a very similar output and both have the same problem so I am hoping someone here can help me out. I assume it is something with my model as the issue doesn’t present itself in any of the gltf sample models.

So I have created this stylized model in blender. It has the standard textures for glTF and nothing more for the shader. It’s fairly low poly with a high poly normal map baked into it. It looks as I would like in blender, however, when I export it as glb and load it into the threejs viewer there are visible seams that cross over some of the quads. I can’t figure out where they are coming from.

I know gltf doesn’t really have quads and they get converted to triangles so I have tried a few things to try to correct it.

a. Mesh -> Clean Up -> Make Planar Faces
b. Scale the faces along the normal axis to 0, AKA a manual make planar
c. Triangulate the quads before export
d. various AutoSmooth settings

None seem to have any affect on it.

I tried the model in threejs and babylonjs and while still slightly visible in babylon, it’s significantly less so.

At first I thought it might just be the blender exporter but if I re-import in blender, it looks fine. If I load the glb file in Clay Viewer it looks fine. I’m at a loss for what I am doing wrong.

Is this a common problem and is there any way to solve it, or at least minimize the effect?

I have attached the glb file and some screen shots of the various renderers. I can upload the Blender file and textures if that helps at all.

GLB file: barrel.glb
Blender:

ThreeJS:

BabylonJS:

Clay Viewer:

[donmccurdy]

Are you able to share the .blend file?

And, do you get any better results if you enable the mesh “Tangents” option under the glTF exporter settings?

[Shannon_Poole]

Thank you so much for taking the time to take a look.

I tried with the tangents options and it didn’t have any effect that I could see.

I’ve attached the blend file and textures here. Sorry it’s not all zipped up together, it said the file was too big for that.

barrel_low_poly.zip (3.7 MB)
COLOR.png

METALLIC.png

NORMAL.png

ROUGHNESS.png

[looeee]

I’ve tested this model in Sketchfab.com, as well as 3D Builder and Paint 3D in Windows, no seams are visible.

However, I tested with clara.io and gltf-viewer.donmccurdy.com and I can see the seams in both so it looks like a three.js issue. @donmccurdy should we open a bug report for this?

[donmccurdy]

Sounds good to me!

[looeee]

@Shannon_Poole can you open a bug report?

mrdoob/three.js

Please include all the details you put here and link to this discussion as well.

[donmccurdy]

Actually the version with tangents really does look better to me, at least in three.js r108.

Without tangents:

With tangents:

@Shannon_Poole are you using an older version of threejs by any chance?

[Shannon_Poole]

@donmccurdy That does look much better. I’m using the same URL as you there. Maybe it’s my export. I’m using Blender 2.81. is there anything else I need to do besides click the Tangents checkbox on the export?

What it looks like for me:

My settings:

Actually if I export as gltf embedded and inspect the mesh there is no TANGENT attribute:

"meshes" : [
        {
            "name" : "Cylinder.015",
            "primitives" : [
                {
                    "attributes" : {
                        "POSITION" : 0,
                        "NORMAL" : 1,
                        "TEXCOORD_0" : 2
                    },
                    "indices" : 3,
                    "material" : 0
                }
            ]
        }
    ]

That doesn’t seem right. I tried Blender 2.80 and the same result. Am I missing something obvious here?

[Shannon_Poole]

Actually I found this issue that says I need to triangulate the mesh first. Which allowed me to export the tangents and it does appear much better.

Do you think I should still open a bug in threejs or is this expected behavior?

[Shannon_Poole]

For anyone else that does come across this issue, while it did look significantly better, I saw that @donmccurdy’s looks even better than mine.

Mine seemed to look a bit more sunken in on the faces:

I had selected the faces in edit mode and did Face -> Triangulate Faces and left the default settings.

So I went back again and tried “fixed” on the quad method instead:

This resulted in a much cleaner look:

[donmccurdy]

@Shannon_Poole

Actually I found this issue that says I need to triangulate the mesh first. Which allowed me to export the tangents and it does appear much better.

Ah that makes sense. Sorry for the confusion there, I wish we had a way to display those warnings in the Blender exporter more clearly.

Do you think I should still open a bug in threejs or is this expected behavior?

When tangents aren’t present, three.js approximates them with derivatives in the shader. Whether that methodology could be improved for the seams you see here, I’m afraid I have no idea.

Glad you were able to reach a solution, and thanks for writing up the details!