Canvas 3D et WebGL Louis Giraud et Laetitia Montagny Université Lyon 1 9 Avril 2013 1
Présentation du sujet Introduction Présentation du sujet Problématique : Représenter de la 3D dans le navigateur sans installation de plug-in Solution : WebGL : un standard pour la programmation en 3D sur navigateur WebGL est soutenue par de nombreuses compagnies 2
WebGL et Canvas3D Introduction Présentation du sujet WebGL : Web (Open) Graphics Library Spécication d'achage 3D dénie par le Khronos Group Basée sur la spécication OpenGL ES Canvas3D Librairie Javascript visant à simplier la conception d'applications 3D utilisant WebGL 3
Exemples WebGL Introduction Présentation du sujet http://www.zygotebody.com/ 4
Introduction Présentation du sujet Exemples WebGL http://www.spacegoo.com/bubbles/ 5 Louis Giraud et Laetitia Montagny Université Lyon 1 2012-2013
Installation de WebGL et Canvas3D Outils indispensables : 1 Navigateur compatible WebGL ( Chrome, Firefox, Opera... ) 2 Éditeur de texte Le reste se code en Javascript et s'ache dans un canvas HTML : <body> <canvas id="glcanvas" width="640" height="480"> Navigateur incompatible. </canvas> </body> 6
De WebGL à Canvas3D Tout le reste du traitement s'eectue en Javascript On peut parfaitement utiliser Canvas3D pour le projet complet Canvas 3D : http://www.c3dl.org/index.php/download/ Tutoriel WebGL par Mozilla : https://developer.mozilla.org/fr/docs/webgl/ 7
Utilisation de Canvas3D Premières étapes : 1 Récupération d'un modèle 3D 2 Initialisation du Canvas ( créé en HTML ) 3 Création d'une scène 4 Création d'un renderer 5 Ajout du renderer à la scène Code 8
Utilisation de Canvas3D Création du rendu : 1 Initialisation du modèle 3D 2 Ajout d'une vitesse de rotation au modèle 3 Ajout du modèle à la scène 4 Création d'une caméra 5 Paramétrage de la caméra (position, rotation) 6 Ajout de la caméra à la scène Code 9
Avantages/Inconvénients Inconvénients : Peu de projets pour le moment Mêmes limites que l'opengl ES Pas compatible avec Internet Explorer 10
Avantages/Inconvénients Avantages : WebGL ne requiert aucun plug-in supplémentaire Canvas3D facilite son utilisation Très puissant : Utilisation du GPU Supporté par des compagnies importantes 3D sur Navigateur : compatible Windows, Mac, Linux, Mobiles... On peut imaginer le futur du web avec des sites 3D apportant une expérience proche des applications natives 11
Section 4 12
Section 5 13