Visualeyezer och FlashTerrain: terräng, vatten och himmel

Visualeyezer är en samling grafikexperiment som finns på inear.se. Serien startade 2010 med FlashTerrain, ett verktyg för webbläsaren som skapade hela landskap med terräng, träd, vatten och himmel. Serien avslutades 2012 med ett procedurellt öga i WebGL som Google tog med bland sina Chrome Experiments. Den svenska utvecklaren Einar Öberg låg bakom alltihop.

Original: Einar Öbergs egna experiment på inear.se
År: FlashTerrain från 2010, träd i three.js från 2011 samt visualEYEzer från 2012
Teknik: Flash 10 och Papervision3D följdes av three.js, WebGL och Unity3D
Status i dag: Flash-versionerna kan inte köras längre och ögat finns inte kvar online

Den här sidan förklarar experimenten och tekniken bakom dem, men redaktionen har inte skapat originalen. Beskrivningarna baseras på Einar Öbergs egna blogginlägg från perioden, arkiverade versioner i Wayback Machine samt källorna längst ned.

Vad var Visualeyezer och FlashTerrain?

FlashTerrain var ett experimentellt verktyg för att bygga landskap steg för steg. Först skapades terrängen, sedan placerades träden och vattenytan lades in, innan himmel och moln renderades. Slutresultatet kunde justeras med parametrar för ljusstyrka, kontrast, nyans och skärpa. Användaren kunde spara bilden lokalt som jpg eller ladda upp den till Flickr, antingen till ett eget konto eller till det gemensamma FlashTerrain-galleriet.

Inläggen om vatten och vegetation publicerades i mars 2010 medan inlägget om renderingen kom i april samma år, enligt adresserna i de arkiverade versionerna. Allt byggdes i Flash 10 med 3D-motorn Papervision3D. Öberg skrev själv att verktyget var experimentellt och krävde mycket minne och processorkraft. Därför fick det en förloppsindikator med statusmeddelanden så att väntan upplevdes kortare.

Efter Flash övergick serien till webbläsarens egen grafik. I februari 2011 testade Öberg en shaderteknik för fönster i Unity3D och i maj samma år återskapade han sina procedurella träd i JavaScript med three.js. Ögat visualEYEzer lanserades 2012 och listas i Chrome Experiments med september 2012 som datum. Det reagerade på musik och följde muspekaren.

Så fungerade det

Alla delar i FlashTerrain utgick från samma grundidé. I stället för att modelleras för hand räknades formerna fram med regler och brus, vilket gjorde varje landskap unikt. Arbetet kan delas in i fem steg.

TerrängenEn höjdkarta i gråskala avgjorde var marken var hög respektive låg.
TrädenRegler i en tabell styrde hur stammar, grenar och blad byggdes.
FördelningenHöjdkartan avgjorde var träden fick stå och i vilken ordning de ritades.
VattnetTerrängen klipptes vid vattennivån och försågs med en transparent yta som reflekterade omgivningen.
HimlenBakom landskapet lades färgövergångar, en sol och moln av perlinbrus.

Höjdkarta: ljust högt, mörkt lågtTerrängen byggs ur höjdkartanTräd, vatten och himmel läggs till

Förenklad illustration av arbetsflödet i FlashTerrain. Bilden är redaktionens egen tolkning och inte en skärmbild från originalkällan.

Terräng från brus

Grunden var en höjdkarta där ljusa pixlar betyder hög höjd och mörka låg höjd. Perlinbrus användes genomgående i projektet, bland annat för att skapa vågor och moln. Processen för att ta fram själva höjdkartan beskrivs inte i de bevarade inläggen, men kartan styrde både var vattnet placerades och var vegetationen växte. Den som vill fördjupa sig i brusfunktioner kan läsa om Ridged Perlin noise.

Placering av träd och vegetation

Träden byggdes av regler som låg i en tabell. Varje rad i tabellen motsvarade en nivå i trädet, från stammen upp till två nivåer av grenar. Värdet i varje cell angav hur många nya grenar som skulle växa ur ett visst led. Bladen modellerades i 3ds Max och kunde böjas med biblioteket AS3Mod av Bartek Drozdz. Öberg skrev att idén kom från Den Ivanovs experiment och att ett L-system hade varit ett bättre nästa steg.

Fördelningen började med att varje pixel i höjdkartan blev en möjlig plats. Punkter utanför ett valt höjdintervall togs bort, varefter ett antal slumpade punkter valdes ut och sorterades efter djup för att få rätt ritordning. Varje träd renderades för sig mot en vit version av terrängen. På så sätt kunde programmet klippa bort de delar som skymdes av kullar innan trädet lades in i den färdiga bilden. Eftersom varje träd hanterades som en separat bild fick det egen oskärpa efter avståndet, en liten slumpad färgton och dimma.

Vatten

Vattnet skapades genom att terrängens nät klipptes där det korsade vattennivån och ett nytt plan placerades i snittet. Ytan bestod av flera lager: ett färglager, ett lager med genomskinlighet som ökade med djupet och en spegling av terrängen ovanför där geometrin klonades med inverterade hörn. Vågorna skapades av perlinbrus som gav speglingen en lätt förskjutning. Klippningen av nätet var långsam för stora terränger, vilket gjorde att Flash Player frös en stund under processen.

