Grafică Computerizată

lect. dr. Cristian Ioniță

1
 Structura curs
Obiectiv

Însușirea elementelor teoretice și practice necesare pentru dezvoltarea de aplicații web care utilizează grafică 3D
folosind WebGL / three.js
Cuprins
1. Transformări grafice
2. Noțiuni generale grafică 3D
3. Definirea geometriei
4. Culoare și iluminare, materiale
5. Utilizarea de modele externe.
6. Animație și interactivitate
7. Programare folosind OpenGL Shading Language
Evaluare: proiect – 50% și examen pe calculator – 50%
Contact
•Cristian Ioniță – cristian.ionita@softmentor.ro / cristian.ionita@ie.ase.ro
•Materiale: http://ase.softmentor.ro

2
Proiect
Aplicație three.js
Barem:
1p – din oficiu
3p – construire scenă de bază cu cel puțin un obiect
4p – elemente tehnice (la alegere)
◦ 1p utilizare modele externe
◦ 1p manipulare obiecte 3D utilizând mouse-ul și tastatura
◦ 1p utilizare materiale, texturi complexe și lumini
◦ 1p construire geometrii proprii complexe (grafice funcții, teren, etc.)
◦ 1p utilizare particule
◦ 1p utilizare controale dat.gui / controale proprii HTML pentru controlul obiectelor 3D

2p – complexitatea și coerența aplicației

3
Examen
Nota 5 - Desenare scenă de bază (Renderer + Scene + Camera) cu un obiect simplu

Suplimentar:
Geometrie: Geometry (.vertices, .faces ) + Vector3 + Face3, Box, Sphere, Plane
Mesh (position, rotation, translate, scale)
Lumini (Point, Directional)
Materiale (Basic, Lambert)
Texturi: încărcare texturi simple folosind TextureLoader + proprietatea .map
Particule simple + utilizare cameră ortografică + suprapunere
Animații
Noțiuni de transformări 2D / 3D

4
Precondiții – HTML / CSS
Noțiuni de bază HTML
◦ sintaxa HTML
◦ structura unui document
◦ Includere CSS / JavaScript
◦ Elemente pentru text, imagini, formulare

Noțiuni de bază CSS

◦ Sintaxa CSS, selectori simpli
◦ Culori, box model, poziționare

Resurse
◦ https://developer.mozilla.org/en-US/docs/Learn#HTML_beginnings

5
Precondiții – JavaScript / DOM
Programare în limbajul JavaScript
◦ tipuri de date, variabile, expresii
◦ lucrul cu vectori și obiecte
◦ funcții

Manipulare DOM
◦ regăsire / construire / adăugare / noduri
◦ tratare evenimente
◦ programare execuție funcție (setInterval, requestAnimationFrame)

Resurse
◦ http://javascript.info/ - secțiunile 1 și 2

6
Precondiții – Grafică 2D
Utilizarea elementului canvas:
◦ Proprietăți width, height și obținerea contextului grafic
◦ Desenare directă folosind fillRect / strokeRect / fillText
◦ Desenare folosind căi: beginPath / moveTo / lineTo / fill / stroke

Resurse
◦ https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial secțiunile Basic usage și
Drawing shapes

7
Instrumente Utilizate / Recomandate
Browser care să suporte WebGL
◦ Recomandat: Google Chrome

Editor de text
◦ Recomandat: Visual Studio 2017

Server Web local:

◦ Recomandat: Visual Studio 2017 / IIS Express

8
 1. Transformarea de vizualizare 2D

I. Transformări 2. Transformări afine 2D

Geometrice
3. Sistemul de coordonate 3D

4. Transformări 3D

5. Proiecția plană pentru un

obiect 3D

9
Spațiul Utilizator
Spațiul datelor de intrare (utilizator sau world)
care conține datele utilizatorului
Spaţiul utilizator
Este infinit
(wl,wt)
Folosește coordonate utilizator (sau reale)
Unități de măsură speficice problemei
fereastră

Zona rectangulară care se dorește a fi vizibilă (wr,wb)

se numește fereastră (window)
Definită de punctele (wl, wt) și (wr, wb)

10
Spațiul Ecran
Spațiul de vizualizare (ecran) care conține
vizualizarea datelor din fereastă
Ecranul calculatorului
Este finit
(vl,vt)
Folosește coordonate ecran exprimate în pixeli
Vizorul

Zona rectangulară care se dorește a fi vizibilă

se numește vizor (viewport)
Definită de punctele (vl, wt) și (vr, vb) (vr,vb)

11
 ,

Determinare coordonate fereastră / vizor .

Determinare coordonate fereastră (vizualizare completă)

Presupunem n puncte, de coordonate (xi, yi), i =1, n

wl  Minim xi wr  Maxim xi wb  Minim y i wt  Maxim y i

i i i i

Determinare coordonate vizor – regula conservării proporțiilor

wt  wb vt  vb

wr  wl vr  vl

12
Transformarea de vizualizare
Relații de bază
(vl,vt)

x  wl xe  vl
 (wl,wt) Vizorul
(xe, ye)

wr  wl vr  vl Fereastra
(x, y)

y  wb ye  vb

wt  wb vt  vb (wr,wb)
(vr,vb)

13
Transformarea de vizualizare
Relații de bază
(vl,vt)

 xe  x  ax  bx (wl,wt) Vizorul
 (xe, ye)
 ye  y  ay  by Fereastra
(x, y)

vr  vl vl ( wr  wl )  wl (vr  vl)
ax  , bx  ,
wr  wl wr  wl
vt  vb vb( wt  wb)  wb(vt  vb) (wr,wb)
(vr,vb)
ay  , by  .
wt  wb wt  wb

