Procedural eyes

Procedural graphics is surely my favorite. The concept of create visual things with just code. Really comes in handy when your a crappy designer and still want to do visual stuff. Here you can see the result of yet another experiment on this track. It’s a eye-shader for generating procedural eyes. The 3D-engine of choice is Away3d. I use a CompositeMaterial consisting a PhongMultiPassMaterial and a SphericEnvMapPBMaterial (for the environment reflections). The bitmap that is used in the material is generated by a haxe-swf that is loaded in runtime. Just as previous experiments. The same bitmap is used as a base for the spherical normalmap. That adds a nice displacement to the surface. The iris is quite simple and could have more layers and complexity to get a more realistic pattern. Anyway, the texture looks something like this.

When wrapping this on a sphere it will fit seamlessly . I know, the blood-vessels aren’t that great. Perhaps I should use lines with turbulence instead.

Design your own eye

Here is a tool where you can try the different settings and create a unique eye.
Open editor


This “mars-attacks”-demo follows the mouse. To get two eyes I duplicates the output from the view. Thats why he can’t look at his nose (if existed). Notice that he is reacting to light, sort of…

Click to open

Open demo

Comments (8)

  1. Really quite beautiful, very well done.

    I hope the rumors are right and Flash11 gets 3D acceleration. Imagine all that procedural and interactive goodness AND a 50,000 polygon model…

  2. Yeah, let’s hope they will! And quickly give us the beta. I think they have to add such features when they started the rumor themselves. Thank you for your feedback Peter, glad you liked it!

  3. Thanks! The Away3d environment-map-material is the only pixelbender-kernel around. The texture is just nested for-loops with setPixel, that’s why it’s painfully slow to update the texture, though written in Haxe to gain some speed. Read my previous post about noise, and you will get the picture. This is just a modification of that one.

  4. ditch setPixel, you should be able to speed it up using setVector. p.s. and yes, some random walker with branching would give better blood vessels.

  5. I’m aware that there is a lot of optimizing to do in all of my experiments. I have to look into that. And since I use Haxe, I probably should use fast Memory as well.

  6. Regarding setPixel/setVector and fast memory; after some testing the fastest method was to use the fast memory in Haxe, but I still don’t save that much CPU. It’s still pretty slow cause of the 3d perlin noise and normalmap-calculation. I did a little fix though, so that the white part of the eye only updates if those values are dirty, otherwise it’s only iris that is updated. Files are updated.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>