Jump to content

Changing the colors of an eye


Recommended Posts

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;

 

Link to post
Share on other sites
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?

Link to post
Share on other sites

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")

Link to post
Share on other sites

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

Link to post
Share on other sites

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.

redEye.png

yellowEye.png

blueEye.png

eyeTestBabylon.png

Edited by Mark Bufton
Because either me, or my spell checker, is a plank.
Link to post
Share on other sites
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.

redEye.png

yellowEye.png

blueEye.png

eyeTestBabylon.png

@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)?

Link to post
Share on other sites

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...