Himlen

Himlen bestod av en enkel platt bild med färgövergångar där ett lager användes för himlen och ett annat för solen. Molnen var en bitmapp med perlinbrus samt en egen färgpalett där genomskinligheten definierade formen. Ett avfasningsfilter gav dem lite volym. Molnlagret lutades med perspektivet i Flash 10 så att det låg som ett tak över landskapet. En skybox hade varit mer exakt men kameran hade en fast vinkel, vilket gjorde den platta lösningen tillräcklig.

Ögat i WebGL

Ögat började som en vanlig sfär i three.js. Hörnen närmast framsidan trycktes inåt så att irisen bildade en konkav skiva. Shadern läste av texturkoordinater och position för att måla pupill, iris och ögonvita i olika zoner där step och smoothstep fungerade som gränser mellan dem. En något större sfär med miljökarta lades utanpå och gav glansen. Musiken analyserades i realtid med biblioteket Audiokeys.js och nivåerna skickades till shadern som uniforms.

Mottagandet

Serien fick sitt tydligaste erkännande genom ögat. Google tog med visualEYEzer i Chrome Experiments, samlingen av webbexperiment som visar vad webbläsaren klarar. Unity-porten av interior mapping har ändå levt längst. Alan Zucconi lyfte fram den i en genomgång av tekniken 2018 och på Unitys diskussionsforum finns fortfarande länkar till den.

FlashTerrain fick ett mer begränsat eko. Det fanns ett publikt galleri på Flickr för användarnas landskap, men antalet uppladdade bilder är okänt. Redaktionen har inte hittat några samtida pressartiklar om verktyget.

Går det att göra likadant i 2026?

Inte med originalen. Adobe slutade stödja Flash Player den 31 december 2020 och blockerar Flash-innehåll sedan den 12 januari 2021, vilket innebär att FlashTerrain inte går att köra i en modern webbläsare. Ögat låg på adressen inear.se/visualeyezer som i dag leder till den här sidan.

Teknikerna används fortfarande. Höjdkartor, procedurella träd, brusbaserad vattenanimering och shaderräknade himlar är vanliga inom spelutveckling och webbgrafik. Det som krävde lång renderingstid i Flash år 2010 kan i dag beräknas i realtid av grafikkort. Three.js erbjuder färdiga moduler för både vatten och himmel.

Om källkoden. Redaktionen har inte kunnat verifiera någon källkod för FlashTerrain eller visualEYEzer i Einar Öbergs offentliga GitHub-arkiv. Beskrivningen ovan bygger därför bara på hans blogginlägg och inte på någon granskning av koden. Informationen kontrollerades den 20 oktober 2026.

Bygg något liknande

Med three.js kan man bygga egna landskap i samma stil. Stegen nedan följer arbetsflödet från FlashTerrain.

1. Terrängen

Skapa ett plan med många segment och flytta hörnen i höjdled med en brusfunktion.

2. Vegetationen

Placera slumpmässiga punkter inom ett visst höjdintervall och rita träden med en instansierad modell.

3. Vattnet

Lägg ett plan på önskad höjd och integrera tillägget Water för att få spegling och vågor.

4. Himlen

Tillägget Sky beräknar himlavalvet med Preetham-modellen och styrs av solens position.

Tilläggen Water och Sky ingår i three.js och visas i de officiella exemplen för hav och himmel. Vill du skapa egna effekter som ögats zoner är ShaderMaterial rätt utgångspunkt. Hur fönster med falska rum hanteras beskrivs i artikeln om interior mapping i Unity. Fler exempel på shaders finns i Fireshader samt i Urban Jungle Street View.

Vad du kan lära dig av Visualeyezer

Serien visar hur långt man kan komma med regler i stället för handarbete. Ett fåtal parametrar för grenar, höjd och brus räckte för att göra varje landskap unikt.

Den visar också att fusk är tillåtet när resultatet ser rätt ut. Molnen bestod av platta bilder, speglingen i vattnet var kopierad geometri och rummen bakom fönstren i Unity fanns bara i en shader. Ögat bestod av två sfärer. Ingen av delarna var fysikaliskt korrekt, men helheten fungerade för den som tittade.

Vanliga frågor om Visualeyezer och FlashTerrain

Vem skapade Visualeyezer och FlashTerrain?

Einar Öberg, en svensk utvecklare, skapade båda projekten. FlashTerrain kom 2010 och ögat visualEYEzer två år senare, 2012.

Vilken teknik låg bakom FlashTerrain?

Verktyget byggdes i Flash 10 med 3D-motorn Papervision3D. Terräng, vågor och moln genererades genom att kombinera höjdkartor med perlinbrus.

Går det att använda FlashTerrain i dag?

Nej. Adobe slutade stödja Flash Player i slutet av 2020 och blockerar sedan januari 2021 allt Flash-innehåll.

Vad var visualEYEzer?

Det var ett procedurellt öga byggt i WebGL och three.js som reagerade på musik och följde muspekaren. Projektet fanns med i Chrome Experiments i september 2012.

Hur hänger interior mapping ihop med Visualeyezer?

Öbergs experiment med interior mapping i Unity3D från 2011 ingår i samma serie. Metoden visar rum bakom fönster utan extra geometri.

Källor

Uppgifterna kontrollerades 20 oktober 2026.