14
Transformări elementare 2D
Transformarea plană a punctului M(x,y) în punctul M’(x’,y’) este un set de ecuații de forma:
x' = f(x, y), y' = g(x, y)
Exemplu – transformare liniară:

Coordonate omogene – (x, y, 1)

◦ Permit translație
◦ Compunere ușoară
◦ Inversabilitate  grup algebric

15
Translația
x' = x + a şi y' = y + b

1 0 0
x y 1  0 1 0  xa y  b 1  x' y' 1
a b 1

16
Scalarea

a 0 0
x y 1  0 b 0  ax by 1  x' y' 1
0 0 1

17
Simetria
Simetria în raport cu axa OX:

1 0 0 
SX  0  1 0
0 0 1
Simetria în raport cu axa OY:
  1 0 0
Y 
S   0 1 0 
 0 0 1
18
Deformarea
(sau forfecarea)

1 b 0
x y 1  a 1 0  x  ay y  bx 1  x' y' 1
0 1

19
Rotația
Se realizează în jurul originii
Y
x  r  cos( )
x t  r  cos(   )  r (cos cos  sin  sin  )  x cos  y sin  Mt
y  r  sin( )
r
θ M
y t  r  sin(   )  r (sin  cos  cos sin  )  x sin   y cos α X
O
 cos sin  0
 sin  cos 0

 0 0 1
20
Compunerea transformărilor
Prin înmulțirea matricelor de transformare
Asociativitate

Posibilitate de inversare

21
Sisteme de coordonate 3D
După orientare:
◦ Sisteme directe (right handed)
◦ Sisteme indirecte (left handed)
După raportare
◦ Sisteme de coordonate obiect
◦ Sisteme de coordonate observator
După tipul de coordonate
◦ In coordonate carteziene
◦ In coordonate cilindrice
◦ In coordonate sferice

22
Sistemul direct-indirect
z z

- indirect - - direct -

x x


y y

Sistemul obiect-observator
Oz
Sistem de
coordonate obiect Oy
Sistem de coordonate
- sistem direct - observator
Ox
- sistem indirect -

O
Oy
Oz O

Ox

23
Tipuri de coordonate 3D
Carteziene Cilindrice Sferice
Oz Oz
Oz
z
z

P
P R
P
O
O O φ
y Oy
Oy Oy θ
x θ R
Ox Ox
Ox

Raza, R  R
Cota, z  R
 
Raza, r  [0, ) Latitudine,   [  , ]
2 2
Unghiul,   [0,2 ] Longitudine,   [0,2 ]

24
Transformare coordonate
carteziene  sferice
2 2 2
𝑅=√ 𝑥 + 𝑦 +𝑧 ,
 

  𝜋  
0 𝑥 >0 , 𝑦 >0

{
𝑥=0 , 𝑦 >0

𝜃=
2
3𝜋
2

𝑥
𝑦
𝑎𝑟𝑐𝑡𝑔 +𝑘 𝜋
𝑥=0 , 𝑦 <0

𝑥 ≠0
𝑘= 1
{ 𝑥<0
2 𝑥 >0 , 𝑦 <0
  𝜋
− 𝑥 2 + 𝑦 2= 0 , 𝑧 < 0

𝜙=

{ 𝑎𝑟𝑐𝑡𝑔
𝜋
2
2

𝑧
√ 𝑥2 + 𝑦 2
2

2
2
𝑥 + 𝑦 =0 , 𝑧 =0

𝑥 + 𝑦 ≠0
2

25
Transformare coordonate
sferice  carteziene
 
Oz

P
R
O
φ
Oy
θ

Ox

26
Transformări geometrice elementare
 Se procedează similar cu transformările 2D
Se folosesc coordonate omogene:
◦ Orice punct se transformă într-un punct în coordonate omogene de forma
◦ Punctul corespunzător în coordonate 3D este
◦ Uzual se utilizează (coordonatele x,y,z rămân neschimbate)

Matricele de transformare utilizate sunt de dimensiune 4x4

Transformările 3D de bază sunt: translația, scalarea, simetriile și rotațiile în jurul axelor

27
Translația și Scalarea
1 0 0 0
0 1 0 0
x y z 1  x  A y  B z  C 1  x' y ' z ' 1
0 0 1 0
A B C 1

A 0 0 0
0 B 0 0
x y z 1  Ax By Cz 1  x' y ' z ' 1
0 0 C 0
0 0 0 1

28
Simetriile
1 0 0 0 1 0 0 0
0  1 0 0 0
0 1 0
SX  S XOY 
0 0  1 0 0 0  1 0
   
0 0 0 1 0 0 0 1

 1 0 0 0
 0 1 0 0
SO 
0 0 1 0
 
0 0 0 1

29
Rotații
cos sin  0 0
 sin  cos 0 0
ROz  .
0 0 1 0
0 0 0 1

1 0 0 0 cos 0  sin  0
0 cos sin  0 0 1 0 0
ROx  , ROy 
0  sin  cos 0 sin  0 cos 0
0 0 0 1 0 0 0 1

30
Compunerea transformărilor - Exemplu
Rotație cu un unghi θ, în sens trigonometric, în jurul unei axe pq, paralele cu Ox
1) se efectuează o translație T, care aduce punctul p în originea sistemului de axe;
2) se efectuează rotația R cerută;
3) se execută translația T', care readuce punctul p la poziția sa inițială.
1 0 0 0 1 0 0 0 1 0 0 0
0 1 0 0 0 cos sin  0 0 1 0 0
M    
0 0 1 0 0  sin  cos 0 0 0 1 0
a b c 1 0 0 0 1 a b c 1
1 0 0 0
0 cos sin  0

