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.

  • Urban Jungle

    Experiment

    2014 lät Einar Öberg vilken gata som helst i Google Street View växa igen. Här är experimentet, tekniken bakom det och hur du bygger något liknande.

  • Lathe

    Experiment

    2012 gick det att svarva trä, metall och sten direkt i webbläsaren. Här är Einar Öbergs experiment Lathe, tekniken bakom det och hur du bygger en egen rotationskropp i three.js.

  • Cube Slam

    Experiment

    Cube Slam var Pong i 3D där motståndarens ansikte syntes mitt i spelvärlden. Här är tekniken bakom spelet och hur du bygger något liknande själv.

  • Fireshader

    Experiment

    I september 2011 satte Einar Öberg en sfär i brand i webbläsaren med three.js och egna shaders. Här är tekniken bakom Fireshader och hur du bygger en egen eldeffekt.

  • Visualeyezer

    Experiment

    Mellan 2010 och 2012 byggde Einar Öberg procedurella landskap i Flash och ett musikstyrt öga i WebGL. Här är tekniken bakom terräng, träd, vatten och himmel.

  • Talk

    5 artiklar

  • Beanstalk

    Experiment

    Sommaren 2011 lät Einar Öberg en bönstjälk växa i oändlighet i webbläsaren, styrd av musik och mus. Här är experimentet, tekniken och hur du bygger något liknande.

  • Streetlights

    Experiment

    I december 2014 lät Einar Öberg besökarna pynta en mörk gata med ljusslingor i webbläsaren. Här är julkortet Streetlights, fysiken bakom det och hur du bygger något liknande.

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.