Three.js, la tecnologia 3D web que ens ha permès fer ”Orgull de Baix”

Three.js, la tecnologia 3D web que ens ha permès fer ”Orgull de Baix”

Objectes, figures geomètriques en 3D, perspectiva de càmera o llums, són només una petita part dels elements que permet crear la tecnologia three.js. Three.js és una llibreria de JavaScript molt lleugera i eficient que permet animar gràfics en 3D al web, gràfics que els navegadors poden dibuixar, moure i animar (renderitzar) sense haver d’utilitzar cap altre aplicació. Aquesta innovadora llibreria és la que ens ha permès crear el documental web “Orgull de Baix”, una experiència immersiva que gràcies al 3D convida a explorar de manera virtual els espais agrícoles i naturals de la comarca del Baix Llobregat i reivindica el su valor estratègic fonamental per a la sostenibilitat ambiental de l’àrea metropolitana de Barcelona.

Amb three.js hem generat i animat el mapa gràfic 3D que veieu quan accediu al web del documental, i que hem construït utilitzant la valuosa informació geogràfica i d’altimetria de l’Institut Cartogràfic i Geològic de Catalunya , que permet descarregar gratuïtament dades detallades de tota Catalunya des del seu portal  icgc.cat.

Three.js és una tecnologia open source de recent creació que els desenvolupadors han començat a utilitzar fa només 5 anys, degut al fet que necessita d’ordinadors prou potents per funcionar convenientment. Actualment ja hi ha molts equips que compleixen els requeriments. A banda de les seves indiscutibles qualitats tècniques, hem desenvolupat “Orgull de Baix” amb three.js perquè l’esperit d’aquesta tecnologia coincideix 100% amb l’esperit del nostre documental web: és una eina open source, que creix i avança gràcies a les contribucions d’una comunitat de desenvolupadors, igual que “Orgull de Baix” és obert i accessible gratuïtament a tothom, i pretén comptar amb la col·laboració de la comunitat per a continuar el debat sobre el creixement i la sostenibilitat dels espais agraris al voltant de les grans zones urbanes del planeta.

Imatge del documental interactiu Orgull de Baix.
Imatge del documental interactiu Orgull de Baix.

Eines d’animació 3D adaptades al web

D’altra banda, la voluntat de three.js és traslladar les eines d’animació 3D per crear gràfics espectaculars i realistes que s’utilitzen en els videojocs, i adaptar-les a la web. En el disseny i desenvolupament d’“Orgull de Baix” ha estat sempre present la idea de construir un documental web que proporcionés una experiència d’usuari propera a la del videojoc.

Three.js genera les imatges i gràfics en 3D mitjançant OpenGL a través d’un càlcul de polígons, estructures i llums. D’aquesta manera pot determinar formes i assignar la il·luminació en el procés de renderització (quan els càlculs es dibuixen i creen allò que veiem). És una simulació realista d’estructures, ambients i del comportament d’objectes i de llums, de textures i de materials, on també hem afegit animació i interacció.

El gran avantatge tècnic del three.js és que permet que els càlculs per a construir l’animació es facin directament a l’ordinador, enlloc de al servidor, per això és molt més lleuger.

Three.js s’utilitza conjuntament amb html5, la cinquena revisió del llenguatge bàsic actual del world wide web (www) que entre altres coses permet treballar projectes web en entorn multiplataforma, com és el cas d’Orgull de Baix, que funciona en ordinador, tableta i mòbil.

Si ja heu visitat Orgull de Baix  i voleu veure altres exemples de webs construïdes amb three.js, feu-hi un cop d’ull al web Threejs.org.