0  sin  cos 0
0  b cos  c sin   b  b sin   c cos  c 1

31
Imaginea plană a unui obiect 3D
Imaginea plană se determină printr-o transformare compusă în conformitate cu etapele
necesare obținerii imaginii 2D.
Pentru a obține imaginea plană a unui obiect 3D sunt parcurse următoarele etape:
◦ Determinarea coordonatelor observator
◦ Proiecția plană
◦ Transformarea de vizualizare și obținerea coordonatelor ecran

Pentru fiecare etapă se obține o matrice de transformare.

Compunerea acestor matrice dă transformarea compusă cerută.

32
Determinarea coordonatelor observator
Se determină matricea de transformare care aplicată coordonatelor obiect dă ca rezultat
coordonatele observator.
Aceasta matrice se obține prin compunerea a 4 matrice, corespunzând a patru transformări
simple în urma cărora sistemul de coordonate obiect se va suprapune sistemului de coordonate
observator. Z
Y
P
X

O’
Z
O R O N Y


M

X
33
Transformarea 1
Translaţia sistemului de coordonate obiect din originea O în punctul O’, originea sistemului de
coordonate observator
Z
Z1
A = translație-1(M, N, P) =

 1 0 0 0 Y1
 0 1 0 0
O’
 X1
 0 0 1 0 O O Y
  

 R cos cos  R sin  cos  R sin  1

34
Transformarea 2
Rotaţia sistemului de coordonate intermediar (O’X1,O’Y1,O’Z1) în jurul axei Z1 cu un unghi (90-
θ) în sens anti-trigonometric

Z
Z2
B = rotațieZ (-(90-Θ)) =
-1

 sin  cos 0 0
 cos sin  0 0

O’ Y2
 X2
 0 0 1 0 O


O Y

 
 0 0 0 1
X

35
Transformarea 3
Rotaţia sistemului de coordonate intermediar cu un unghi (90+φ), în jurul axei X2, în sens
trigonometric

Z
C = rotațieX (90-Φ) =
-1
Y3
1 0 0 0
0  sin   cos 0 Z3
 O’
0 cos  sin  0 X3
  O

O Y
0 0 0 1 

36
Transformarea 4
Conversia sistemului de coordonate (O’x3,O’y3,O’z3), dintr-un sistem indirect într-un sistem
direct

Z
D= simetrieZ () =
-1 YO
P
XO
 1 0 0 0
0 1 0 0
 O’
0 0 1 0 O R
ZO
N Y
  

0 0 0 1
M

37
Transformarea în coordonate observator
 sin   cos sin   cos cos 0
 cos  sin  sin   sin  cos 0
T  A B C  D  
 0 cos  sin  0
 
 0 0 R 1

( xo, yo, zo,1)  ( x, y, z ,1)  T

 xo   x sin   y cos

 yo   x cos sin   y sin  sin   z cos
 zo   x cos cos  y sin  cos  z sin   R


38
Proiecția plană
Ansamblul de transformări pe care le suferă un punct aflat într-un sistem tridimensional pentru
a trece într-un sistem bidimensional.

Tipuri de proiecții plane:

◦ Proiecția perspectivă
◦ Proiecția paralelă

39
Proiecția plană – proiecția perspectivă
Centrul de proiecție se află la o Plan de
distanță finită de planul de proiecție proiecţie
a’’
Plan de
proiecţie
Mărimea obiectului proiectat este
a
invers proporțională cu distanța ce
separă obiectul de centrul de a’ Centrul de
proiecţie
proiecție. b’
b

b’’

40
Proiecția plană – proiecția paralelă
Centrul de proiecție este
Plan de Plan de
situat la o distanță infinită
proiecţie proiecţie
de obiect
a’’ a a’ Centrul de
proiecţie
Dimensiunea obiectului  
proiectat nu depinde de
distanță b’’ b’
b

41
Proiecția plană
Planul de proiecție este planul XO’’Y al unui Z
sistem de coordonate având axa O’’Z în direcția YO
O’O care unește camera cu originea sistemului
de coordonate obiect. XO

Planul de proiecție este paralel planului XOYO Y X

din sistemul de coordonate observator. E E O’
Distanta dintre cele doua plane, D, este mai Z ZO
mică decât R, distanța dintre O’ si O. Y
O E



42
Proiecția plană
XO

X
 
𝐷 ⋅ 𝑥𝑜 Bt
𝑥𝑟= B’
𝑧𝑜 B YO
xr Y
  𝐷 ⋅ 𝑦𝑜 B’’
𝑦𝑟= yr
xo
𝑧𝑜 A’
A’’ O’
ZO zo

D
  proiecția coordonatei a unui punct pe planul de proiecție

43
Influenţa mărimilor R şi D
Variația lui R implică modificarea formei obiectului
Variația lui D are ca efect modificarea mărimii obiectului
R

Observator

Imagine
Obiect

44
Decupajul în grafica 3D
Presupune reprezentarea acelei părți
YO
dintr-un corp 3D care face parte din
Volumul de vizualizare.
Decupajul implica două teste: a
◦ stabilirea condițiilor de vizibilitate pentru
punctele corpului b’
EY
◦ determinarea intersecțiilor cu planele O ZO
D
laterale EX
b

a’
XO

45
 Condiţii de vizibilitate – Ecuațiile
