Simple 3d planes with transparent texture and the same z coordinate create visual artifacts

[aaleksander]

Hello there,

I created simple 3d object from one plane and texture on it. When it plane alone on scene - everuthing good: transparent work correctly. But, if I create several planes with one z coordinate,it draws artifacts, as if the transparency is turned off in this place.If I uniqualize z coordinate - everything good, but it`s not good idea, I think.

class Hexagon extends Object{
private var _obj: Mesh;
private var _obj2: Mesh;

public function new(size: Float, ?parent) {
    super(parent);
    var img = Res.hex2;
    var tex = img.toTexture();
    var mat = Material.create(tex);
    mat.blendMode = Alpha;
    var prim = new Plane3D(size);
    prim.unindex();
    prim.addNormals();
    prim.addUVs();

    //face
    _obj = new Mesh(prim, mat, this);
    _obj.setPosition(0, 0, 0);
    
    //back
    _obj2 = new Mesh(prim, mat, this);
    _obj2.setPosition(0, 0, 0);
    _obj.rotate(0, 180.*Math.PI/180.0, 0);
}
}

class Plane3D extends Polygon{
    public function new(size: Float) {
        var w = size/2*(250/224);
        var h = size/2;
        var p = [
			new Point(-w, h, 0),
			new Point(w, h, 0),
			new Point(w, -h, 0),
			new Point(-w, -h, 0)];
        var idx = new hxd.IndexBuffer();
        idx.push(0); idx.push(1); idx.push(3);
        idx.push(3); idx.push(1); idx.push(2);

        super(p, idx);
    }

    override public function addUVs(){
		unindex();
		uvs = [];

        uvs.push(new UV(0, 0)); uvs.push(new UV(1, 0)); uvs.push(new UV(0, 1));		
        uvs.push(new UV(0, 1)); uvs.push(new UV(1, 0)); uvs.push(new UV(1, 1));
    }
}

[min-pascal]

I ran into a similar problem with the Alpha blendMode recently. Replacing the blendMode stuff with a simple shader fixed it for me. I think it is worth trying out!

AlphaShader

[aaleksander]

I am doing html5 game, unfortunately. So, I can’t include hlsdl library: “You cannot access the hl package while targeting js (for hl.Abstract)”

[min-pascal]

I don’t understand what you need the hlsdl library for? I just made a small test with your code using a shader instead of blendMode targeting js and it seams to do the trick. Check this link

[min-pascal]

public function new(size: Float, ?parent:Object) {
super(parent);

var img = Res.hex2;
var tex = img.toTexture();
var mat = Material.create();
mat.shadows = false;
mat.mainPass.culling = None;
var alphaShader = new AlphaShader();
alphaShader.texture = tex;
mat.mainPass.addShader(alphaShader);
var prim = new Plane3D(size);
prim.unindex();
prim.addNormals();
prim.addUVs();

//face
_obj = new Mesh(prim, mat, this);
_obj.setPosition(0, 0, 0);

//back
_obj2 = new Mesh(prim, mat, this);
_obj2.setPosition(0, 0, 0);
_obj.rotate(0, 180.*Math.PI/180.0, 0);
}

[aaleksander]

Good example, thanx. Now everything works.