Three.js: Dotted line in uv boundary when using equirectangular environment maps

[majinge78467]

Mirror question: https://discourse.threejs.org/t/bizarre-dotted-line-in-uv-boundary-when-use-repeatwrapping/3758

Setting the minFilter of the texture to THREE.LinearFilter solves the problem. And I want to ask why and the underlying cause of the problem. Maybe some codes need to change in mipmap to fix this problem:

Test: https://jsfiddle.net/f2Lommf5/12110/

Three.js version

• [ ] Dev
• [x] r95
• [ ] ...

Browser

• [x] All of them
• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer

[Mugen87]

I suggested to move the issue to github since you can see the mentioned seam in one of the official examples. You have to click on Equirectangular to see the glitch.

https://threejs.org/examples/#webgl_materials_envmaps

[mrdoob]

8305

[mrdoob]

Further reading... #1621

[WestLangley]

The artifact is caused because the lowest-resolution (blurriest) mipmap is selected when the UV changes from 1 to 0 at the seam. A workaround is to disable mipmapping:

texture.generateMipmaps = fase;
texture.minFilter = THREE.LinearFilter;