Converting Exported Blender Textures to work with Three.JS

Question

I'm trying to get a blender model that I've exported to display properly, but it appears as though the texture for the leaves isn't being blended correctly as an alpha ( though the trunk itself work fine ). Here's what I'm seeing:

Notice how the leaves aren't aliased through correctly ( i.e. it should look like a tree with leaves, not with gray sheets of paper ).

In Blender the tree looks fine, but I've had a few people tell me that it looks like my alpha is inverted ( I'm not totally sure what that means ). My guess is that, with a bit of file tweaking and conversion, I could get the attached images to work fine. Here are the image resources I've got:

I don't think it's necessary, but in case you want to see the exported JSON, I've dumped it here: https://gist.github.com/funnylookinhat/5062061

I'm pretty sure that the issue is the black and white image of the oak leaves - given that it's the only difference between the two packed textures. Is there a way I can work with it or convert it so that it applies correctly to the layers of leaves?

UPDATE

I'm able to get something that looks mostly right ( minus some weird transparency layering issues ) - but I'm pretty sure that it isn't being done correctly... any help would still be much appreciated.

I added in transparency on the white/black and green images resulting in these:

Which resulted in the following:

Then I flipped the references to the two of them in the JSON - which resulted in this:

I'm 99% sure this isn't working as intended, it appears as though the Diffuse map isn't working correctly... any suggestions?

Answer 1

Three.js has no mask textures (the black and white texture), so you need to bake it into the alpha channel of the diffuse texture (so use .png format as .jpg does not support alpha - as you are currently doing).

Your update is on the right track although the diffuse alpha is poorly done (holes in leaves). This can be done right e.g. in Gimp by decomposing the diffuse color channels and then recomposing with the added mask layer as alpha (note however that white is assumed to be opaque and black transparent so inversion might be needed).

In the material, don't use the mask texture at all. There might also be problems with leaves overlapping each other which is a difficult problem to solve as transparency in general is quite the PITA. You can try disabling the material's depthWrite and/or playing with alphaTest values (e.g. setting it to 0.1) to get different kind of artifacts.