WebGL. ⢠Web Graphics Library. ⢠Get.webgl.org. ⢠Chrome, firefox,. safari,. ⢠internet explorer. Page 4 of 29.
Rendu 3D interactif introduction
Rendu 3D interactif • On peut jouer et changer ce qui se passe • On modifie le contenus 3D en temps réel • On peut utiliser le matériel graphique pour accélérer les résultats
Quiz • Lequel de ces exemples est un rendu 3D interactif? – Les jeux vidéos ‘call of duty’ et ‘world of warcraft’ – Les films de ‘toy stor’ et ‘ace age’ – Enregister une image médicale 3D depuis IRM – Les jeux mobiles ‘angry bird’ et ‘pacman’
WebGL • Web Graphics Library • Get.webgl.org • Chrome, firefox, safari, • internet explorer
Idée de base • • • • •
Taux de rafraichissement Œil, modèle caméra sténopé, champs de vue Lumière: physique et virtuelle La chaine des traitements graphiques Algorithme du Peintre et Z-buffer
Interactivité et FPS • Au moins 6 frames par secondes • Démo – Le nombre de FPS élevé demande une carte graphique puissante – 6 FPS est bon mais pas assez – 30 jusqu’à 60hz est conseillé – Dans l’industrie des film on as 24 fps
Cycles du processeur • Pour un taux de 50 hz, nous avons : • 1000 milli secondes / 50 = 20 ms par frame • Pour 2.8 Ghz de fréquence = 2.8*109 * 20 ms = 56,000,000 cycles / 1,000,000 pixels = 56 cycle par pixel par frame
Notre œil et le modèle sténopé
Voir pour croire • A plus foncé ? • B plus foncé ? • A et B sont de même intensité ? • Notre système visuel est truqué pour bien voir
Œil Vs Caméra • Cocher la case incorrecte: – La précision de l’œil change avec la lentille – La lumière trop blanche peut nous éblouir – Nous pouvons changer ce que notre œil se concentre dessus – Nous pouvons voir des images seulement de bas en haut et non pas des image renversées
Le champ de vue (view frustum)
Scène 3D • Composée d’un ensemble d’objets 3D – Avec plusieurs sources de lumière – Avec différents matériaux et apparences – Avec une/des caméra(s) pour filmer la scène – Avec des animations différentes
• exemple
Combien de pixels par seconde • Longueur = 1920 • Hauteur = 1200 • Fréquence = 60 Hz 138240000 pixels Nombre énorme
Quantité de lumière • 10 sources de lumière de 40 watt • Chacune donnant 1019 photons par seconde • Nous avons 1 billion (109) PC dans le monde • Chacun calcule 106 photons par seconde • 1 fois les PC de la terre • Combien avons-nous besoin de • 10 fois les PC de la terre PC? • 100,000 fois les PC de la terre • 10, 000, 000 fois idem
Processus inverse de lumière • On utilise les objets touché par la lumière comme source • Débuter depuis caméra • Faire la somme des réflections • Pas d’ombres calculés
Le pot de thé (Theapot) • Martin Newell • 1975 par courbes de Bézier • Utilisé surtout dans les voutures (précision) • Le modèle original ne contient pas de base • Le modèle a été aplatit avec les évolutions • Le symbole des graphiques 3D
Les matériaux simples • Plastique , métal, bois, verre, … • Lequel est plus facile à afficher/calculer? • Penser à ceux qui ne requièrent pas l’intervention d’autre objets.
Graphics Processing Unit (GPU) Chaine des traitements: 1. Application: envoie des objects (ensemble de triangles 3D) 2. caméra + transformation géométrique 3. rastérisation
Traitement en parallèle • • • •
Exemple simplifié: Usine de collage de papier Travail à la chaine en parallèle Un boitier prend 30 secondes pour finir Le taux de sortie des boiter est : ?
Parallélisme • Les GPU ont plusieurs chaines de traitement parallèles • Dans la chaine suivante, un Object prend 6 ns pour se terminer. • Le taux de sortie des boiterblocage est : ? soif • Goulot d’étranglement.
Algorithme du peintre • Dessiner chaque objet en dessus de l’autre • Tel un peintre • Il a une limite ca il y a des scènes qui ne peuvent pas recevoir ce traitement. Laquelle?
Solution: Z-Buffer • Distance depuis la caméra de chaque pixel • De 0.0 à 1.0 pour chaque pixel (en plus de sa couleur) • Buffer: matrice de stockage • On affiche la couleur qui est relative à la plus petite distance du Z-Buffer du pixel
Optimisation du Z-buffer Sachant que: Si pas le bon choix 3 cycles: • 1 cycle pour lire le Z-Buffer • 1 cycle écrire le Z-buffer • 1 cycle pour écrire la couleur
• Dessiner les objets de devant vers l’arrière • Dessiner les objets de l’arrière vers l’avant • Dessiner les objets de manière aléatoire pour éviter le cas pire • Dessiner les objets du plus grand vers le plus petit
WebGL et three.js • Applicaiton Programming Interface (API) • WebGL OpenGL ES OpenGL • Three.js permet de faciliter l’animation, la création d’objet et la programmation à travers quelques lignes de code.
Les scènes mystérieuses • C’est quoi le problème avec ces scènes? • #1 affiche en ordre fixe et #2 en avant vers arrière • #1 affiche en avant vers arrière et #2 depuis l’arrière vers l’avant • #1 affiche en avant vers arrière et #2 en en ordre fixe • #1 affiche en ordre fixe et #2 2 depuis l’arrière vers l’avant
Quiz – Algo. Du peintre
Quiz – facilité de Rendu
Extra: Impression 3D • Les imprimantes varient : – Haute Résolution + basse vitesse + haut prix ~+7000 euro VS – Basse Résolution + haute vitesse + bas prix ~-700 euro
• Tendance future à converger
Tunisie: Impression 3D sur commande • www.3dhubs.com – Impression à Tunis, Sfax et Djerba
