Hi!
I’m using DecalGeometry with MeshBasicMaterial
let decalMaterial = new THREE.MeshBasicMaterial({
map: new THREE.Texture(),
transparent: true,
depthTest: true,
depthWrite: false,
polygonOffset: true,
polygonOffsetFactor: -4,
wireframe: false,
});
Is there way to remove this black border?
It’s absent on the picture, and added by three.js.
I suppose it’s MeshBasicMaterial’s doing.
Instead of making the material transparent, can you please try it with this:
let decalMaterial = new THREE.MeshBasicMaterial({
map: new THREE.Texture(),
alphaTest: 0.5,
depthWrite: false,
polygonOffset: true,
polygonOffsetFactor: -4
});
Try to change the value of alphaTest to fine-tune the result.
If the value is too low, we can see black border again
The glitch at far distances is a know issue with alpha testing right now. Unfortunately, there is currently no built-in fix for this.
Hmmm… there is kind of a fix. It’s to do with alpha pre-multiplication. The reason why you see what you see is because color channels (RGB) outside of the flower pattern are all set to 0(black), when mipmaps are created and there’s some interpolation happening at the border between the edge of the flower and the “empty” space, you get a mix of white and black with some intermediate alpha value (the A in RGBA). This is the reason why you end up with the dark outline and why it gets worse the further you zoom out.
Now, how to deal with that? Well, one way is to modify your source image, take all color channels and fill them with pure white outside of the flower as well, that’s pretty simple. You might need to tweak some alpha-pre-multiplication stuff in texture settings, but I don’t remember what, have a look at the documentation.
If you use alphaTesting though, as @Mugen87 suggested - you’re stuck with what you get, just as @Mugen87 said. There is a ton of papers written on why, and I think that you probably wouldn’t want to know why and how to go around that as it boils down to a lot of shader maths and custom tooling.
