Three.js – 3D a weben

A Magyarországi Webkonferencián tartottam egy előadást a WebGL-ről, three.js-ről és felhasználási lehetőségeiről. Úgy gondoltam, blogposzt formájában is összeszedem az ott elhangzottakat, remélve, hogy sikerül felkeltenem az érdeklődésed a téma iránt.

A VRML-től a WebGL-ig

Az, hogy a weboldalak komplett 3 dimenziós tartalmat tudjanak megjeleníteni, már a kilencvenes évek közepén felmerült igényként. A probléma megoldására hozták létre a VRML leíró nyelvet, amihez még külön böngészőkiegészítő kellett az IE és Netscape böngészők mellé, ráadásul eléggé korlátozottak voltak a lehetőségek. A VRML leíró nyelvet később továbbfejlesztették, majd utódjaként megjelent 2004-ben az X3D, ami a mai napig használatban van, viszont kevésbé elterjedt. Az igazi áttörést a WebGL API megjelenése hozta, ami már natív böngészőtámogatást kapott, így nem igényel külön plugin telepítést, továbbá a CPU mellett aktívan használja a GPU-t is.

Three.js

A WebGL mára minden modern böngészőben elérhető, viszont ha valaki laikusként vág bele a témába, az első nekifutás könnyen elbizonytalaníthatja a további próbálkozásoktól. Az API teljes körűen eléri az OpenGL funkciókat, viszont ez azzal is jár, hogy egy egyszerű kocka rendereléséhez is több mint 200 sornyi kódot kell írni shaderek, bufferek, mátrixok használatával. Többek között a WebGL API használatának megkönnyítése érdekében kezdték el fejleszteni 2010-ben a three.js frameworköt, ami ma már a 82. stabil kiadásánál tart és az egyik leginkább elterjedt függvénytár lett a témában.

The aim of the project is to create a lightweight 3D library with a very low level of complexity — in other words, for dummies.

A framework közel 500k-s méretével nem tekinthető elhanyagolható adatmennyiségnek, de rendkívül leegyszerűsíti a 3D-s tartalmak generálását és megjelenítését, mindezt megspékelve különböző renderelő motorokkal, így ha véletlenül nem lenne WebGL támogatás, még mindig vissza lehet nyúlni a 2D-s canvas adta lehetőségekhez és nem kell a "Your browser not supported WebGL API" hibaüzenettel beérni. Egy egyszerű kocka mindössze 30 beszédes kódsorból összeállítható, ahogy azt az alább linkelt pen szemlélteti.

### Felhasználási területek Mivel az egész technológia Canvas alapú, gyakorlatilag a weboldal bármely részébe könnyen integrálható, akár vegyítve egyéb HTML tartalmakkal. Ebből kifolyólag [sok helyen](https://onepagelove.com/tag/three-js) használják a **háttér dinamikus generálásához**. Ezek a megoldások nem túl erőforrás-igényesek, viszont annál látványosabbak és könnyen interaktívvá tehetőek, így a hatás garantált.

Kiváló megoldás továbbá a régebben használt flash alapú 3D-s termékmegjelenítők helyett, vagy a kifejezetten 3D-s modelleket bemutató oldalak számára is, mivel a three.js beépített object-loaderrel rendelkezik, így bármilyen 3D szerkesztőből (blender, 3DS MAX, Maya, Sketch Up stb.) exportált modelleket kezelni tudja. Ezt a tulajdonságát használja ki a Thingsverse vagy a Unity Asset Store.

Adatvizualizáció során is remekül hat, ha térben jelenítjük meg a prezentálni kívánt adatainkat. Ha belegondolsz, pár sornyi kóddal létrehozható egy térbeli oszlopdiagram, ami interaktív, forgatható, dinamikusan változtatható, a földgömb felhasználásáról már nem is beszélve.

Noha a keretrendszert nem kifejezetten játékok fejlesztésére szánták (hiányzik belőle a beépített fizika, ütközéskezelés stb.), mégis leginkább minijátékok megvalósítása esetén lehet belefutni a használatába. Az ilyen fun-projektek kigondolása kreativitást igényel, a fejlesztése során sokat lehet tanulni és az eredmény is szórakoztató. A low-poly megoldások kedvelőinek (jelen!) pedig külön kihívás és élmény, hogy a beépített objektumtípusokból összehozzon egy-egy valahogy kinéző mókás karaktert:) A témában remek cikkek születtek, amik jó kiindululópontok az ez iránt érdeklődőknek.

Experiments

A WebGL és three.js lehetőségei nem merülnek ki az „egyszerű” 3D-s terek renderelésében. Látványos megoldásokat találhatsz a Chrome Experiments gyűjteményben, ahol WebGL címkére keresve gyakorlatilag minden második „kísérlet” three.js libet használ. A Google hozzáállását a projekthez mi sem szemlélteti jobban, minthogy a VR példakódja is a szóban forgó keretrendszeren alapul. De a neten böngészve is számos gyűjteményre bukkanhatsz, a CodePen-t külön kiemelve.

Amiről érdemes szót ejteni

A 3D renderelés egy sima weboldalhoz képest jelentősen több erőforrást igényel, kőkemény számítások és folyamatos munka a processzoroknak. Ha nem figyelsz oda, könnyen odajuthatsz, hogy leterheled a kliens számítógépét, ami pl. Chrome esetén a kellemetlen sárga értesítőt eredményezheti.

Ez persze nem törvényszerű és kis utánajárással lehet megoldásokat találni az optimalizálási lehetőségekre.
Fontos megjegyezni, hogy nem a three.js az egyetlen WebGL API-ra épülő framework, komplett JavaScript játékmotorok léteznek a technológiát kihasználva és sokuk több lehetőséget kínál, mint a three.js. Azonban a three.js esetében van lehetőség bővítésre. Erre a célra hozták létre a THREEx projektet, ami sok-sok bővítményt tartalmaz kifejezetten a játékfejlesztéshez.

De miért is ajánlom számodra a three.js használatát?

• Már 1-2 óra alatt látványos eredményt érhetsz el,
• Beszédes metódusai miatt könnyű megtanulni és értelmezni,
• Kiválóan dokumentált, rengeteg tutorial, videó és snippet érhető el hozzá,
• Könnyű debugolni,
• A legegyszerűbb loadertől kezdve, a komplex 3D-s játék is elkészíthető vele.

Végül a prezentáció