Change material diffuse tint color


I was wondering if there’s a way to change the tint color of certain map(ie. diffuse, ambient) of material using code?

Have a look at the reply here

It talks about emissive color, but diffuse will probably be the same.

There are properties on the material object to set and update properties. In this case:

material.diffuseMapTint = new pc.Color(1,0,0);

By the way, if you hover your mouse over the material property in the editor it will give you the API definition of the property:


1 Like

Does this really work for you? I’m brand new to PlayCanvas, but diffuseMapTint is a Boolean and I tried your code, but it was unsuccessful in my case. The solution for me was:


Sorry for revisiting the old post, but maybe this helps someone because I was pulling out my greys for a tid bit.


Yes @PocketHigh, you are correct (remembering that you still need to call material.update();)

Hey Will, how would you go about changing the tint color of a single object? using “this.entity.model.meshInstances[0].material.diffuse” is changing all of the instances.

Either clone the material and assign the cloned material to the mesh instance after which you can change whatever property of the cloned material you want or instead use meshInstances[0].setParameter('color_diffuse', [r, g, b]).


Hey, thanks for the help :slight_smile:

What is the most performance-friendly solution?

I suspect using setParameter is marginally faster, but I still prefer doing it with cloned materials. You may notice that pcMeshInstance#setParameter is still not public API (see API ref). I personally don’t like the function because it requires knowledge of GLSL uniform names, which themselves are not fixed or documented.


None of the above solutions seem to be working for me in chrome console … I want to set the tint color on diffuse.
Example scene:

// Apple asset which contains a diffuse texture
var apple =“apple1”)

// I first set the boolean value to true
apple.model.material.diffuseMapTint = true;

// Then tried setting the color … with no success
// First attempt
var apple =“apple1”)
// the diffuse map is set to rgb so it should not need an alpha

// Second attempt
var apple =“apple1”)
apple.model.material.diffuseMapTint = true;

Doesn’t seem to be anything in the material docs about tint either.

You’re looking at the docs for the generic base material class. You should be consulting the StandardMaterial docs:

Also, material color properties are normalized (i.e. you should be setting numbers between 0 and 1, not 0 and 255). From looking at your code, I think you’re essentially tinting with white because all components of diffuse are 1 or greater, so the tint has no effect.

I have made the project public now … my mistake.

I cannot change the diffuse properties because they are occupied by a texture. So i need to change the tint as you do in the PC GUI.

The tint settings in the GUI use rgb so that is what i was trying to do.

Any idea how to do that from chrome console?

Sorry, I’m not sure what you mean. You can set both the diffuseMap and diffuse properties of a material. And if a diffuseMap is set, diffuse is only taken into account if tint is enabled.

Sure, just query the material you want. For example, in the Chrome console, to set the material of the first mesh instance of the model of an entity called ‘Some Entity’, you’d do:

someEntity ='Some Entity');
material = someEntity.model.meshInstances[0].material;
material.diffuse.set(1, 0, 0);
1 Like

@vaios: Hello again, and (for starters) I know this is an old thread, but have a problem within this a specific detail beneath this topic (and I think it can help many others). Many of times scratch my head when I want to start a personal Google search in regards finding certain script-syntaxes, which I know you have backbone knowledge about.

In this instance I have tried to Google: “playcanvas material.setParameter”, which gives me: and beneath that

  • none that seem to help me with the list of sub-syntaxes like the one you use here:

meshInstances[0].setParameter('**color_diffuse**', [r, g, b]) .

So where to find lists of such usable parameters?

I need to do something like this

meshInstances[0].setParameter('**color_specular**', [r, g, b])
meshInstances[0].setParameter('**normal_bumpiness**', float-value)

[NB this is meta-code, off course; I don’t know the correct subsyntaxes yet … :-/ ]

Hi @Thomas_Due_Nielsen,

From what I know there isn’t any documented list of the available shader uniforms. So for the moment you will have to search for the correct uniform name in the engine source code.

Here is a list of all the shader chunks, all uniforms can be overwritten using the setParameter() method:

The material diffuse color uniform is named material_diffuse and you can overwrite like this:

// rgb values in 0.0-1.0 scale
meshInstance.setParameter('material_diffuse', [0.5, 0.0, 1.0]);

If you are using tonemapping/gamma you may want to have your color values to the power of 2.2:

        Math.pow(195 / 255, 2.2),
        Math.pow(195 / 255, 2.2),
        Math.pow(195 / 255, 2.2),
1 Like

Never mind; got it working with:

(for those who don’t know: Rollover the parameter in the editor to get the correct syntax like this


PS: As seen here, the auto-completion does not carry those parameter-syntaxes … sadly (should be looked into by backend optimzer-team :slight_smile: )


Bare in mind that you are changing the material properties which means that all meshes referencing that material will be affected too.

Thanks, yes will remember that … have to make a unique material for the object I want to ‘change’ only :slight_smile:

This topic seems very old, so there are few changes:

entities[i].render.meshInstances[0].setParameter('material_diffuse', [1, 0, 0]);

This worked for me.