planelor
YO
b’ Planul stânga

EX Planul superior

a
O D
EY
ZO
EX
O D
Planul dreapta EY ZO

XO Planul inferior

EX  EX EY  EY
X Z X Z Y ZY Z
D D D D
46
Condiții de vizibilitate pentru puncte
Pentru un punct oarecare P(x1,y1,z1), condițiile de vizibilitate sunt următoare:
  𝐸𝑌
𝑦1≤ 𝑧 1       pentru   a  fi  sub  planul  superior
𝐷
  − 𝐸𝑌
𝑦1 ≥ 𝑧1       pentru  a  fi   peste  planul   inferior
𝐷
  − 𝐸𝑋
𝑥1 ≥ 𝑧 1    pentru   a  fi  î n   dreapta  planului  stang
𝐷
  𝐸𝑋
𝑥1 ≤ 𝑧1     pentru  a  fi  î n  st ânga  planului  drept
𝐷
47
Intersecția unei drepte oarecare
cu unul din plane
Fie P (x, y, z ) punctul de intersecție al unei drepte oarecare din spațiu, care trece prin două
puncte de coordonate (x1,y1,z1) și (x2,y2,z2), cu unul din planele laterale.
Ecuațiile parametrice ale acestei drepte sunt:
 x  t ( x 2  x1)  x1
x  x1 y  y1 z  z1 
  t   y  t ( y 2  y1)  y1
x 2  x1 y 2  y1 z 2  z1  z  t ( z 2  z1)  z1

Intersecția se obține din sistemul format din ecuațiile parametrice ale dreptei și ecuația planului
în cauză.
Înlocuind x, y si z în ecuațiile planelor laterale obținem valorile parametrului t pentru
intersecțiile cu cele 4 plane laterale.
După determinarea lui t sunt determinate valorile x, y si z din ecuațiile parametrice.

48
Reprezentare Obiecte
Reprezentarea fiecărui obiect 3D este Puncte: Oz
compusă din două liste: 1 -> (0,0,0) 6 (0,0,5) 7 (0,3,5)
◦ O listă de puncte în spațiul 3D în 2 -> (0,3,0)
coordonate utilizator 3 -> (4,3,0)
◦ O listă de suprafețe 4 -> (4,0,0)
5 -> (4,0,5) 5 (4,0,5)
6 -> (0,0,5) 8 (4,3,5)
Fiecare suprafață este reprezentată
printr-o listă ordonată de puncte 7 -> (0,3,5)
8 -> (4,3,5) O 1 (0,0,0) 2 (0,3,0)
coplanare care mărginesc suprafața;
punctele sunt furnizate sub formă de Oy
Suprafețe:
index din lista de puncte a obiectului 1,2,3,4
5,6,7,8
Scena – reprezintă totalitatea 3 (4,3,0)
4,3,8,5 4 (4,0,0)
elementelor grafice care pot fi 3,2,7,8
reprezentate (listă de obiecte) Ox
1,4,5,6
1,6,7,2

49
Desenarea Obiectelor
  Se calculează matricea de transformare T pe
1.
baza poziției observatorului: punctul sau
  Poziție observator Matricea de
2. Se aplică transformarea T pentru fiecare transformare T
punct al obiectului pentru a se obține
coordonatele observator
3. Se proiectează punctul pentru a se obține
coordonatele 2D Puncte in Puncte in coordonate
4. Se aplică transformarea de vizualizare 2D coordonate obiect observator
pentru a se obține coordonatele ecran
5. Se desenează suprafețele folosind
Parametri proiecție Puncte în
coordonatele ecran
și vizualizare coordonate ecran

50
 1. Grafică 3D Interactivă

I. Noțiuni 2. Definirea obiectelor

generale
3. Fereastra de vizualizare

4. Construcția imaginii

5. Structura de bază a unei

aplicații three.js

51
1. Grafică 3D Interactivă
Grafica 3D presupune construirea de imagini 2D pe baza unei lumi virtuale tridimensionale
compuse din:
◦ Obiecte definite prin intermediul:
◦ Obiectelor geometrice componente
◦ Caracteristicile suprafețelor geometrice (materiale)
• Surse de lumină
• O cameră
Interacțiunea implică posibilitatea utilizatorului de a modifica în timp real elemente ale
lumii virtuale afișate
◦ Implică un volum foarte mare de calcule deoarece este nevoie de redesenarea continuă a
imaginii (minim 10 cadre pe secundă - FPS)
◦ Exemplu: pentru 60 FPS și un procesor cu frecvența 3GHz =>
50M cicluri de ceas per cadru / 1M pixeli -> ~50 cicluri de ceas per pixel

52
Definirea lumii virtuale (scena)
Obiecte
Geometrie:
◦ Descrie poziționarea în cadrul scenei a fiecărui element al obiectului
◦ Uzual descrisă sub formă de triunghiuri (denumite faces) definite prin
intermediul a trei puncte (denumite vertices)

Material:
◦ Descrie caracteristicile vizuale ale fiecărei componente geometrice
(face): culoare, transparență, imagine, reflectivitate, ...

Lumini
◦ Descriu sursele de lumină prezente în cadrul scenei și caracteristicile
acestora (poziție, intensitatea și culoarea luminii, direcția, ...)

53
Fereastra de vizualizare
Trunchiul de piramidă care conține secțiunea vizibilă a lumii
virtuale – denumit view frustum
Planul apropiat corespunde imaginii afișate către utilizator

Construcția imaginii presupune determinarea intensității

