SceneKit texture mapping issue on material

Question

I'm trying to achieve with SceneKit the drawing of a simple set of 4 boxes which are next to each other with textures applied on each of them (Minecraft style) :

The texture are like this (png files) :

I would like to avoid the small blue lines between the boxes (which are not in the textures) but whatever setup I try, these artefacts stay.

Any idea how to avoid them ?

Below the setup of the material in the scenekit editor (exactly the same for each box, except the diffuse part which is refering to the right texture file)

The issue in the scenekit editor is also appearing in the app running on the device.

What is strange is that if I just do a full black (or whatever color) texture (with or without anything inside), these artefacts do not appear, example below :

Answer 1

It seems you need to programmatically set the wrap modes of each material property in order to avoid this "wrap-around" behavior. Configure each material property to which you've assigned a texture such that its wrapS and wrapT properties are .clamp, rather than .repeat, which appears to be the default when loading materials from an .scn file.

let nodes = scene.rootNode.childNodes // get a list of relevant nodes
for node in nodes {
    guard let materials = node.geometry?.materials else { continue }
    for material in materials {
        material.diffuse.wrapS = .clamp
        material.diffuse.wrapT = .clamp
        // ...confgure other material properties as necessary...
    }
}

Answer 2

When I zoom in on your texture png files, it actually looks like there is a thin blue border on all sides:

Have you verified that these lines aren't there on your actual texture files, even a couple pixels wide?

If you're sure your original textures are perfect, it is likely a problem with your texture wrap settings, as warrenm commented. i.e. the SCNWrapMode assigned to material.diffuse.wrapS and material.diffuse.wrapT is set to SCNWrapMode.repeat. I would set your wrap mode to either SCNWrapMode.clamp. I'm not sure how to edit this in the Xcode editor, but programmatically it would look something like this, if your texture is in the Assets.xcassets folder:

...
material.diffuse.contents = UIImage(named: "your_texture")!
material.diffuse.wrapS = SCNWrapMode.clamp
material.diffuse.wrapT = SCNWrapMode.clamp
...

Or alternatively, you could use SCNWrapMode.clampToBorder and set the material's borderColor property to black.

But I would really look at your original png files to make sure that blue border doesn't exist in the texture itself. Good luck!