Changing the colors of an eye

[freetoplay]

I have a character model that has the following texture for an eye:

 

I want to change the color of this texture through code if possible. What would be the best approach for this? I tried changing the albedo color, but that only changes the whites of the eyes.

[V!nc3r]

Few quick solutions:

• have a material only for the iris, with a color-neutral texture (and keep your code which change the albedo)
• create a set of textures and just swap the texture itself
• overkilled solution, but you can also use libraries to manipulate images (example)

[Nodragem]

As your eyes texture contains only one color, I think the simplest is to:

1) use a grayscale version of that texture,

2) use material.diffuseColor to control the color

Your code would look like that:

let material = new BABYLON.StandardMaterial("eyes_material", scene);
material.diffuseTexture = new BABYLON.Texture("assets/2D/grayscale_eyes_texture.jpg", scene);
material.diffuseColor = new BABYLON.Color3(1, 0, 0); // change color to red
MyEyesMesh.material = material;

 

[freetoplay]

On 10/5/2018 at 6:53 AM, Nodragem said:

As your eyes texture contains only one color, I think the simplest is to:

1) use a grayscale version of that texture,

2) use material.diffuseColor to control the color

Your code would look like that:

let material = new BABYLON.StandardMaterial("eyes_material", scene);
material.diffuseTexture = new BABYLON.Texture("assets/2D/grayscale_eyes_texture.jpg", scene);
material.diffuseColor = new BABYLON.Color3(1, 0, 0); // change color to red
MyEyesMesh.material = material;

 

I want to give this a try, but when the model gets exported, all the materials turn into PBRMaterial, is there a way to keep Standard Material while exporting as glTF?

[Nodragem]

I think you can use the PBR material. I am going to do a very wild guess, but maybe this would work:

material.albedoTexture = new BABYLON.Texture("assets/2D/grayscale_eyes_texture.jpg", scene);
material.albedoColor = new BABYLON.Color3(1, 0, 0);

(Basically, replace "diffuse" with "albedo")

[freetoplay]

Unfortunately, it doesn't work because it changes the whites of the eyes rather than the iris itself.

[Mark Bufton]

Just a thought, would it be helpful to use greyscale for the iris itself and change the diffuse/albedo as suggested above, then apply standard decals to the eyes for the whites/reflections and the pupil.

[freetoplay]

So my main problem is that albedo color changes the actual whites of the eyes (not the iris itself).

Here is a screenshot before applying the color:

After:

[Mark Bufton]

I see what you mean. If I remember correctly (and I may be mistaken) you can change the color of a decal texture. I'll do some playing now and see if I can help.

UPDATE: OK, that doesn't seem to work so that's that idea out of the question.

I must confess, I'd be tempted to use something like sprites. A single image with multiple eyes and use code to pick and mix which ones to use.

