Color + texture

[Gugis]

Hi.

I want to apply diffuse texture and color for mesh. Texture have transparent areas, so i want to use diffuse color in that areas on a mesh, elsewhere - apply texture. What is the best/easiest way to do it?

Thanks

[GameMonetize]

I'm afraid you should have to wrote your own shader for that. The standardMaterial does not have this behavior

some useful posts abotu shaders:

http://blogs.msdn.com/b/eternalcoding/archive/2014/04/17/learning-shaders-create-your-own-shaders-with-babylon-js.aspx

http://blogs.msdn.com/b/eternalcoding/archive/2013/08/06/babylon-js-creating-a-convincing-world-for-your-game-with-custom-shaders-height-maps-and-skyboxes.aspx

[Gugis]

I'm afraid you should have to wrote your own shader for that. The standardMaterial does not have this behavior

some useful posts abotu shaders:

http://blogs.msdn.com/b/eternalcoding/archive/2014/04/17/learning-shaders-create-your-own-shaders-with-babylon-js.aspx

http://blogs.msdn.com/b/eternalcoding/archive/2013/08/06/babylon-js-creating-a-convincing-world-for-your-game-with-custom-shaders-height-maps-and-skyboxes.aspx

Oh... well... I was most afraid of that. 

[GameMonetize]

The other idea is to copy/paste standardMaterial to a standardMaterial2 and just slightly change the shader

[Gugis]

Nailed it.

 

Materials/babylon.standardMaterial.js

Line 296:

this._baseColor.copyFromFloats(1, 1, 1);

Change to:

this._baseColor = this.diffuseColor;

Shaders/default.fragment.fx

Line 416:

baseColor = texture2D(diffuseSampler, vDiffuseUV);

Change to:

baseColor = (vDiffuseColor * (1.0 - texture2D(diffuseSampler, vDiffuseUV).a)) + (texture2D(diffuseSampler, vDiffuseUV) * texture2D(diffuseSampler, vDiffuseUV).a);

Also you can add new property to control material's behaviour. Let's call it mixed

 

Materials/babylon.standardMaterial.js

After line 25:

this.emissiveColor = new BABYLON.Color3(0, 0, 0);

Add new line:

this.mixed = false;

After block (lines) 66 - 72:

if (this.diffuseTexture && BABYLON.ExtendedMaterial.DiffuseTextureEnabled) {    if (!this.diffuseTexture.isReady()) {        return false;    } else {        defines.push("#define DIFFUSE");    }}

Add new block:

if(this.mixed){    defines.push("#define MIXED");}

Now line 301:

this._baseColor = this.diffuseColor;

Change to this:

if(this.mixed)    this._baseColor = this.diffuseColor;else    this._baseColor.copyFromFloats(1, 1, 1);

Lastly after line 529:

newExtendedMaterial.specularPower = this.specularPower;

Add new line:

newExtendedMaterial.mixed = this.mixed;

Shaders/default.fragment.fx

In fragment shader file change line 416 to:

#ifdef MIXED	baseColor = (vDiffuseColor * (1.0 - texture2D(diffuseSampler, vDiffuseUV).a)) + (texture2D(diffuseSampler, vDiffuseUV) * texture2D(diffuseSampler, vDiffuseUV).a);#else	baseColor = texture2D(diffuseSampler, vDiffuseUV);#endif 

Now you can use both color and texture:

var material = new BABYLON.StandardMaterial("male", game.scene);material.diffuseTexture = new BABYLON.Texture("/game/textures/male.png", game.scene);material.diffuseColor = new BABYLON.Color3(0.88,0.72,0.6);material.mixed = true; // false if you want to have old behaviour