inear

Alla experiment

Skapa, testa och förstå3D, WebGL och spelutveckling

Skapa 3D i webbläsaren

Lär dig skapa 3D, visuella effekter och egna spel i webbläsaren. Vi går igenom klassiska experiment och visar hur tekniken fungerar.

Utforska experimenten Senaste artiklarna

8experiment och ämnen

248artiklar och guider

Skapa, testa och förstå 3D

Här samlar redaktionen klassiska webbexperiment, förklarar tekniken bakom dem och visar hur du bygger något liknande själv.

Om redaktionen

Utforska

Klassiska experiment

Projekten som gjorde webben till en scen för 3D. Varje sida berättar vem som byggde dem, hur tekniken fungerade och vad du kan lära dig av dem i dag.

Sök

Hitta rätt experiment eller guide

Sök på en teknik, ett verktyg eller ett projekt, till exempel shader, three.js eller Perlin noise.

Om inear

Målet för inear.se är att inte bara presentera färdiga effekter utan också förklara dem. Webbplatsen samlar information om 3D, visuella effekter och spel som körs direkt i webbläsaren, med tyngdpunkt på hur tekniken fungerar och hur du kan använda den i dina egna projekt.

Klassiska experiment och personerna bakom dem

I början av 2010-talet visade flera experiment vad webbläsaren klarade av med WebGL. Många av de mest uppmärksammade skapades av den svenska utvecklaren Einar Öberg, både på egen hand och under sin tid på Stockholmsbyrån North Kingdom. Hans virtuella svarv Lathe från februari 2012 återfinns fortfarande i Googles samling Experiments with Google. Där väljer du material, får arbetsstycket att rotera och formar det med musen.

Två år senare lät Öberg vilken gata som helst i Google Street View växa igen i Urban Jungle Street View. På North Kingdom arbetade han med Cube Slam, Googles videochattspel från 2013 där två spelare möttes i ett slags Pong i 3D. Redaktionen har inte byggt något av originalen. Vi beskriver experimenten, ger upphovspersonerna äran och länkar till deras egna sidor, som Einar Öbergs portfolio. Där finns också fler projekt än de som tas upp här.

Tekniken bakom

Varje genomgång förklarar i klartext hur effekten fungerade. Det kan röra sig om djupkartor, brusfunktioner såsom Perlin noise, partiklar eller shaders som beräknar eld, vatten och ljus pixel för pixel. Ofta visar det sig att en imponerande effekt bygger på några få enkla idéer. Syftet är att du ska förstå principen så väl att du kan använda den i något helt eget.

Guider i three.js, shaders och Unity

Utöver genomgångarna av äldre experiment publicerar redaktionen praktiska guider. De visar steg för steg hur du bygger scener i three.js, skriver dina första shaders och gör enkla spel i Unity som går att spela i webbläsaren.

Samtliga guider skrivs för de versioner som gäller i dag. När ett verktyg ändras eller en teknik fasas ut uppdaterar vi texten och berättar vad som har ersatt den.

Egna verktyg längre fram

Planen är att sajten med tiden också ska få egna små verktyg att experimentera med direkt på sidan. Fram till dess är experimenten och guiderna den bästa vägen in. Börja gärna med Urban Jungle eller Lathe om du vill se hur mycket som går att åstadkomma med lite kod och en bra idé. Båda exemplen visar hur långt man kan komma med WebGL, några shaders och mycket nyfikenhet.