Applying a "tint" to a textured mesh

[fenomas]

Can anyone recommend a good way to apply a color / tint effect to a mesh with a diffuse texture? I mean the sort of thing you'd do to, for example, make a game character green when poisoned, red when angry, etc.

 

I've tried a lot of variations of changing emissiveColor, diffuseColor, ambientColor and so forth. But it seems that they all basically multiply the lit texture color, so the possibilities are quite limited, and depend heavily on how the scene and mesh are lit.

 

Is there a better approach? 

[Temechon]

Hi, 

 

You can try to set an emissive color to the corresponding material, like this: http://www.babylonjs-playground.com/#1MFDDU#11

It works quite good actually.

[fenomas]

Yes, like I said that's what I was experimenting with. You can also do the same thing with ambient colors, but they both (I guess) are effectively like adding a lighting effect, so they only work if ambient/emissive lights are not being used at all. That is, if there's already white ambient light then emissive won't do anything, or if there is 50% gray ambient then the emissive color will be half as noticeable, etc.

 

In my case I don't think I can get away without either emissive or ambient lights on the meshes I want to color, so that's why I was wondering if people had other ways. 

[GameMonetize]

Tadamm!!

 

I've just added a new feature to StdMaterial: useEmissiveAsIllumination:

http://www.babylonjs-playground.com/#1S3OGI

[fenomas]

I've just added a new feature to StdMaterial: useEmissiveAsIllumination:

http://www.babylonjs-playground.com/#1S3OGI

 

So it looks like that makes emissive get applied as a separate light after ambient is used, is that the idea? The "glow" effect it gives isn't what I had in mind but it might work..

 

If anyone has other tricks up their sleeves let me know!

[GameMonetize]

With emissiveAsIllumination, emissive is and complete independent channel added at the end

[GameMonetize]

Can you share a picture of what you had in mind?

[fenomas]

Can you share a picture of what you had in mind?

 

Well, in photoshop terms, just the effect you'd get from overlaying an image with a layer that was 50% red, and perhaps with blend mode set to multiply.

 

It's not so much that I have the pixel math in mind, I'm more asking what the "normal" way would be to apply a tint to, say, a character in a 3D game. Using the emissive color gives a nice effect, but in my case I was already using it to light the characters so I'm not sure if I can make that work.

 

The new emissiveAsIllusion is a neat effect, but probably not what I need here. If you imagine a game entity that's standing in a shadowy area, applying a red tint that way would make them glow red, as opposed to turning red, if you follow me.

 

Perhaps what I need to be doing is storing the character's base emissive value and filtering it? I'll play with that a bit..

[Romanichel_2.0]

To do this, just multiply all your lights color by your tint color with something like this:

light.color = originColor.multiply(tint)

Do this also for ambient lights.

 

Or you can create your own shader that multiplies the output of the pixel shader by your tint color.

[fenomas]

To do this, just multiply all your lights color by your tint color with something like this:

 

That's what I've been trying, except using the mesh's values so as not to tint the entire scene.

 

 

Perhaps what I need to be doing is storing the character's base emissive value and filtering it?

 

So, this works, but only when there's only one light channel affecting the mesh. That is, you can apply a tint by multiplying a material's emissive color, but only if you black out the diffuse and ambient colors first.

 

I guess there are no other good options, but if anyone thinks of anything let me know!