Three.js în grafica 3D. scena, randare, camera

Three.js funcționează cu elementul HTML <canvas>, același lucru pe care l-am folosit pentru grafica 2D în Secțiunea 2.6. În multe browsere web, pe lângă API-ul său de grafică 2D, o pânză acceptă și desenarea în 3D folosind WebGL, ceea ce este cât se poate de diferit de API-ul 2D. WebGL nu este disponibil în unele browsere care acceptă <canvas>. De exemplu, acest lucru este valabil în Internet Explorer 9 și 10. Dar WebGL este implementat în Internet Explorer 11, precum și în versiunile recente de Chrome, Safari, Firefox și Edge. Funcționează și în browsere pe multe dispozitive mobile.

Three.js este o API pentru grafice de scenă orientată pe obiecte. (Consultați Subsecțiunea 2.4.2.) Procedura de bază este de a construi un grafic de scenă din obiecte three.js și apoi de a randa o imagine a scenei pe care o reprezintă. Animația poate fi implementată prin modificarea proprietăților graficului de scenă între cadre.

Biblioteca three.js este alcătuită dintr-un număr mare de clase. Trei dintre cele mai elementare sunt THREE.Scene, THREE.Camera și THREE.WebGLRenderer. Un program three.js va avea nevoie de cel puțin un obiect de fiecare tip. Aceste obiecte sunt adesea stocate în variabile globale

var scene, renderer, camera;

Rețineți că aproape toate clasele și constantele three.js pe care le vom folosi sunt proprietăți ale unui obiect numit THREE, iar numele lor încep cu „THREE.”. Uneori mă voi referi la clase fără a utiliza acest prefix și nu este de obicei utilizat în documentația three.js, dar prefixul trebuie întotdeauna inclus în codul programului real.

Un obiect Scene este un suport pentru toate obiectele care alcătuiesc o lume 3D, inclusiv lumini, obiecte grafice și, eventual, camere. Acționează ca un nod rădăcină pentru graficul scenei. Camera este un tip special de obiect care reprezintă un punct de vedere din care se poate realiza o imagine a unei lumi 3D. Reprezintă o combinație între o transformare de vizualizare și o proiecție. WebGLRenderer este un obiect care poate crea o imagine dintr-un grafic al scenei.

Scena este cel mai simplu dintre cele trei obiecte. O scenă poate fi creată ca un obiect de tip THREE.Scene folosind un constructor fără parametri:

scene = new THREE.Scene();

Funcția scene.add(item) poate fi utilizată pentru a adăuga camere, lumini și obiecte grafice la scenă. Probabil este singura funcție de scenă pe care va trebui să o apelați. Funcția scene.remove(item), care elimină un element din scenă, este, de asemenea, ocazional utilă.

Există două tipuri de camere, una care folosește proiecția ortografică și una care folosește proiecția perspectivală. Acestea sunt reprezentate de clasele THREE.OrthographicCamera și THREE.PerspectiveCamera, care sunt subclase ale THREE.Camera. Constructorii specifică proiecția, folosind parametri familiari din OpenGL (vezi Subsecțiunea 3.3.3):

camera = new THREE.OrthographicCamera( left, right, top, bottom, near, far );

sau

camera = new THREE.PerspectiveCamera(fieldOfViewAngle, aspect, near, far);

Parametrii pentru camera ortografică specifică limitele x, y și z ale volumului vizual, în coordonate oculare – adică, într-un sistem de coordonate în care camera este la (0,0,0) privind în direcția axei z negative, cu axa y îndreptată în sus în vizualizare. Parametrii near și far dau limitele z în termeni de distanță față de cameră. Pentru o proiecție ortografică, near poate fi negativ, plasând planul de tăiere „near” în spatele camerei. Parametrii sunt aceiași ca și pentru funcția OpenGL glOrtho(), cu excepția inversării ordinii celor doi parametri care specifică planurile de tăiere superioare și inferioare.

