How to avoid two transparent graphics on the same plane interfering with each other?

Questions
, ,
1

If two transparent geometries are in the same plane, and one is covered by another, when I rotate the camera, they will affect each other.
for example, I create a texture first

let height = 4;
let width = 4;
// to create a transparent texture, make a image first.
let imgBuffer = new Uint8Array(height*width*4);
for(let i = 0; i <height; i++) {
    for(let j = 0; j < width; j++) {
        let pos = (i*width + j)*4;
        let v = 10;
        if((i >0 && i< height -1) && (j > 0  && j < width - 1)) {
            v = 20;
        }
        imgBuffer[pos] = v;
        imgBuffer[pos+1] = v;
        imgBuffer[pos+2] = v;
        imgBuffer[pos+3] = 255; // alpha
    }
}
let alphaTexture = new THREE.DataTexture(imgBuffer, width, height, THREE.RGBAFormat);
alphaTexture.needsUpdate = true;
alphaTexture.wrapS = THREE.RepeatWrapping;
alphaTexture.wrapT = THREE.RepeatWrapping;
alphaTexture.repeat.set(1,1); 

// create a plane
const planeGeometry = new THREE.PlaneGeometry(height, width);
const planeMeterial = new THREE.MeshBasicMaterial({color: 0xffffff, side: THREE.DoubleSide, transparent: true, alphaMap: alphaTexture})
const planeMesh = new THREE.Mesh(planeGeometry, planeMeterial);
planeMesh.position.set(0,0,0);
scene.add(planeMesh);

then, I get the image like :

image
image772×687 1.17 KB

after that, add another geometry:

// create a line around the small geometry
let points = [
    new THREE.Vector3(1, 1, 0),
    new THREE.Vector3(1, -1, 0),
    new THREE.Vector3(-1, -1, 0),
    new THREE.Vector3(-1, 1, 0),
    new THREE.Vector3(1, 1, 0) // return back 
];
let lineGeometry = new THREE.BufferGeometry().setFromPoints(points);
let lineMaterial = new THREE.LineDashedMaterial( { color: 0xff0000,side:THREE.DoubleSide, linewidth: 2, transparent: false, opacity: 0.5} );
let line = new THREE.Line(lineGeometry, lineMaterial);
scene.add(line)

It will be like:

image
image1218×1064 2.84 KB

note that the line is not transparent, if I rotate the camera, it seems ok:
image
image919×1123 4.34 KB

Last, when I change line.transparent = true and rotate the camera, the two geometry will effect each other:
image
image1056×1044 7.45 KB

To improve performance (ie by reducing the number of objects) I use textures to simulate transparency. This practice necessarily draws the two objects to the same plane, so it is unavoidable. Is there any way to resolve this visual conflict?

2

Looks like z-fighting issue, try to move the line off the z = 0 plane:

line.position.z = 0.01;

Another option, if you want your line to be drawn unconditionally on top of everything else:

line.material.depthTest = false;
3

depthTest solved problem, another way is to change transparent of line is false.