Nettverket ses ofte som et bestemt todimensjonalt medium. Og for å være rettferdig, er det. Det var det det var laget for.

I tillegg har tilsetningen av tredimensjonal grafikk, gjengitt levende, tradisjonelt kreves plugins. Macromedia ga oss Shockwave, Unity ga oss Unity Web Player, og hele tiden har vi brukt 3D-grafikk for spill, for det meste.

HTML5, CSS3 og noen oppfinnsomme JavaScript har imidlertid gjort mye for å endre dette. Åh, det er fortsatt mest brukt til spill, men du kan ta det videre, og integrere grafikken til et vanlig nettsted lettere enn noensinne.

Jo, vi har fortsatt brukervennlighet. Et nettsted som er avhengig av 3D-grafikk for navigering eller viktig innhold, er fortsatt en forferdelig ide. Men når det brukes med progressiv forbedring, er 3D en levedyktig, og til og med ytelsesvennlig måte å ta ting opp i hakk.

Til det formål presenterer jeg voxel.css .

voxel.css er et rammeverk som bruker CSS3 til å gjøre den tunge løftingen av gjengivelse av 3D-objekter. JavaScript brukes til å legge til interaktivitet, utløse animasjonene og stort sett alt annet.

Stil

Vel, dette er CSS vi snakker om. Du kommer ikke til å få Crysis-nivå grafikk. Som navnet på dette rammeverket antyder, det du får er mange kuber. Tenk Minecraft i nettleseren. (Og noen vil bygge en Minecraft klon med dette i tre ... to ...)

Likevel kan du gjøre noen imponerende ting med blokkert grafikk. Tenk på det som å ta 8-bit kunst til et helt nytt nivå.

Enkel 3D-rendering

Den grunnleggende implementeringen av voxel.css krever bare inkludering av biblioteket og 15 kodelinjer. Dette skaper en savbar virtuell scene hvor du kan redigere modellene dine, punkt-og-klikk-stil.

Du kan da vise disse scenene til en hvilken som helst nettside, og animere dem som ønsket.

Bruk en hvilken som helst bildetype for teksturer

Bruk en PNG for gjennomsiktighet, en GIF for animasjon eller en SVG-fil for ubegrenset skalerbarhet. Bruk en JPG av ukjente grunner, eller WebP-formatet fordi du liker ting som ikke er implementert i alle nettlesere ennå.

Det er enda en demonstrasjon som bruker liveopptak fra webkameraet ditt som teksturer for blokkene.

GPU akselerasjon

Igjen, det er CSS3. Du kan bruke den overlegne gjengivelsen til en enhetens grafikkort (eller en brikke, som det er tilfelle) for å vise arbeidet ditt. Du trenger ikke å bekymre deg for hakkete grafikk på noe annet enn det tregeste av mobile enheter. (Du bør bruke en tilbakebetaling for dem i alle fall.)

Konklusjon

voxel.css er en enkel, no-nonsense måte å få noen tredimensjonal godhet inn i din web app, side, side eller spill. Prøv det, se på demoene, og se om det passer for prosjektet ditt.