Three.js: Canvas Texture Seams/Artifact Lines at Repeat Border

Created on 24 May 2020 · 4Comments · Source: mrdoob/three.js

Description of the problem

Hi, I'm using CanvasTexture like in the examples here:
https://threejs.org/examples/?q=canvas#webgl_materials_texture_canvas
https://threejsfundamentals.org/threejs/lessons/threejs-canvas-textures.html

My problem is I'm seeing seams/artifact lines at the repeat border of the texture, like in these images:

It's only supposed to have lines at the actual borders where there are height differences.

What I'm doing is I have a set of 16 different canvases that turn into 16 different textures + materials (which material I use doesn't change anything), and then I have a texture for each type of grid cell border in my game: border in the back, right, front, left, etc. It seems that when it repeats these textures, it's sampling very slightly from the opposite side of the texture, or something like that.

I've tried using canvas context.rect() and context.clip(), and I've also tried using canvas context.drawImage() from one canvas onto another (not depicted here), in order to see if maybe there's some kind of overdraw in the out-of-bounds area of the canvas. That's simply not the case.

Also, notably, if I change the color I'm using to draw the borders on the canvases to white, the seams/artifact lines become white as well:

The entire map is using these same 16 textures, using the material index (the Mesh has an array of 16 materials). I have 2 triangle Face3's per grid cell, and I assign a material index to each pair of triangles, each grid cell. I've tried not adding the cliff/side mesh as well, to see if maybe that was causing any issues, to no avail.

I would just use the clipping/padding, but it looks weird this way and looks way better if the borders are right on the edge of the texture.

Feel free to ask any questions you think may be relevant. My code is also open source, if you want to test.

Thanks.