For ikke lenge siden kjørte vi en artikkel om hvordan man lager en spesifikk 3D-effekt med WebGL, litt som den man av og til møter på facebook. Det viste seg at effekten ble laget med JavaScript biblioteket Pixi.js, som vi ble nysgjerrig på.
Derfor spurte vi artikkelforfatter Robert Bue om han kunne gi en grundigere forklaring.
Lær å gi et bilde 3D-effekt med WebGL
#1. Robert, hvordan ville du forklart Pixi.js til en nyutdannet utvikler? 🤔
PixiJS er et javascript-bibliotek som hjelper deg å lage visuelle godbiter og effekter på nettsider, der interaksjon og manipulering av grafikk ofte er i målet.
Som for eksempel spill.
#2. Hva er det som gjør pixi.js så spesielt og anvendelig, sammenlignet med andre grafikk-rammeverk ? 👋
PixiJS bruker WebGL som kan være veldig tidkrevende å lære seg, men du trenger ingen forhåndskunnskap om WebGL for å bruke PixiJS.
Du får et enkelt API og veldig god ytelse uten å måtte dykke ned i low-level kode, samtidig som PixiJS tar seg av nettleserstøtten.
100.000 kroner skiller frontend fra backend
#3. Hva bruker du Pixi.js mest til? 💡
Jeg bruker det mest til små morsomme ting som 3D-effekt på et ansikt og andre filter/effeker på bilder.
Og ikke minst spill i nettleseren.
#4. Har pixi.js noen begrensninger? Hva ville du ikke brukt Pixi til? 🥸
WebGL brukes som oftest til 3D i nettleseren, men PixiJS er bare et 2D-bibliotek, så du kan ikke laste inn 3D-modeller.
Du kan simulere det som i denne demoen, men til den typen bruk så ville jeg heller brukt Three.js som er et 3D-bibliotek.
Se NASA sin WebGL-simulering av Mars-landinga
#5. Hva er det kuleste du har sett noen lage med Pixi.js? 🥇
Oldie, but goodie: http://because-recollection.com – gir en del eksempler på hva som er mulig av forskjellige (tullete) interaksjoner med Pixi.js.
#6. Er det noen spesielle bruksområder Pixi.js er skikkelig gode på? 📚
Ta en titt på eksemplene de har: https://pixijs.io/examples/, filters (WebGL shaders) og Youtube-serie med tutorials.
Utviklere kontrollerer Tesla med Microsoft Hololens
#7. Hva tror du om fremtiden til Pixi.js, vil folk bruke det om 5 år, eller er det noe annet som vil ta over? ✈️
Three.js har nok størst bruk på WebGL-markedet, men for litt enklere saker som kan gjøres i 2D så ville jeg satset på PixiJS.
Biblioteket har lang levetid, videreutvikles og har mange eksempler.
