Seam on textured model

Hi guys!

Why at a certain viewing angle do I see a seam on the model? The texture is indented and in other programs everything looks correct.

Is this a feature of threejs?

Um, interesting. Can you share the model in this thread? I’d like to debug this on my system.

Yes, with pleasure. This is the model and one texture for it.obj.zip (2.7 MB)

I can see a fine black line at the top of the light in three.js and Sketchfab at certain camera angles/distances:

three.js

Sketchfab

image

It’s exactly at the place of a uv seam.

The issue is not related to lighting since it also happens with the unlit MeshBasicMaterial. It only occurs when using the respective diffuse texture. However, I’m not sure how to solve this issue right now :thinking:

:question:Not sure if it’s the same problem/behavior.:question:


When creating my Addon. Produces almost infinite many time-varying geometries with functions I noticed something similar when comparing Geometry and indexed BufferGeometry.
Bottom and top have extra vertices (necessary because of the uv-map). This keeps the edge / seam pretty flat even with smooth.

using .computeVertexNormals()

seam
48

The normals themselves calculated and then merged.

seamless
49

I don’t know if you can do that with a model.

Thank you guys for advice! I’m doing now one more test and I try to make pudding for baked texture maximal big like it possible. Maybe this is the solution to the problem. I can say later.

@hofk The seam that’s visible in your screenshot is the result of wrong normal data. @Sergey_Tyurin issue seems related to texture mapping. Notice that it also happens with unlit materials where normal data are not important.

1 Like

Thanks for the explanation.:+1::+1:
I see, there is still a lot in three.js which I cannot overlook yet.

I would really like to know what’s happening. It looks like the texture sampling is slightly shifted. So it does not sample the actual color of the lamp’s shape but the black default color from the surrounding texture area.

Um, it seems the seam is related to mipmapping. So if you set Texture.minFilter to THREE.LinearFilter, the visual glitch disappears. You can also solve the issue during the design phase:

5 Likes

Ran into this in the past. Nice to see the solution :smiley: