Texture alphamap bad quality

Questions
,
1

image

I tried a lot of stuff, but the corners wont look smooth.

( this.mask.generateMipmaps = true;
this.mask.magFilter = THREE.LinearFilter;
this.mask.minFilter = THREE.LinearMipMapLinearFilter;
this.mask.mapping = THREE.UVMapping;
this.mask.premultiplyAlpha = true;
this.mask.needsUpdate = true
)

my material:

var material = new THREE.MeshBasicMaterial({
    map: this.bg,
    alphaMap: this.mask,
    alphaTest: .5
});

Is there any way this can be improved?

2

You might want to to try to modulate the value of alphaTest a bit. 0.5 is not always an appropriate value.

3

I tried, but it didn`t really help. What are the best filters for textures in threejs ? What do you suggest? I want to get the best quality possible.
Thanks

4

Instead of using alphaTest, does it help if you make the material transparent? Meaning:

var material = new THREE.MeshBasicMaterial({
    map: this.bg,
    alphaMap: this.mask,
    transparent: true,
    depthWrite: false
});
5

No, still not better.
I found a solution doing it differently.
I used a PIXIJS-App where I loaded the background and the mask, and then added threejs
as a canvasTexture into it.
With that setup, the mask and the edges look more smooth.