luminii (culorii) pentru fiecare punct din imagine pe baza a:
◦ Surselor de lumină (care emit fotoni)
◦ Obiectelor din lumea virtuală
◦ Proprietăților materialelor care compun suprafața acestora

54
Construcția imaginii
A) Simulare completă
- se simulează calea parcursă de fiecare foton provenit de la fiecare sursă
de lumină în parte
- se măsoară cantitatea de fotoni care ajunge pe fiecare pixel din
imaginea finală
B) Ray tracing
Rază: linia care pleacă de la ochi și trece printr-un pixel
Se calculează punctul în care intersectează primul obiect din scena
Pentru punctul calculat se determină lumina emisă în funcție de toate
sursele de lumină

55
Construcția imaginii folosind GPU
Graphics pipeline – Etape principale:
A) Application
◦ Construirea geometriei pe CPU pe baza datelor de intrare (modele 3D preîncărcate, interacțiune cu
utilizatorul, detecția coliziunii, generate pe baza datelor pentru vizualizări);
◦ Fiecare obiect este descompus în triunghiuri

B) Geometry
◦ transformarea modelului, selectarea suprafețelor vizibile, transformarea de vizualizare (proiecția finală
corespunzătoare camerei)

C) Rasterization
◦ Determinarea culorii pentru fiecare pixel

56
Algoritmul Painter
Dacă avem două triunghiuri care se suprapun pe ecran, cum ne dăm seama care este vizibil?
Algoritmul:

Se sortează obiectele pe baza distanței față de cameră

Se desenează începând cu cele mai îndepărtate
Problema: ordinea nu poate fi determinată în toate situațiile
◦ modalități de rezolvare: descompunerea obiectelor sau Z-Buffer

57
Z-Buffer
Pentru fiecare pixel, în afară de culoare, se stochează distanța
Inițial toate valorile Z iau valoarea maximă
Când se redă un triunghi se compară distanța de la ochi la fiecare
punct din triunghi (Znou) cu valoarea din Z buffer
Dacă Znou < Z atunci
◦ Se modifică valoarea din Z buffer: Z = Znou
◦ Se calculează culoarea pentru pixel
◦ Se stochează noua culoare în color buffer

Pentru a minimiza costurile obiectele de desenează începând cu cel

mai apropiat

58
Z Buffer

59
three.js – introducere
Bibliotecă grafică 3D
◦ Rulează în browser și utilizează
HTML5/JavaScript
◦ Bazată pe WebGL / OpenGL ES

Concepte de bază
Descărcare: https://threejs.org/  Download
Documentație:
https://threejs.org/docs/index.html#manual/in
troduction/Creating-a-scene

DEMO

60
three.js – structura aplicației
Actualizarea parametrilor scenei pentru implementarea
animațiilor programată folosind setInterval
Desenare continuă a scenei programată
folosind requestAnimationFrame
actualizareModel()

MODEL render()
BROWSER
(scena)

tratareEveniment()
Preluarea și procesarea informațiilor de la utilizator (interactivitate)
61
three.js – structura aplicației
<!DOCTYPE html>
<html>
<head>
<title>Aplicație 3D</title>
<style> html, body { margin: 0; padding: 0; overflow: hidden; } </style>
</head>
<body>
<script type="text/javascript" src="three.js-master/build/three.js"></script>
<script type="text/javascript">
// codul aplicației
</script>
</body>
</html>

62
three.js – structura aplicației
var W = window.innerWidth, H = window.innerHeight;
• Construire obiecte de bază (renderer, scene, camera)
var renderer = new THREE.WebGLRenderer(); • Populare obiect scene cu obiecte și surse de lumină
renderer.setSize(W, H); (nu este reprezentat aici)
var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(45, W / H, 0.01, 1000);

camera.position.set(100, 100, 100);
camera.lookAt(scene.position);

document.body.appendChild(renderer.domElement);
• Adăugare suprafață de desenare (canvas) în cadrul
paginii
function render() {
renderer.render(scene, camera); • Bucla de desenare
requestAnimationFrame(render);
}
render();

63
three.js – Instrumente ajutătoare
Afișarea axelor:
◦ Pentru afișarea axelor se adaugă un obiect de tip AxesHelper în cadrul scenei
◦ Parametrul reprezintă dimensiunea axelor

scene.add(new THREE.AxesHelper(100));
Afișare grid:
◦ Permite afișarea unei grile pentru determinarea facilă a dimensiunilor
◦ Parametrii reprezintă dimensiunea grilei și numărul de diviziuni

const gridHelper = new THREE.GridHelper(100, 10)

scene.add(gridHelper);

64
three.js – Controlul Camerei
Modificarea camerei:
◦ Permite modificarea poziției și orientării camerei folosind tastatura și mouse-ul
◦ Necesită includerea fișierului three.js-master/examples/js/controls/OrbitControls.js
◦ Pentru funcționalitatea de bază este necesară doar crearea unui obiect OrbitControls pe baza camerei

var orbitControls = new THREE.OrbitControls(camera, renderer.domElement);

◦ Opțiuni:
◦ autoRotate (bool): permite rotirea automată a camerei (implicit false)
◦ enableKeys (bool): permite dezactivarea utilizării tastaturii (implicit true)

65
dat.gui - Adăugare controale
Adrese utile:
◦ Site: https://github.com/dataarts/dat.gui
◦ Documentație: https://github.com/dataarts/dat.gui/blob/master/API.md#GUI+add
◦ Tutorial: http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage

Utilizare de bază:
const valori = { valoare: 5.3, culoare: "0xFF0012“ };

function actualizare() { /* utilizare obiect valori */ }

const gui = new dat.GUI();

gui.add(valori, "valoare", 0, 10).onChange(actualizare);
gui.addColor(valori, "culoare").onChange(actualizare);

66
 1. Sistemul de coordonate

II. Definirea
Geometriei 2. Elemente de bază

3. Implementare în three.js

67
Sistemul de coordonate
Sistem de coordonate carteziene cu trei axe
Clasificare: z z
◦ După orientare:
◦ Sisteme directe (right handed) - indirect - - direct -
◦ Sisteme indirecte (left handed)
x x


◦ După raportare
◦ Sisteme de coordonate obiect
◦ Sisteme de coordonate observator

y y
Vector – triplet ordonat de forma (x,y,z)
Punct (vertex) – caz particular de vector care indică o
locație în spațiu

68
Elemente de bază
Uzual, placa video primește descrierea scenei folosind următoarele primitive:
Punct
◦ Definit prin intermediul unui triplet (x,y,z)

Segment
◦ Definit prin două puncte

Triunghi (face)
◦ Definit prin trei puncte
◦ Garantat coplanare
◦ Orice element grafic mai complex este descompus în triunghiuri

69
Triangulare
Toate elementele grafice care compun scena trebuie descompuse în
triunghiuri înainte de a fi trimise către acceleratorul grafic
Procesul de descompunere se numește triangulare
Este realizat de către aplicație sau de către biblioteca grafică
Descrierea unui obiect se realizează prin intermediul:
◦ Listă de puncte
◦ Listă de indici pentru fiecare triunghi

Liste de triunghiuri (triangle strip)

70
Orientarea triunghiurilor
Orice triunghi are o orientare dată de ordinea
în care sunt furnizate punctele:
◦ Cu fața – în sens trigonometric
◦ Cu spatele – în sensul acelor de ceasornic

Backface culling – tehnică de optimizare utilizată de bibliotecile grafice: presupune afișarea doar
a triunghiurilor cu fața
three.js – poate fi controlată prin proprietatea side a materialului
◦ Valori posibile: THREE.FrontSide, THREE.BackSide sau THREE.DoubleSide

71
three.js – Construirea geometriei
Geometry – clasa de bază utilizată pentru reprezentarea tuturor obiectelor
◦ .vertices: colecția de puncte asociate obiectului (de tip Vector3)
◦ .faces: colecția de triunghiuri care compun obiectul (de tip Face3)

Vector3 – reprezintă un vector în spațiul 3D (utilizat pentru reprezentarea punctelor)

new THREE.Vector3(x,y,z)
◦ x, y și z reprezintă coordonatele punctului

Face3 – reprezintă un triunghi component al unui obiect Geometry

new THREE.Face3(i1, i2, i3)
◦ i1, i2, i3 – reprezintă indici în cadrul colecției de puncte .vertices

72
three.js – Construirea geometriei
Exemplu:
var g = new THREE.Geometry();
g.vertices.push(new THREE.Vector3(5, 5, 0));
g.vertices.push(new THREE.Vector3(20, 5, 0));
g.vertices.push(new THREE.Vector3(20, 20, 0));
g.vertices.push(new THREE.Vector3(5, 20, 0));

g.faces.push(new THREE.Face3(3, 0, 2));

g.faces.push(new THREE.Face3(2, 0, 1));

var patrat = new THREE.Mesh(

g,
new THREE.MeshBasicMaterial(
{ color: 'red', side: THREE.FrontSide }));
scene.add(patrat);

73
three.js – Utilizarea geometriei
Obiectul de bază THREE.Object3D:
◦ position (Vector3): poziția față de obiectul părinte
◦ rotation (Vector3): rotația obiectului în radiani
◦ scale (Vector3): scalarea obiectului; implicit (1,1,1) – dimensiunea este dată de geometrie
◦ matrix (Matrix4): matricea de transformare calculată pe baza proprietăților de mai sus
◦ children (Object3D[]) / parent (Object3D): legăturile către obiectele copil / obiectul părinte
◦ visible (boolean): permite afișarea / ascunderea obiectului

Exemple de obiecte derivate: Scene, Mesh, Group

Obiectul THREE.Mesh conține în plus față de THREE.Object3D:
◦ geometry (Geometry): referință la un obiect de tip Geometry care definește structura obiectului
◦ material (Material): referință la un obiect / vector de tip Material care specifică caracteristicile fețelor

74
three.js - Figuri geometrice 3D de bază
new THREE.BoxGeometry(width, height, depth);

new THREE.SphereGeometry(radius, widthSegments, heightSegments);

new THREE.CylinderGeometry(radiusTop, radiusBottom, height);

new THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments);

75
three.js - Figuri geometrice 2D
new THREE.PlaneGeometry(width, height, widthSegments, heightSegments);
new THREE.CircleGeometry(radius, segments, thetaStart, thetaLength);
new THREE.ShapeGeometry(shape, options);
◦ shape = new THREE.Shape()
◦ .absarc (x, y, radius, startAngle, endAngle, clockwise)
◦ .absellipse (x, y, xRadius, yRadius, startAngle, endAngle, clockwise, rotation)
◦ .arc (x, y, radius, startAngle, endAngle, clockwise)
◦ .ellipse (x, y, xRadius, yRadius, startAngle, endAngle, clockwise, rotation)
◦ .lineTo (x, y)
◦ .moveTo (x, y)
◦ .holes.push(path) // doar pentru shape

76
three.js - Figuri geometrice 3D avansate
Construire geometrie 3D pe baza unei figuri 2D prin extrudare:
new THREE.ExtrudeGeometry(shape, options)
◦ options: amount, bevelThickness, bevelSize, bevelSegments, bevelEnabled, curveSegments, steps