Camerele cu perspectivă sunt mai frecvente. Parametrii pentru camera cu perspectivă provin din funcția gluPerspective() din biblioteca GLU a OpenGL. Primul parametru determină extinderea verticală a volumului vizual, dată ca un unghi măsurat în grade. Aspectul este raportul dintre extinderea orizontală și verticală; De obicei, ar trebui setată la lățimea pânzei împărțită la înălțimea sa. Iar „near” și „far” dau limitele z ale volumului vizual ca distanțe față de cameră. Pentru o proiecție în perspectivă, ambele trebuie să fie pozitive, „near” fiind mai mic decât „far”. Codul tipic pentru crearea unei camere în perspectivă ar fi:

camera = new THREE.PerspectiveCamera(45, canvas.width/canvas.height, 1, 100);

unde canvas conține o referință la elementul <canvas> unde va fi redată imaginea. Valorile „near” și „far” înseamnă că doar lucrurile între 1 și 100 de unități în fața camerei sunt incluse în imagine. Rețineți că utilizarea unei valori inutil de mari pentru „far” sau a unei valori inutil de mici pentru „near” poate interfera cu acuratețea testului de adâncime.

O cameră, ca și alte obiecte, poate fi adăugată la o scenă, dar nu trebuie să facă parte din graficul scenei pentru a fi utilizată. O puteți adăuga la graficul scenei dacă doriți să fie părinte sau copil al unui alt obiect din grafic. În orice caz, în general, veți dori să aplicați o transformare de modelarea camerei pentru a-i seta poziția și orientarea în spațiul 3D. Voi acoperi acest aspect mai târziu, când voi vorbi despre transformări în general.

(Descărcarea fișierului three.js include mai multe exemple de clase alternative de randare, care pot fi redate către ținte diferite. De exemplu, există un CanvasRenderer care traduce grafica 3D în API-ul canvas 2D, așa cum a fost tratat în Secțiunea 2.6. Alte randări pot reda grafica 3D folosind SVG și chiar CSS. Cu toate acestea, aceste randări alternative nu acceptă multe caracteristici ale lui WebGL. Această carte va utiliza doar randarea WebGL.)

O randare care folosește WebGL este o instanță a clasei THREE.WebGLRenderer. Constructorul său are un parametru, care este un obiect JavaScript care conține setări care afectează randarea. Setările pe care cel mai probabil le veți specifica sunt canvas, care îi spune randării unde să deseneze, și antialias, care îi cere randării să utilizeze antialiasing, dacă este posibil:

renderer = new THREE.WebGLRenderer( {
canvas: theCanvas,
antialias: true
} );

Aici, theCanvas ar fi o referință la elementul <canvas> unde randarea va afișa imaginile pe care le produce. (Rețineți că tehnica de a avea un obiect JavaScript ca parametru este utilizată în multe funcții three.js. Aceasta face posibilă suportarea unui număr mare de opțiuni fără a fi necesară o listă lungă de parametri care trebuie specificați într-o anumită ordine. În schimb, trebuie doar să specificați opțiunile pentru care doriți să furnizați valori non-implicite și puteți specifica aceste opțiuni pe nume, în orice ordine.)

Principalul lucru pe care doriți să îl faceți cu o randare este să redați o imagine. Pentru aceasta, aveți nevoie și de o scenă și o cameră. Pentru a reda o imagine a unei scene date din punctul de vedere al unei camere date, apelați

renderer.render( scene, camera );

Aceasta este de fapt comanda centrală într-o aplicație three.js.

(Trebuie să menționez că majoritatea exemplelor pe care le-am văzut nu oferă o pânză pentru randare; în schimb, permit randării să o creeze. Pânza poate fi apoi obținută de la randare și adăugată la pagină. În plus, pânza umple de obicei întreaga fereastră a browserului. Programul exemplu threejs/full-window.html arată cum se face acest lucru. Cu toate acestea, toate celelalte exemple ale mele utilizează o pânză existentă, cu constructorul randării prezentat mai sus.)

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