Introduction à WebGL - igm.univ-mlv.frigm.univ-mlv.fr/~dr/XPOSE2012/Introduction au WebGL/[GL][IG3]Expose... · SOMMAIRE Informatique et Géomatique 1ère année Présentation de

Introduction à

WebGL

Contexte

Informatique et Géomatique 3ème

année

Cadre : Enseignement en troisième année

d’Informatique et Géomatique

Technologie d’avenir pour faire de la 3D

BARAT MARC IGEO3 2013-02-13 2 /

SOMMAIRE

Informatique et Géomatique 1ère année

Présentation de WebGL

Définition

Référentiels

Architecture

Textures

Eclairage/Lightmapping/Ombrage

Evènements

Moteur Physique

Framework Three.js

Avantages et Inconvénients de WebGL face à la concurrence

Démonstration

Informatique et Géomatique 3ème

année

BARAT MARC IGEO3 2013-02-13 3 /

Présentation de WebGL

BARAT MARC IGEO3 2013-02-13 4 /

Qu’est-ce que WebGL?

Informatique et Géomatique 1ère année

Technologie Web 3D OpenSource

BARAT MARC IGEO3 2013-02-13 5 /

A l’origine le Khronos Group consortium de multinationales des multimédias pour

créer un standard ouvert de lecture contenu multimédia riche

Nvidia, ATI, Sun…

Spécification d ’affichage 3D pour navigateurs Web

Google Chrome version 9+

Mozilla Firefox version 4+

Safari avec menu développement activé (désactivé par défaut)

Pas Internet Explorer!

Utilise les pilotes OpenGL de la carte graphique

A travers le code Javascript d’une page Web

Contexte GL

Qu’est-ce que WebGL?

BARAT MARC IGEO3 2013-02-13 6 /

1) L’utilisateur appelle la page

2)Le serveur envoie la page avec le code JavaScript

3) Le navigateur interprète le JavaScript côté client et fait appel aux pilotes OpenGL du système

4)Le navigateur affiche le contenu WebGL dynamiquement à l’utilisateur

Les référentiels

Informatique et Géomatique 1ère année

3 référentiels

BARAT MARC IGEO3 2013-02-13 7 /

Qu’est-ce que WebGL?

Informatique et Géomatique 1ère année

Pipeline WebGL

BARAT MARC IGEO3 2013-02-13 8 /

Qu’est-ce que WebGL?

Informatique et Géomatique 1ère année

WorkFlow WebGL

BARAT MARC IGEO3 2013-02-13 9 /

Textures

BARAT MARC IGEO3 2013-02-13 10 /

Image appliquée sur un maillage

Sources multiples

Pas de texture 3D

Côtés doivent être des puissances de 2!

Mipmapping

Textures

Informatique et Géomatique 1ère année UV Mapping vs Tiling

BARAT MARC IGEO3 2013-02-13 11 /

MipMapping

Informatique et Géomatique 1ère année Cinématique

BARAT MARC IGEO3 2013-02-13 12 /

Eclairage

BARAT MARC IGEO3 2013-02-13 13 /

Un coefficient I

Modèle classique : éclairage de Phong

3 types d’éclairage :

Ambiant

Diffus

Spéculaire

Lightmapping

BARAT MARC IGEO3 2013-02-13 14 /

Idéal pour des objets statiques avec des sources lumineuses statiques

Eclairage précalculé dans un logiciel de modélisation 3D (comme Blender) et stocké

dans une texture

Peut être combiné avec d’autres techniques d’éclairage comme Phong

Ombrage

BARAT MARC IGEO3 2013-02-13 15 /

Différentes techniques :

Ombrage trivial

Ombrage projeté

Shadowmapping

Très coûteux mais utile pour le réalisme de la scène

Le plus utilisé : Shadowmapping

Shadowmapping

BARAT MARC IGEO3 2013-02-13 16 /

BARAT MARC IGEO3 2013-02-13 17 /

Effets d’acnée

Aliasing

Shadowmapping

Evènements

BARAT MARC IGEO3 2013-02-13 18 /

Evènements clavier, souris

Redimensionnement de la fenêtre

Plusieurs API pour la gestion de la souris

Pointer Lock API (Comme un FPS)

Autres périphériques (GAMEPAD API, Kinect,

Ecrans Tactiles)

Moteur Physique

BARAT MARC IGEO3 2013-02-13 19 /

Gestion des collisions entre objets

Stucture de données : Octree

Technique du picking : sélection d’un objet à partir d’un pixel du rendu

Three.js

BARAT MARC IGEO3 2013-02-13 20 /

Librairie JavaScript à intégrer au contenu

HTML

Gère tout ce qu’on a vu précédemment de

manière simple

Framework facile à prendre en main

www.thalesgroup.com

Avantages /Inconvénients de

WebGL

BARAT MARC IGEO3 2013-02-13 21 /

Points forts

BARAT MARC IGEO3 2013-02-13 22 /

Pas de Plugin

HTML5

3D

Sécurité

BARAT MARC IGEO3 2013-02-13 23 /

Technologie critiquée et non supportée par Microsoft

« Source permanente de vulnérabilités très difficiles à corriger »

Réponse de la fondation Mozilla

Même problème dans Silverlight et Molehill(Flash)

« Tout ajout de nouvelles fonctionnalités à une pile logicielle expose les

parties existantes aux contenus potentiellement hostiles, un passage

obligatoire qu'ont dû endurer selon lui les « moteurs des polices de

caractères, les codecs vidéo, les bibliothèques [de rendus] des images... »

Sécurité

BARAT MARC IGEO3 2013-02-13 24 /

Limitations

BARAT MARC IGEO3 2013-02-13 25 /

Compatibilité

JavaScript (pour faire plaisir à Mr Revuz!)

Technologie gourmande

OpenGL Lite

Comparatif

BARAT MARC IGEO3 2013-02-13 26 /

WebGL Silverlight Flash

Licence Standard, open-source

Propriétaire mais une partie sur CodePlex

Propriétaire

Support OS Tous Windows , Mac Tous sauf iOS

Support Navigateurs Manque IE Tous Tous

Communauté + +++ +++

API Faible mais évolue Très riche Très Riche

3D Au cœur de la conception

Performante mais pas prioritaire

Le plus populaire

Sécurité Conception Dangereuse à voir dans le futur

Peu de failles importantes

Failles importantes

Performances +++ ++ ++

Facilité d’utilisation Sans plugin Plugin Plugin

www.thalesgroup.com

Démonstration

BARAT MARC IGEO3 2013-02-13 27 /

Webographie

BARAT MARC IGEO3 2013-02-13 28 /

• Spécifications officielles :

• http://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf

• Site de l’enseignant à l’ESIPE :

• http://www.spacegoo.com/

• Apprendre le WebGL :

• http://learningwebgl.com

QUESTIONS

?

BARAT MARC IGEO3 2013-02-13 29 /