Det här är en nyinspelning av ett gammalt experiment med procedurögon som gjorts för länge sedan.
Den här gången är det gjort med three.js och shaders. Så i princip börjar det med sfärgeometrin. Topparna nära kanten av z-axeln har en inverterad z-position i förhållande till den ursprungliga radien, och bildade iris som en konkav parabolsk skiva på sfären.
Shadern gör då sin grej. Genom att läsa av uv-koordinaten och ytpositionerna appliceras det olika mönster på olika sektioner. De sektionerna separeras i shadern genom att använda en kombination av steg (eller smoothstep) med mix. Stegen är nästan som en if-sats, som returnerar en faktor som är 1 om inom intervallet och 0 utanför. Smoothstep suddar ut kanten för en mjukare övergång. Du kan sedan använda det i mixmetoden för att välja mellan två färger, till exempel pupillen och iris.
Kolla in fragmentskuggningen
För att ge ögat den reflekterande looken läggs det till en andra sfär precis utanför den första med en miljökarta. Anledningen till att inte använda samma geometri var att man vill ha reflektionen på rätt yta runt iris. Och genom att göra den andra sfären bara något större så ger det ytan någon form av tjocklek.
För att piffa upp det lite, läggs det till några ljudanalyseffekter i realtid, med detta lilla fiffiga bibliotek som heter Audiokeys.js. Med det kan du specificera ett intervall av frekvenser att lyssna på och få en summa av den nivån. Perfekt för att kontrollera parametrar och skicka dem till shaders som uniformer.