Vertex color+alpha+texture

[fenomas]

Hi,

 

Is it possible in BJS to combine the following in the same mesh/material? 

1.  vertex colors
   
2.  vertex alpha
   
3.  partially transparent textures [*]
   

As near as I can tell, vertex colors only display with ambient textures, but texture alpha[*] only works with diffuse textures. So you can get any two of the three, but never all of them at once.

 

Do I have this right, or is there a combination of settings that would work?

 

 

[*] note: BJS seems to have two different kinds of texture alpha - "binary" alpha where each pixel can be on or off but nothing is blended, and "full" alpha where pixels are blended. In this question I'm mainly asking about the binary kind, but either would do.

[jerome]

I think you can

 

Here's in an example from this topic : http://www.babylonjs-playground.com/#1MFDDU#7

 

There is a partially transparent texture (the tree leaf). An "extra" alpha is then applied to the texture opaque parts.

 

For the vertex color with alpha, it works also. You need to set a Color4 value for each vertex in your vertexData object.

Then set :

mesh.hasVertexAlpha = true

example here : http://www.html5gamedevs.com/topic/12909-volumetric-fog/?p=75178

 

I don't really how the diffuse texture then combines with the vertex colors.

I just know the different textures (diffuse, opacity, emissive) have each different blendings

[jahow]

There's the 3 working together: http://www.babylonjs-playground.com/#1MFDDU#9

Sadly, we have to use the ambient texture instead of the diffuse one, because color values are overriden it (source here). I'll suggest DK to change this, in case it's not a specific design choice.

 

As for transparency and the differences between alpha-test and alpha-blend, I kindly suggest you reading this article which I made lovingly:

http://doc.babylonjs.com/page.php?p=25100

[fenomas]

the different textures (diffuse, opacity, emissive) 

 

Ah, I didn't know there was such a thing as an opacity texture. Combining vertex color + vertex alpha + emissiveTexture + opacityTexture seems to do the trick, at least so far..

[jerome]

take a look at this post : http://www.html5gamedevs.com/topic/15241-multiple-textures-on-the-same-faces-of-a-mesh/?p=86658

[fenomas]

As for transparency and the differences between alpha-test and alpha-blend, I kindly suggest you reading this article which I made lovingly:

http://doc.babylonjs.com/page.php?p=25100

 

Very handy, thanks!