Replacing a specific color on a texture

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.


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

3 Likes

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

3 Likes

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

4 Likes

I’d go with a material plugin:

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.

5 Likes

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 :slight_smile:

2 Likes

@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.

4 Likes

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

2 Likes

Hello! I have a question. The thing is that all my textures are .png and have a transparent background. If I use nodes like in your NME example, my background will not be transparent. Of course, you can do it like this:

Texture.rgba.connectTo(FragmentOutput.rgba);

But then the color replacement won’t work. How to achieve a transparent background? :smiling_face_with_tear:

@Alex_Ismailov, you can certainly make use of the alpha channels in your textures while using NME. There are a couple of ways you can use your alpha channel with the simplest being passing the alpha channel of your texture directly to the alpha input of the Fragment Output block.

In this example, I am passing the alpha transparency of the logo to the fragment out while passing the RGB of the camo texture. This creates a transparent plane shown in the preview window with white being my clear color.

The other way you can use it is as a lerp between different inputs.

In this case, you are using the alpha channel from the texture to blend the transparent texture with another texture. You can pass the RGB of the transparent texture to mix with the secondary texture, or you can pass an entirely different RGB source, as I have in the example, to mix with the secondary texture.

You can also mix alpha channels from different textures together through operations like multiply or max to create blended alpha channels and use them in lerps or pass them directly to the alpha input on the fragment output. The options are limitless.

2 Likes