3D i web
Webs amb 3D que carreguen ràpid al mòbil: el que de debò importa
Com es fa un web amb 3D que no pesa ni s'arrossega al mòbil: Three.js, WebGPU, models glTF, càrrega progressiva i una versió sense 3D per a qui la necessiti. Guia per a empreses que volen impressionar sense perdre visites.
Un web amb 3D crida l'atenció. Un web amb 3D que triga deu segons a obrir-se en un mòbil de gamma mitjana, no. La majoria de les visites a una empresa local arriben des del telèfon, i qui espera de més se'n va abans de veure res. La bona notícia: el 3D al web pot ser lleuger si es decideix bé des del principi.
Què fa lent un web 3D
Gairebé sempre és una d'aquestes quatre coses:
- Models massa pesats. Un model exportat des d'un programa de disseny pot tenir milions de polígons i textures de diversos megues. El visitant no els necessita.
- Textures sense comprimir. Solen pesar més que la geometria mateixa.
- Tot es carrega d'una vegada. La pàgina no es mostra fins que ha arribat l'últim arxiu.
- El dispositiu no dona més de si. Un mòbil antic dibuixa menys fotogrames per segon que un ordinador, i una escena pensada per a l'ordinador es posa a anar a batzegades.
Com s'evita
Models en glTF. És el format estàndard del 3D al web, i admet compressió de geometria i de textures. Un model ben preparat perd pes sense perdre la forma que es veu a la pantalla.
Menys polígons on ningú no mira. Es detalla allò que el visitant veu de prop i se simplifica allò que és lluny o al darrere.
Càrrega progressiva. Primer apareix el text, el disseny i un primer quadre de l'escena; el 3D complet arriba després. El visitant pot llegir i prémer mentrestant.
Qualitat que s'adapta. L'escena tria el seu nivell de detall segons el dispositiu. Al nostre propi web hi ha tres nivells de qualitat (alt, mitjà i lleuger) i una versió sense 3D.
Una versió sense 3D. Hi ha visitants amb equips antics, amb l'estalvi de bateria activat o que simplement no volen animacions. Un bon web 3D continua funcionant per a ells: el mateix contingut, els mateixos botons, sense escena.
Three.js i WebGPU
Three.js és la biblioteca de 3D per al web més estesa i és la que fem servir. Les versions recents dibuixen amb WebGPU, la tecnologia nova dels navegadors per aprofitar la targeta gràfica, i recorren a WebGL quan WebGPU no està disponible. Per al visitant no canvia res, tret que en els equips compatibles l'escena va més fluida.
Un exemple amb números
El web d'estudio MY és una escena 3D completa amb so i animació. La seva biblioteca de 3D pesa uns 258 KB comprimida i el codi propi de la pàgina, uns 64 KB. Hem dissenyat la pàgina perquè el text i la navegació estiguin disponibles sense esperar l'escena, i la comprovem en mides de pantalla d'ordinador i de mòbil. Són les nostres xifres, del nostre web: cada projecte es mesura per separat.
Com saber si el seu web és ràpid
Google mesura l'experiència de càrrega amb tres indicadors (Core Web Vitals). El més fàcil d'entendre és l'LCP: el temps fins que apareix el contingut principal. Google considera bo un valor de 2,5 segons o menys. Pot comprovar el seu web gratuïtament a PageSpeed Insights, indicant-hi la versió mòbil.
Quan no cal 3D
Si el seu web només informa (horaris, carta, contacte), el 3D no hi aporta res i un web senzill i ràpid ven més. El 3D compensa quan el producte o l'espai s'entenen millor girant-los: un configurador de producte, un projecte de jardí o una escena que faci recordar la seva marca.
Vol 3D al seu web sense perdre visites al mòbil? Expliqui'ns què vol mostrar i li diem quin nivell de 3D té sentit. → Disseny web