Does your material include the whites of the eyes or are these transparent on your images? Another option I can think of is to make all the white areas transparent on the texture image and that should make it possible to change the colour of the material without colouring in the rest of the eye (I think...it's been a while since I tried it).

[Mark Bufton]

OK, been doing some playing tonight as "the wife" let me have the night off haha.

I copied your image into GIMP (basically like photoshop, but without the hole in my wallet).  I made the highlights transparent (could have done this with the pupil too if I fancied more coding), increased contrast etc and used it on an iris only mesh.  This means you can change the colour of the iris without affecting the colour of the white areas.  I'll include the edited eyeball image though you need to be aware I didn't exactly spend a lot of time on it, so it's rough around the edges, but it works for a demo.

I'll include a few screenshots also.

Here is the code I used in the scene:

var eye = BABYLON.Mesh.CreatePlane("eye",7,scene);
var iris = BABYLON.Mesh.CreatePlane("iris",5,scene);
  iris.parent = eye;
  iris.position.z -= 0.01;

var irisMat = new BABYLON.StandardMaterial("irisMat",scene);
  irisMat.diffuseTexture = new BABYLON.Texture("eyeTestBabylon.png",scene);
  irisMat.diffuseTexture.hasAlpha = true;
  iris.material = irisMat;

var eyeMat = new BABYLON.StandardMaterial("irisMat",scene);
  eyeMat.diffuseColor = new BABYLON.Color3(1,1,1);

irisMat.diffuseColor = new BABYLON.Color3(1,1,0);

I probably went overboard on the contrast but, as I said, it works as a demonstration.

Hope this might help.

Edited October 10, 2018 by Mark Bufton
Because either me, or my spell checker, is a plank.

[freetoplay]

1 hour ago, Mark Bufton said:

OK, been doing some playing tonight as "the wife" let me have the night off haha.

I copied your image into GIMP (basically like photoshop, but without the hole in my wallet).  I made the highlights transparent (could have done this with the pupil too if I fancied more coding), increased contrast etc and used it on an isis only mesh.  This means you can change the colour of the iris without affecting the colour of the white areas.  I'll include the edited eyeball image though you need to be aware I didn't exactly spend a lot of time on it, so it's rough around the edges, but it works for a demo.

I'll include a few screenshots also as well.

Here is the code I used in the scene:

var eye = BABYLON.Mesh.CreatePlane("eye",7,scene);
var iris = BABYLON.Mesh.CreatePlane("iris",5,scene);
  iris.parent = eye;
  iris.position.z -= 0.01;

var irisMat = new BABYLON.StandardMaterial("irisMat",scene);
  irisMat.diffuseTexture = new BABYLON.Texture("eyeTestBabylon.png",scene);
  irisMat.diffuseTexture.hasAlpha = true;
  iris.material = irisMat;

var eyeMat = new BABYLON.StandardMaterial("irisMat",scene);
  eyeMat.diffuseColor = new BABYLON.Color3(1,1,1);

irisMat.diffuseColor = new BABYLON.Color3(1,1,0);

I probably went overboard on the contrast but, as I said, it works as a demonstration.

Hope this might help.

@Mark Bufton thanks a lot for the help! I have some questions to see if I can understand this properly. It appears that you created a mesh for just the eyes (the whites of the eyes), then created a mesh for the iris with the alpha value set to true? Also, since this seems to require adding an extra mesh and texture, is it worth it vs just swapping out texture (this is for a game that allows users to customize their character's eye colors)?

[Mark Bufton]

You're absolutely welcome.  I've been determined to help someone at least ?  It depends largely on the size of the game files, number of meshes, vertices etc.  You'd probably find that this method will work with very little, if any, impact on the game's performance, fps rate etc compared to swapping out the textures.

You are quite correct.  I created two meshes, rather than the one; the eyeball and the iris (for which I set the alpha to true).  This means that the transparent parts of the material image become transparent on the mesh.  The white eyeball then doubles as the highlights and means that the iris texture can be changed without any effect on the eyeball and highlights.  I set the iris' parent to the eye so that moving the eye will also move the iris without having to move them individually.

This enables you to change the colour of the eyes by code and allows for possibly a higher level of customisation - potentially allowing hundreds of color3 combinations - perhaps if you wanted to introduce RGB colour sliders or the like at the character customisation stage.  Another alternative to this is to create an image containing multiple eyes and use sprites to select the correct eye colour (there are good tutorials in the Babylon.js documentation - simply Google search Babylon js sprites and it will pop up - probably better than any babble I can type here).  This is, of course, limited to what colours you choose to provide but would mean you only need the one mesh and you won't need to have any transparency on the image, as I have - basically just use it as you do now.

Which brings me onto the third option - just to do what you are doing now. Create other images based on your current one (red, green, purple....any colours you like) and assign each to a new texture.  Then you could use a function, or even manually assign the textures, just as you have been doing so far.

Needless to say, there are a few perfectly valid options to choose from, some perhaps moreso than others, and the choice is entirely yours as to which you use.  I must say that your character is looking pretty darn good so far.

The best thing I can recommend is to experiment with different techniques and to see what works best for you.  Also it's good to remember that nothing has to be absolutely perfect - that's part of the fun of learning this stuff (well, I think so anyway).  Even if you decide you don't like it, it can always be changed.  There aren't really any right or wrong answers for the most part (unless, as I have done, you try to move a mesh using a Color3, that appears to be very wrong).  A keen eye will also notice that in my code sample, I named both my eyeMat and irisMat materials "irisMat" - guess that proves a point.  You can get away with a lot haha