Grafica pe calculator: Three.js, un API pentru grafica web 3D

Capitolul 3 și Capitolul 4 au introdus grafica 3D folosind OpenGL 1.1. Majoritatea ideilor abordate în acele capitole rămân relevante pentru grafica computerizată modernă, dar au existat multe schimbări și îmbunătățiri încă de la începuturile OpenGL. În capitolele rămase, vom folosi WebGL, o versiune modernă a OpenGL care este folosită pentru a crea conținut grafic 3D pentru pagini web.

WebGL este un limbaj de nivel scăzut – chiar mai mult decât OpenGL 1.1, deoarece un program WebGL trebuie să gestioneze multe detalii de implementare de nivel scăzut care au fost gestionate intern în versiunea originală a OpenGL. Acest lucru face WebGL mult mai flexibil, dar mai dificil de utilizat. În curând vom trece la lucrul direct cu WebGL. Cu toate acestea, înainte de a face asta, ne vom uita la un API de nivel superior pentru grafica web 3D, care este construit pe WegGL: three.js. Există mai multe motive pentru a începe la acest nivel înalt. Vă va permite să vedeți cum unele dintre lucrurile pe care le-ați învățat sunt folosite într-un pachet grafic modern. Îmi va permite să introduc câteva caracteristici noi, cum ar fi umbrele și maparea mediului. Vă va permite să lucrați cu o bibliotecă grafică pe care o puteți utiliza în aplicații web reale. Și va fi o pauză de la detaliul de nivel scăzut cu care ne-am ocupat, înainte de a trece la un nivel și mai jos.

Probabil că puteți urmări o mare parte din discuția din acest capitol fără să cunoașteți JavaScript. Cu toate acestea, dacă doriți să faceți orice programare cu three.js (sau cu WebGL), trebuie să cunoașteți JavaScript. Elementele de bază ale limbii sunt tratate în Secțiunea A.3 din Anexa A.

Three.js

Three.js este o bibliotecă JavaScript orientată pe obiecte pentru grafică 3D. Este un proiect open-source creat de Ricardo Cabello (care se numește „mr.doob”, http://mrdoob.com/), cu contribuții de la alți programatori. Pare a fi cea mai populară bibliotecă JavaScript open-source pentru aplicații web 3D. Three.js folosește concepte cu care ești deja familiarizat, cum ar fi obiecte geometrice, transformări, lumini, materiale, texturi și camere. Dar are și caracteristici suplimentare care se bazează pe puterea și flexibilitatea WebGL.

Puteți descărca three.js și puteți citi documentația de pe site-ul său web principal, http://threejs.org. Descărcarea este destul de mare, deoarece include multe exemple și fișiere de suport. În această carte, folosesc versiunea 89 a software-ului, din decembrie 2017. (Versiunea 1.1 a acestei cărți a folosit versiunea 71. Au existat o serie de modificări în API-ul de la acea lansare. Din păcate, API-ul nu a fost atât de stabil pe cât am sperat. Exemplul din această carte ar trebui să funcționeze cu versiunea 89, dar s-ar putea să nu funcționeze cu alte versiuni three.js)

Caracteristicile de bază ale three.js sunt definite într-un singur fișier JavaScript mare numit „three.js”, care poate fi găsit într-un director de compilare din descărcare. Există, de asemenea, o versiune „minimificată” mai mică, three.min.js, care conține aceleași definiții într-un format care nu este menit să fie citit de om. (De asemenea, puteți găsi copii ale acestor fișiere, din Versiunea 89 a three.js, ca parte a descărcării site-ului web a acestei cărți, în folderul threejs din folderul sursă.) Pentru a utiliza three.js pe o pagină web, trebuie să includeți unul dintre cele două scripturi într-un element <script> de pe pagină. De exemplu, presupunând că three.min.js se află în același folder cu pagina web, atunci elementul de script ar fi:

<script src="three.min.js"></script>

În plus față de acest nucleu, descărcarea three.js are un director care conține multe exemple și o varietate de fișiere de suport care sunt utilizate în exemple. Deși mă voi ține în principal de bază, voi folosi și câteva dintre extra-uri și voi nota sursa lor când o fac.

Sursa: David J. Eck, Introduction to Computer Graphics (Eck), LibreTexts, licența CC BY-NC-SA 4.0. Traducere și adaptare Nicolae Sfetcu