Construire geometrii 3D bazate pe ecuații:

new THREE.ParametricGeometry(func, slices, stacks)
◦ func: (u, v)  Vector3, cu u și v în [0,1]
◦ exemplu pentru plan:
function plan(u, v) {
var x = u * W;
var y = 0;
var z = v * H;
return new THREE.Vector3(x, y, z);
}

77
Surse de lumină de bază
new THREE. PointLight(color, intensity, distance)
◦ proprietate position pentru poziționare

new THREE.SpotLight(color, intensity, distance, angle)

◦ proprietate position pentru poziționare
◦ proprietate target pentru orientare
◦ proprietate castShadow pentru generare umbre

new DirectionalLight(color, intensity)

◦ proprietate position pentru poziționare
◦ proprietate target pentru orientare
◦ proprietate castShadow pentru generare umbre

78
Materiale – Determinarea culorii
Emissive: lumina proprie emisă de obiect (în general doar pentru sursele de lumină);
◦ practic adaugă o culoare constantă pentru obiectul respectiv, indiferent de lumina din mediu;

Ambient: folosită pentru a reprezenta zonele care nu sunt iluminate direct;

◦ adaugă o culoare constantă pentru toate obiectele;

Diffuse: lumina din mediu reflectată de o suprafață mată;

◦ influențată doar de poziția surselor de lumină;

Specular: lumina din mediu reflectată de o suprafață strălucitoare;

◦ afectat de poziția observatorului și a surselor de lumină;

Culoare = Emissive + Ambient + SUM(Diffuse(lumini) + Specular(lumini))

79
Materiale - Simple
MeshBasicMaterial – permite afișarea unei culori simple sau a scheletului obiectului:
Proprietăți principale:
◦ color: culoarea suprafeței;
◦ wireframe: boolean, true pentru afișarea scheletului sau false pentru afișare normală;

MeshNormalMaterial – permite colorarea fețelor în funcție de vectorul normal la suprafață

80
Materiale – Reflexia Difuză (Lambert)
 
Reflexia difuză (ideal) – fiecare rază incidentă este împrăștiată în toate direcțiile (luminozitatea
percepută este egal percepută în tot semispațiul);
În mod normal apare în cazul suprafețelor mate;
Se calculează o singură culoare pentru un poligon al suprafeței:

MeshLambertMaterial
◦ Proprietăți similare cu MeshBasicMaterial
◦ Necesită o sursă de lumină
◦ Pretabil pentru suprafețe mate
◦ Performanță ridicată

81
Materiale – Reflexia Speculară (Phong)
Se calculează o culoare pentru fiecare punct din interiorul poligonului pe baza normalei determinate prin
interpolarea normalelor asociate vârfurilor

MeshPhongMaterial
Proprietăți specifice: shininess, metal (bool)

82
Texturi - Introducere
Modalitate de a atașa informații pentru pixelii unui mesh
◦ Culoare – determină culoarea pentru fiecare pixel pe baza unei imagini
◦ Înălțime – determină înălțimea / orientarea pentru fiecare pixel pe baza unei imagini
◦ Grad de strălucire – determină gradul de strălucire (cât de mult reflectă lumina) pentru fiecare pixel pe
baza unei imagini

Formate de imagini suportate: JPEG, PNG, GIF

Se poate construi un obiect textură direct pe baza unui obiect canvas:
var textura = new THREE.CanvasTexture(canvas);

83
Texturi - Încărcare
Se utilizază metoda .load a obiectului TextureLoader și se asociază cu un material folosind
proprietatea .map:
var textureLoader = new THREE.TextureLoader()
var texture = textureLoader.load( 'imagini/test_1024.jpg' );

var material = new THREE.MeshBasicMaterial();

material.map = texture;
Modalități de scalare textură specificate prin proprietățile .magFilter și .minFilter

84
Texturi – Simulare înălțime
Bump Map – stabilește înălțimea pentru fiecare pixel pe baza
intensității culorii din textura furnizată
Proprietăți material:
◦ bumpMap – textura care conține înălțimile
◦ bumpScale - multiplicatorul

Normal Map – stabilește orientarea (direcția) pentru fiecare

pixel
Imaginea stochează normala la suprafață pentru fiecare
punct
Proprietate: normalMap

85
Texturi – Strălucire material
Specular Map – stabilește strălucirea pentru
fiecare pixel pe baza intensității culorii din
textura furnizată
Proprietăți material:
◦ specularMap – textura care conține înălțimile
◦ specular – specifică ce culoare are lumina reflectată
de material
◦ shininess – specifică intensitatea luminii reflectate
(implicit 30)

86
Particule / Mulțimi de particule
Puncte sau mulțimi de puncte în spațiul 3D

Simulate prin obiecte de tip plan orientate

mereu către cameră

Exemple de utilizări:
◦ Vizualizare date
◦ Simulare ploaie, ninsoare, ...
◦ Prezentare instrumente

87
Particule / Mulțimi de particule
Pentru particule simple se utilizează obiecte de tip Sprite
◦ Derivate din Object3D (la fel ca și Mesh)
◦ Moștenesc proprietăți cum ar fi position, scale, translate, ...
◦ Se construiesc pe bază de material specific - SpriteMaterial

Exemplu:
var material = new THREE.SpriteMaterial();
var sprite = new THREE.Sprite(material);
sprite.position.set(10, 20, 5); sprite.scale.set(10 / i, j / 10, 1);
scene.add(sprite);

