# Dynamically change base color of existing diffuse texture

**URL:** <https://forum.babylonjs.com/t/dynamically-change-base-color-of-existing-diffuse-texture/29947>\
**Category:** Questions\
**Tags:** material\
**Created:** [May 2, 2022, 6:49pm UTC](https://forum.babylonjs.com/t/dynamically-change-base-color-of-existing-diffuse-texture/29947 "2022-05-02T18:49:23Z")\
**Posts on this page:** 9\
**Page:** 2

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [May 4, 2022, 6:44pm UTC](https://forum.babylonjs.com/t/dynamically-change-base-color-of-existing-diffuse-texture/29947/21 "2022-05-04T18:44:59Z")

</div>

You are right. They are different materials. Better said one has limited inheritated options from the other.  
The PBRMaterial is the full class PBR (along with custom). The MetallicRoughness is a simpler version with less options (though some exist but are not shown, at least in the inspector). It is still PBR but much easier to handle (but then, it’s more basic).

---

<div class="post-metadata">

**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\
**Post date:** [May 4, 2022, 6:50pm UTC](https://forum.babylonjs.com/t/dynamically-change-base-color-of-existing-diffuse-texture/29947/22 "2022-05-04T18:50:41Z")

</div>

Yes the doc the I linked shows how to use that block to create your own PBR materials and has example NME’s that you could start with for example. 🙂

---

<div class="post-metadata">

**Author:** ![andresaliba](https://avatars.discourse-cdn.com/v4/letter/a/96bed5/32.png) [@andresaliba](https://forum.babylonjs.com/u/andresaliba)\
**Post date:** [May 4, 2022, 8:05pm UTC](https://forum.babylonjs.com/t/dynamically-change-base-color-of-existing-diffuse-texture/29947/23 "2022-05-04T20:05:04Z")

</div>

Thanks guys, I need to go over the NME and see if that helps with my issues. Colouring on top of the grayscale is still weird when I can’t control the percentage of each color and etc.

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [May 6, 2022, 7:43pm UTC](https://forum.babylonjs.com/t/dynamically-change-base-color-of-existing-diffuse-texture/29947/24 "2022-05-06T19:43:30Z")

</div>

I mean I posted a version to you that had the color mixing completely exposed and you could control the colors anyway you want through that. Its the direct shader code, not going to get much more control then that.

---

<div class="post-metadata">

**Author:** ![andresaliba](https://avatars.discourse-cdn.com/v4/letter/a/96bed5/32.png) [@andresaliba](https://forum.babylonjs.com/u/andresaliba)\
**Post date:** [May 9, 2022, 4:07pm UTC](https://forum.babylonjs.com/t/dynamically-change-base-color-of-existing-diffuse-texture/29947/25 "2022-05-09T16:07:56Z")

</div>

Hi! Thanks for that reply, I’m still trying to learn how it actually works, as I don’t understand some basic WebGL yet. I don’t know yet how I would come up with the AddUniform and Fragment\_Custom\_Diffuse, or the custom tintTexture method. You extended the customMaterial, is it PBR? Can I also extend a PBRMaterial? I have no experience with WebGL before this, so I was imagining a difference process.

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [May 9, 2022, 4:12pm UTC](https://forum.babylonjs.com/t/dynamically-change-base-color-of-existing-diffuse-texture/29947/26 "2022-05-09T16:12:55Z")

</div>

Yes, when I get a chance today ill whip you something up and add a few “mixing” modes for you so that way you can kind of see how its done.

Sorry if I just post stuff and don’t explain it fully, I have a million things happening at all times it seems like these days XD.

Ill give you a tintTexture, tintColor, and like additive, multiplied, screen modes and leave the rest up for you to figure out.

> **[Blend modes | Multiply](https://en.wikipedia.org/wiki/Blend_modes#Multiply)**
>
> Multiply blend mode takes the RGB channel values from 0 to 1 of each pixel in the top layer and multiples them with the values for the corresponding pixel from the bottom layer. Wherever either layer was brighter than black, the composite is darker; since each value is less than 1, their product will be less than each initial value that was greater than zero.
> where a is the base layer value and b is the top layer value.
> This mode is commutative: exchanging two layers does not change the result...

Give me by the end of today though, I’ve got a lot going on.

---

<div class="post-metadata">

**Author:** ![andresaliba](https://avatars.discourse-cdn.com/v4/letter/a/96bed5/32.png) [@andresaliba](https://forum.babylonjs.com/u/andresaliba)\
**Post date:** [May 9, 2022, 4:17pm UTC](https://forum.babylonjs.com/t/dynamically-change-base-color-of-existing-diffuse-texture/29947/27 "2022-05-09T16:17:11Z")

</div>

Thanks a lot! I do appreciate you taking your time for it. I need to get a good understanding of how it all works as I am using it in production and will be having multiple different models and textures in the future. Currently I’m reading about how WebGL and the shaders work.

No need to worry, though, if you don’t have time.

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [May 9, 2022, 11:40pm UTC](https://forum.babylonjs.com/t/dynamically-change-base-color-of-existing-diffuse-texture/29947/28 "2022-05-09T23:40:36Z")

</div>

> **[Babylon.js Playground](https://playground.babylonjs.com/#N4N58B%233)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

here is a pbr one with a hsl shift.

---

<div class="post-metadata">

**Author:** ![andresaliba](https://avatars.discourse-cdn.com/v4/letter/a/96bed5/32.png) [@andresaliba](https://forum.babylonjs.com/u/andresaliba)\
**Post date:** [May 10, 2022, 2:34pm UTC](https://forum.babylonjs.com/t/dynamically-change-base-color-of-existing-diffuse-texture/29947/29 "2022-05-10T14:34:26Z")

</div>

Thank you! It still seems all very complex to me, mostly because I’ve never wrote any shader before and have very little knowledge of webGL. Are there any documentation or course you recommend me reading to better understand how to use these custom methods? I couldn’t find any docs on PBRCustomMaterial. I’m writing it in JS because of the original code base, would the implementation change?

[Previous page](https://forum.babylonjs.com/t/dynamically-change-base-color-of-existing-diffuse-texture/29947.md?page=1)
