Web GL : cours 7

La caméra

PF Villard

Introduction aux caméras

Types de projection :

Caméra orthographique

Caméra orthographique

Démo de caméra orthographique

Caméra orthographique dans THREE.JS


viewSize = 900;
aspectRatio = canvasWidth/canvasHeight;
// OrthographicCamera( left, right, top, bottom, near, far )
camera = new THREE.OrthographicCamera(
    -aspectRatio*viewSize / 2, aspectRatio*viewSize / 2,
    viewSize / 2, -viewSize / 2,
    -1000, 1000 );









Caméra orthographique dans THREE.JS


camera.position.set( -890, 600, -480 );
cameraControls = new THREE.OrbitAndPanControls(camera,
     renderer.domElement);
cameraControls.target.set(0,310,0);

+ Y toujours vers le haut










Le "look at"











Exception










Le référentiel vue











Normalized Device Coordinates


OrthographicCamera(left, right, top, bottom, near, far);

Normalized Device Coordinates











Une matrice orthographique type

Que fait cette matrice ?

Camera perspective

Camera perspective


// PerspectiveCamera( angle, aspectRatio, near, far )
camera = new THREE.PerspectiveCamera( 30, aspectRatio, 1, 10000 );
camera.position.set( -170, 170, 40 );
cameraControls = new THREE.OrbitAndPanControls(camera,
     renderer.domElement);
cameraControls.target.set(0,50,0);


camera.updateProjectionMatrix();

Matrice de camera perspective

Matrice de camera perspective

Matrice de camera perspective

  • Champ de vue : 90 degrées
  • aspect ratio : 1
  • Z near : 1
  • Z far : 2


1000
0100
00-1.2-2.2
00-10

Transformation de coordonnées par Matrice de camera perspective

→Multiplier la matrice
pas ces points :

  1. (0,0,-1)→(,,,)
  2. (0,11,-11)→(,,,)
  3. (0,4,-6)→(,,,)


1000
0100
00-1.2-2.2
00-10

Coordonnées homogènes

XYZW
(0, 0, -1)→(0,0,-11) →(0,0,-1)
(0, 11, -11)→(0111111)→(0,1,1)
(0, 4, -6)→(0456)→(0,0.67,0.83)

Passage de coordonées perspectives aux coordonnées homogènes ?

Coordonnées homogènes

Clipping









Clipping









vertex shader →(X,Y,Z,W)   Coordonnées clippées

W=0 : vecteur

W=1 : point

Champs de vue

Exemple : travelling contrarié
=Effet cinématographique consistant à contrarier les effets simultanés d'un zoom et d'un travelling


→ Le sujet principal reste cadré de la même manière

Vrai champs de vue


hauteur=2*tan(FOV/2)*distance









Quiz

A quelle distance ce trouve la caméra ?

FOV=90 degrés
hauteur d'écran=20cm
distance =   cm







hauteur=2*tan(FOV/2)*distance

Cible


cameraControls.tergat.set(0,300,0);

Dolly, Pan et Orbit

Dolly, Pan et Orbit

Pour chacun des cas suivant, qu'est-ce qui change (significativement) ?
CiblePosition
Orbit vers la droite
Tourne la caméra vers la gauche
Augmente le zoom
Pan vers la droite

Clipping par rapport au Z near et Z far

Z fighting

Profondeur du champs

Clipping par rapport au Z near et Z far

Coordonnées fenêtre

Objets sujets à une série de transformation :
  • Transformation du modèle dans le repère monde
  • Transformation dans le référentiel vue
  • Projection perspective
  • Clipage fenêtre
  • Transformation en NDC

→ Passage au NDC ?

XYZ in NDC: -1 à 1
  • Xw=((X+1)/2)* Xres
  • Yw=((Y+1)/2)* Yres
  • Zw=((Z+1)/2)* Zres

Paramétrisation du Viewport









Coordonnées de fenêtre

Pipeline de transformation du point de vue

Antialiasing

Sur-échantillonnage
Echantillonnage multiple 









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

Suite : Textures

Les textures