◦ Permit controlul individual pentru fiecare particulă

◦ Nu sunt eficiente când avem un număr mare de particule

88
Materiale
SpriteMaterial
◦ Utilizat pentru construirea unui obiect de tip Sprite
◦ color – culoarea
◦ map – textura utilizată
◦ opacity – gradul de transparență (0 – transparent, 1 – opac)
◦ transparent – trebuie setat pe true pentru particule transparente / semi-transparente

Exemplu:
var material = new THREE.SpriteMaterial({
color: "rgb(255, 255, 0)",
opacity: 0.5,
transparent: true
});

89
Mulțimi de particule
Se utilizează obiecte de tip Points (inițial se numeau PointCloud)
◦ Se construiesc pe bază de material specific – PointsMaterial - și obiect Geometry
◦ Punctele individuale sunt adăugate în colecția .vertices (obiecte de tip Vector3)
◦ Se pot seta culorile pentru fiecare punct în parte folosind colecția .colors (și proprietatea vertexColors:
true pentru material)

Exemplu:
var pointsMaterial = new THREE.PointsMaterial({vertexColors: true});
var pointCloudGeometry = new THREE.Geometry();

pointCloudGeometry.vertices.push(new THREE.Vector3(6, 2, 1));

pointCloudGeometry.colors.push(new THREE.Color(0xFF0000));

var pointCloud = new THREE.Points(pointCloudGeometry, pointsMaterial);

scene.add(pointCloud);

90
Materiale
PointsMaterial
◦ Utilizat pentru construirea unui obiect de tip Points
◦ color – culoarea
◦ map – textura utilizată
◦ opacity – gradul de transparență (0 – transparent, 1 – opac)
◦ transparent – trebuie setat pe true pentru particule transparente / semi-transparente
◦ size – dimensiunea punctelor (implicit 1)
◦ vertexColors – permite folosirea colecției .colors pentru specificarea culorilor

Se pot utiliza texturi bazate pe obiecte Image sau Canvas

Se pot construi sprite-uri prin intermediul proprietăților offset și repeat ale texturii

91
Utilizare camera ortografică
Implementează o proiecție paralelă
Obiectele sunt la fel de mari indiferent de distanța față de
cameră
Obiect OrthographicCamera
Parametri: left, right, top, bottom, near, far – coordonatele
paralelipipedului dreptunghic care încadrează obiectele
vizibile
Exemplu:
const viewSize = 89; // în funcție de dimensiunea obiectelor
const camera = new THREE.OrthographicCamera(
-W / H * viewSize, W / H * viewSize,
viewSize, -viewSize,
1, 10);
camera.position.z = 5;

92
Suprapunere randări
Putem suprapune mai multe randări folosind un obiect WebGLRenderer

Pentru fiecare randare este necesară o pereche (scenă, cameră)

Pentru fiecare pereche trebuie apelată metoda .render în cadrul funcției programate cu
requestAnimationFrame.

Între apelurile funcției render trebuie setată proprietatea .autoClear pe false (altfel ecranul va fi
șters înainte de a doua randare).

93
Detecție coliziuni
Tehnici multiple
Utilizare obiect Raycaster pentru detecție coliziuni între două obiecte A și B:
◦ Construim câte o rază din centrul obiectului A către fiecare din punctele geometriei acestuia
◦ Verificăm dacă raza construită intersectează obiectul B

Construire obiect Raycaster:

Raycaster(origin : Vector3, direction : Vector3, near : Float, far : Float)
Utilizare obiect:
◦ Metoda .intersectObjects ( objects : Array, recursive : Boolean)

94
Selecție
Pe baza obiectelor Raycaster:
◦ Se normalizează coordonatele mouse-ului
◦ Se proiectează în spațiul 3D
◦ Se folosește obiectul Raycaster pentru a determina
intersecțiile

Proiecție:
◦ Se construiește un vector folosind coordonatele
normalizate
◦ Se utilizează metoda .unproject(camera) a obiectului
Vector3 pentru a obține coordonatele în spațiul 3D

95
Încărcare model extern
Se construiește unul din obiectele THREE.[X]Loader disponibile
Se apelează metoda .load(url, funcție) pentru pornirea încărcării:
◦ Încărcarea se realizează asincron
◦ La terminarea încărcării este apelată funcția cu obiectul mesh primit ca parametru

Exemplu:
var objectLoader = new THREE.ObjectLoader();
objectLoader.load(
"three.js-master/examples/models/json/teapot-claraio.json", function (obiect) {
scene.add(obiect);
});
Adăugare MIME type în fișierul web.config:
<?xml version="1.0"?>
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".3ds" mimeType="application/object" />
</staticContent> </system.webServer> </configuration>

96
Animație model extern
Pentru utilizarea animațiilor definite într-un model extern se utilizează următoarele obiecte:
AnimationClip – obținut din model; stochează animațiile definite (mers, sărit, ...)
AnimationAction – permite pornirea / oprirea unei animații
AnimationMixer – controlează redarea animației (realizează actualizarea în funcție de timp)
Exemplu:
// obtinem mesh-ul din model
const meshPasare = gltf.scene.children[0];

// construim un mixer pentru mesh

const mixer = new THREE.AnimationMixer(meshPasare);

// extragem animatia din model

const animation = gltf.animations[0]; // obiect AnimationClip

// extragem actiunea dorita din animatie si o pornim

const action = mixer.clipAction(animation); action.play();

// actualizam continuu prin intermediul mixer-ului

setInterval(() => { mixer.update(0.01) }, 10);

97