Replacing a specific color on a texture

[Alex_Ismailov]

Is it possible to somehow change the color element on the texture?
For example, replace the blue color with gray?

I have two sides in the game - enemy and peaceful. For optimization, I would like to have one picture instead of two.

[labris]

It may depend on how your models are done.
Sometimes it is enough just to change texture’s albedoColor.
If you want to replace colors directly in texture image, you may use traditional ways with extra canvas like Edit fiddle - JSFiddle - Code Playground
Or use ImageFilter like here Babylon.js docs

[HiGreg]

If you have control of the texture, you may be able to mix opacity.

[Tricotou]

@Alex_Ismailov

For optimization, I would like to have one picture instead of two.

What you can do is using one texture and different materials, playing with material.diffuseColor

Babylon.js Playground

[roland]

I’d go with a material plugin:

Babylon.js Playground

Use targetColor and tolerance to select the target colors. Set tolerance to 0 if you want to replace only one exact color.
newColor - obvious

You might want to intercept and change the color at a different location in the shader.

Works with WebGL/WebGPU.

[inteja]

I’d try using an ID map (use texture channels RGB to target different areas for recolourisation) in combination with instance colour and a custom shader, node material or material plugin similar to @roland’s suggestion above.

I don’t know of an ID map example in the Babylon.js context - the closest I’ve seen is the mix map in the terrain material.

I reckon @PatrickRyan would have some really interesting input on this topic

[PatrickRyan]

@Alex_Ismailov, I would probably go with what @inteja suggested with a node material. This way you can pass one texture and have multiple different camo patterns and colors. You can achieve this by not using a color albedo texture but instead passing a channel-packed texture that has four different camo masks in it. For example, I have set up this texture:

I have four different camo patterns I’ve created and I am using two of them to mix three colors for two different variations of camo. You can see a blue variant and a grey variant. However, what I export isn’t the blue and grey variants, I export a single texture that puts one mask in each of the RGBA channels of a texture. This way I have each mask and can create whatever pattern I want with whatever colors in the shader. Using one texture for four masks lets us mix three colors per variation with no overlap. However, you can also mix the channels in different combinations for even more variations:

• pattern 1 = R + G and pattern 2 = B + A
• pattern 1 = R + B and pattern 2 = G + A
• pattern 1 = R + A and pattern 2 = G + B

This gives you six distinct camo patterns for three-color camo from a single texture. From there, you can use this texture in a node material and set the colors of the camo programmatically.

In this NME example, I placed both patterns in one shader with a lerp to allow you to see both options in the same shader, but you can simplify it to be just one pattern per shader if you like and then just pass the color3 values to the shader for the camo color. This would also allow the user to customize their camo color in an easy way if you wanted to go that far.

I hope this helps, but please feel free to ping with questions.

[Alex_Ismailov]

Thank you all very much!
I will try everything and will definitely show you what happens and choose the best option!