Shader Graph Conversion : Eyeball Shader

Hi All,

Earlier this week I've updated the code Eyeball Shader to also allow for pupil textures and glint textures, check it out if you're looking for code !

This Graph is a bit complicated so I've taken out a few customisation sliders from the example pics to make it a bit clearer, the full graph attached still has the customisation :)

Graphs Attached!

Let's get started!

Find Point on Sphere

Create a new PBR Graph

First we need to find a point on the sphere to start drawing the Iris. Add a Position node set to Object. We need the point to be on the edge, so Split the Position, then Subtract 0.5 off the Z value to bring the point to the edge of the Sphere.

Turn the Position value into a 0-1 value using the Distance node. Then Divide by a new Property Vector1 (Iris Radius).

Invert and Multiply

Invert the value with a One Minus node, then Multiply by a big value (for example 50) to make the circle sharper, then Saturate the value to clamp it back to 0-1 again.

Colored Iris

Add a Lerp with 2 new Color Properties (Outer & Inner Iris Color). Use the soft Iris circle as T input so the colors are nicely spread over the iris.
Then Multiply the result with the inverted Circle.


Iris Texture

Add a texture to the iris with a bit of distortion.

Create a new Texture2D Property (Iris Texture), add a Sample Texture 2D node, multiply with a new Vector1 (Iris Texture Distortion) to control the distortion.

Use this as the Y value for the uv of the "normal" Iris Texture. 

Add a new Vector1 (Iris Texture Scale) into the Tiling to control the scale.

Iris Texture Color and Brightness

Multiply the texture result with a new Color (Iris Texture Tint), and Multiply again with a new Vector1 (Iris Texture Brightness). Add it together with the Iris Color Lerp, before it multiplies with the Inverted Iris result.

Iris Edge

For the edge, take the Iris Distance node result, and Divide it by the Iris Radius + new Vector1(Iris Edge Width). Invert with One Minus, Multiply by a high number, and Saturate just like for the Iris.

Subtract the Iris Circle result so we only have an edge left over. and Multiply with a new Color (Iris Edge Color)

Eye White

Now that we have the edge value, simply Invert it, Multiply with a new Color(Eyeball Color), and add it to the other results

Pupil 

For the pupil, just like the Iris , take the Distance and Divide by a new Vector1(Pupil Radius), Invert and Multiply and Saturate again. Then Subtract the Pupil from the Iris and multiply the colored/texture iris result with the subtracted iris to exclude the pupil.

Pupil Color

Add some color to the pupil

Lerp 2 new Color(Pupil Color Inner & Outer), then Multiply by the smooth pupil circle result.

Pupil Texture

To create a usuable UV on the right spot, we need the Position node again, Split it, and only use the X and Y values. 

Divide it by a Vector1(Pupil Texture Scale), and Add 0.5 to offset it back into center.
Add a new Texture2D(Pupil Texture) , and because we don't want the texture to repeat, add a Sampler State set to Clamp.

Multiply the result with the colored Pupil.

Glint Highlight Texture

Glint texture is the same as the pupil, only this time the end result is multiplied by the Iris Circle, to contain it.

Add a new Texture2D(Glint Texture), and Vector1(Glint Scale).

Optional Parallax


 Parallax SubGraph 

In code, there is a built-in Parallax Offset function:

The Subgraph is the node-version of this.

If you want some depth inside the eye, add the Parallax Subgraph , and add this to before the Iris Texture Sampler 2D.

Add in a new Texture for the HeightTex value, and set the Parallax strength to above 0, and you get a cool depth effect.

You can also add it to the offset of the Glint Texture.

I think I'll talk more about Parallax in Shader Graph in a later post, cause it's pretty fun to play with :)

Some Textures

Attached:

 -Eyeball Shader Graph

- Parallax SubGraph

- Eyeball with Parallax Shader Graph

That's it, thanks for reading and have fun!

Become a patron to

108
Unlock 108 exclusive posts
Be part of the community
Connect via private message