I almost forgot to post this little demo. It’s a remake of an old experiment with procedural eyes I made in flash long time ago. (Actually, the old one look kind of cooler than this, think it’s the normal-mapping that does the difference. Haven’t gotten to the point of making that in a procedural shader yet, probably have to use off-screen renderers and stuff)

This time it’s done with three.js and shaders. So basically I just started of with the sphere-geometry. The vertices near the edge of the z-axis got an inverted z-position in relation to the original radius, forming the iris as a concave parabolic disc on the sphere.

The shader is then doing it’s thing. By reading the uv-coordinate and the surface-positions I apply different patterns to different sections. I separate those sections in the shader by using a combination of step (or smoothstep) with mix. Step is almost like a if-statement, returning a factor that is 1 if inside the range, and 0 outside. Smoothstep blurs the edge for a smoother transition. You can then use that in the mix-method to choose between two colors, for example the pupille and the iris. I mentioned this method in my last post as well.

Check out the fragment shader here

To give the eye the reflective look, I added a second sphere just outside the first one with a environment-map. The reason for not using the same geometry was that I wanted the reflection on the correct surface around the iris. And by making the second sphere just slightly larger it gives the surface some kind of thickness.

To spice it up little, I added some audio-analysing realtime effects, with this little nifty library called Audiokeys.js. With that you can specify a range of frequencies to listen in to and get a sum of that level. Perfect for controlling parameters and send them to the shaders as uniforms.

Open demo

Reaction-diffusion patterns



I stumbled on a interesting pattern-generating process the other day, called reaction-diffusion. To quote wikipedia: “Reaction–diffusion systems are mathematical models which explain how the concentration of one or more substances distributed in space changes under the influence of two processes: local chemical reactions in which the substances are transformed into each other, and diffusion which causes the substances to spread out over a surface in space.”

There is a lot of different types and variations with names that makes it sound pretty advanced: Turing (which my experiment is based on), Meinhardt, Gray-Scott and Ginzburg-Landau. These patterns can be seen in nature, like dots and stripes on animal fur. There is some  java applets (or I’m sure there are flash apps as well) on the web doing this faster and more advanced than mine, but I had some ideas that I wanted to try. More of that in future posts.

Open and try the demo here. If you have enough patient, play around with the settings, otherwise check out the presets. To begin the process, hit “Start” and to start over make sure to hit “Reset” first.

Original source can be found here. If you want my haxe-version, just let me know.