Change color of a texture with more than one color

[shamnas77]

I have a texture with half red and half blue colors. I would like to show two color selector boxes on the top and let users choose the color for the texture. If the user choose green in the first box the blue color must change to green and the same goes for red color too.

I really dont have the idea to do this. Could someone help me in accomplishing this. 

Edited June 13, 2018 by shamnas77
Images got repeated

[V!nc3r]

First, you should work with a non-artifacted -jpg-compression texture

Then, in my opinion, the simpliest thing will be to separate your object with two different materials, and play with theirs colors.

Other foods for thought:

• I'm not sure if colorCurves could help here.
• you can force the user to choose between some already existing textures
• if you feel OK to generate on the fly an image, you can also try to make custom LUT each time the user want to switch colors

[Wingnut]

Hi shamnas77, welcome to the forum.  Hello V!nc3r, too.  THIS post... is about V!nc3r's comment "if you feel OK to generate on the fly an image"

s77, is your red/blue texture... created for mapping onto a model?  Is that why your diagonal line... is bumpy and not a straight line?  Is this texture specially painted FOR a model?

You CAN use JS to "paint" your own "dynamic texture".  It might look similar-to this... when complete:

https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Anarchist_flag.svg/640px-Anarchist_flag.svg.png

(pretend the black area... is blue).

The important thing... is that you can draw/create that texture... within a BJS scene... with javascript.  You would not LOAD the texture.  You would paint it.  Would THAT be useful?  Likely, you could not re-create that same bumpy line, with JS math.  But, a perfect diagonal line would be possible, and so would a red-on-the-right, blue-on-the-left pattern... no problem.  Red on top and blue on bottom, even easier... with a math-drawn texture.

Let's do some math texture-painting.  Let's tour a playground demo that has much to be learned:

https://www.babylonjs-playground.com/#T6PCA#10

I didn't draw a diagonal red/blue texture, but I initially paint a dynamic texture with random numbers/colors.  It would take a little math knowledge... to fill the texture with a diagonal red/blue color pattern, but it CAN be done.

In lines 25-46, I create a BJS dynamicTexture, and fill it with random color values.  Initial colors... a quick paint job.

Now let's look at the paintIt() function... lines 49-82.  It is also an image painter, with conditionals.

See line 63?  It is checking for any pixel with a RED value > 200.  When found, I make the pixel green.

See line 69?  It is checking for any pixel with a RED value < 20.  When found, I make the pixel blue.

In lines 85-87, I wait for 10 seconds, and then call paintIt(), and you can see the colors change.  Since I was the one who dynamically painted the initial colors, I can change them, without security concerns.

---------

As far as I can tell, you cannot load-in a texture to plane.material.diffuseTexture... and then query/test ITS colors... to see which are red and which are blue (like your texture).

It seems... when a texture is loaded from the web... conText.getImageData(0,0, size.width, size.height).data - returns ALL ZEROES.  (security concern in browsers, I suspect)

Let's test that theory.  https://www.babylonjs-playground.com/#T6PCA#11

In this playground, line 26 - I load-in our diagonal web-gotten texture.

Ten seconds later... the entire texture paints blue.  This is expected.  Line 71 (formerly line 69) of paintIt() is ALWAYS testing true... for ALL pixels.  There are no red pixels in the buffer, it is all zeroes.

SO, if YOU paint the red/blue diagonal texture with math, we could easily find the red pixels/blue pixels at ANY time, and could easily change them to other colors.

But if you LOAD a texture, and try to test/modify ITS colors... that seems to not work so well. 

I am no pro, and perhaps I have made mistakes, but I thought I should introduce you to BabylonJS dynamic textures, and let you determine if anything is useful, there.  Be well, party on.