Why isn't this alphaMap working on my sprite material?

Questions
1

I’m trying to create a sprite with a texture map and alphaMap to control the transparency.

const textureLoader = new THREE.TextureLoader();
const spriteTexture = textureLoader.load(SPRITE_TEXTURE);
const opacityTexture = textureLoader.load(SPRITE_ALPHA);

const spriteMaterial = new THREE.SpriteMaterial({ 
		alphaMap: opacityTexture,
		map: spriteTexture,
		transparent: true
});

But for whatever reason, my alphaMap texture refuses to work. It’s a black and white PNG. The sprite doesn’t render at all. It’s completely invisible:

This is SPRITE_TEXTURE:

Attractor - Article
Attractor - Article1280×1280 32.4 KB

This is SPRITE_ALPHA:

Attractor - Opacity map
Attractor - Opacity map1280×1280 56.4 KB

But if I substitute SPRITE_ALPHA for a PNG that is literally one solid color (eg: #000000, or #ffffff, or #555555) then it suddenly works…

2

This is just to confirm that I get similar result – when this specific alpha map is used, it is as if the whole map is black (i.e. completely transparent). It looks like only one pixel from the corner of the alpha map is being sampled.

Until someone with more knowledge of Sprite comes up with a solution (I have never used THREE.SpriteMaterial so far), you can simulate sprites with ordinary material. Here is a demo, use the mouse to rotate the scene. The sprite is always facing the camera because of line 66:

sprite.lookAt( camera.position );

https://codepen.io/boytchev/full/oNamerw

image

3

Thanks for the workaround, it’s too bad SpriteMaterial doesn’t work!

4

I’m not sure whether SpriteMaterial does not work with alpha maps, or it is just me (and you) missing out some important setting. At least I tried for an hour, but I did not manage to make it work.

5

There is an issue at GitHub for this. Unfortunately, sprites with alpha maps broke with r151.

6

Should be fixed with r153.

4 Likes