3D
  TDT3D 3D Design, Visualization & Realtime 3D & Visual effects
 


 
Registration !


   
 Focus
Interview with Tim Borgamnn

Interview with Tim Borgamnn

Makingof Escalator

Makingof Escalator by Lionel Verlinden - Autodesk 3ds max

Interview with SideFX / Houdini

Interview with SideFX / Houdini

Makingof Fuchsia

Makingof Fuchsia by Serge Birault

Makingof Spider

Makingof Spider by Adrien Lambert - Autodesk 3ds max

 Le WebGL ? Découvrez cette nouvelle technologie Web3D

Written by L. Goulois / B. Saint-Moulin
Date : 2011-06-10 08:48:00


       

Vous découvrez le WebGL ? Cet article n'a pas pour vocation de faire de vous des maitres du WebGL mais tout simplement vous faire découvrir cette nouvelle technologie et vous orienter pour y faire vos premiers pas... (si vous débuter en 3D temps réel nous vous conseillons de lire notre article : Qu'est la 3D temps réel?).

De nombreuses technologies 3D temps réel avec pour cible Internet (Le Web3D) sont apparurent ces 15 dernières années, hors aucune n'a encore  réussi à s'implémenter comme "standard" : Flash, Java3D, VRML, Cult3D, WireFusion, Nova, Shiva, Virtools,... toutes ces technologies prometteuses sont pourtant encore aujourd'hui réservées à des applications ou marchés de niches (quand elle n'ont pas été abandonée).

Le WebGL : La 3D temps réel sur Internet sans Plug-in ?

Pour simplifier la problématique de la 3D temps réel sur internet (Web3D), soit vous devez installer un Plug-in pour profiter d'une technologie Web3D et donc demander aux visiteurs / utilisateurs d'effectuer une manipulation supplémentaire (voir configurer le Plug-in) soit le résultat en terme de qualité d'affichage et performances reste très pauvre car l'accélération matériel n'est généralement pas supportée par les technologies dites "sans" Plug-in.

Vous comprenez mieux pourquoi la 3D temps réel sur le Web à du mal à sortir de sa bulle depuis 15 ans et que "Monsieur tout le monde" n'a pas spécialement envie d'installer des Plug-ins à chaque vistes d'un site utilisant une autre technologie 3D temps réel!

Avec l'arrivée du HTML 5 et la nouvelle génération de navigateurs, de nouvelles possibilités nous sont offertes, comme l'intégration de la vidéo, la musique,... et ce sans Plug-in supplémentaire, directement géré par votre navigateur et le code html. Il est donc maintenant possible d'intégrer de la 3D de qualité dans vos pages Internet, sans utilisation de Plug-in ou viewer supplémentaire et cela grâce au WebGL !

Le WebGL permettra-t-il enfin de s'affranchir de l'instalation de Plug-in et d'utiliser les ressources des cartes graphiques : Le meilleurs de deux mondes ?

Cette nouvelle technologie Web3D multi-plateforme dont on entend beaucoup parlé depuis l'arrivée de l'HTML 5 tend à devenir un des nouveaux standards du web3D avec les nouvelles versions des navigateurs comme : Chrome, Firefox, Safari, Opera,... qui le supporte en natif.

Note : le plus gros freins actuel à l'utilisation du WebGL reste l'incertitude de son support par Microsoft et son navigateur Microsoft Internet Explorer.

 

- Qu'est-ce que le WebGL et comment fonctionne-t-il?

Le WebGL est une API (Application Programming interface) graphique de bas niveau créée par le Khronos Group, elle regroupant des fonctions reliant le hardware de votre ordinateur (CPU, GPU ou périphériques) avec la partie logiciel (système d'exploitation, navigateur Internet).

Cette API est basée sur l'OpenGL ES 2.0 (une version portable de l'OpenGL), elle utilise deux standards : L'openGL (couche 3D) et le JavaScript (langage de script).

Elle est déjà utilisée dans de nombreux appareils, devices mobiles, surfaces tactiles, lecteurs multimédia, consoles de jeux avec la PSGL (une adaptation réalisée pour la Playstation 3 de Sony qui donne déjà une idée des capacités graphiques et 3D que l'on peut espérer tirer de cette API!).

Maintenant que vous savez que le WebGL permet d'afficher de la 3D sans Plug-in dans un navigateur, il faut réussir à faire communiquer cette API avec une page internet. Pour cela, le langage utilisé est le bien connu Javascript, il est simple, orienté objet et peut-être utilisé aussi bien côté client (utilisateur) que serveur. C'est avec la JavaScript que vous pourrez créer un Canvas (support) où sera affiché l'application WebGL et relier celle-ci à la librairie (API).

 

Pour démarrer en WebGL il vous faut :

  • Un navigateur compatible HTML 5
  • Une librairie regroupant les fonctions 3D

 

- Les Navigateurs ?

Si vous désirez consulter et afficher des contenus WebGL vous devez utiliser un navigateur Internet de dernière génération et supportant l'HTML 5. 

Tester votre navigateur pour la compatibilité WebGL

Note : n'oubliez pas que pour l'instant vos contenue WebGL ne pourront-être visible que part des personnes utilisants un navigateur HTML5 !

 

- Les librairies ?

Pour simplifier l'utilisation du WebGL, il existe des librairies qui sont en faite des codes déjà écrit (snippet) et que l'on peut appeler très simplement dans une application à l'aide du JavaScript.

L'une des principale fonction de ces librairies est la possibilité d'utiliser des formats 3D standards et donc la possibilité de créer des modèles 3D via un logiciel de modélisation 3D supportant l'un de ces formats. Certaines librairies utilisent le Collada, d'autre le VRML/X3D, ou bien encore le 3DS, etc.

 

Les librairies les plus connues sont

  • GLGE est une API javascript permettant d'accéder directement à OpenGL ES2, ainsi que l'utilisation de l'accélération matérielle des applications 2D/3D. Pour le moment GLGE supporte les exports directs depuis Blender, ainsi que le Collada.
     
  • CopperLicht est un SDK offrant la possibilité de réaliser des présentations WebGL sans devoir programmer en Javascrip. Créé par Ambiera, l'éditeur de Coppercube. Un autre de ses avantages est la quantité de formats 3D supportés : 3ds, obj, x, lwo, b3d, csm, dae, dmf, oct, irrmesh, ms3d, my3D, mesh, lmts, bsp, md2, stl...
     
  • C3DL est une bibliothèque JavaScript permettant d'écrire plus facilement les applications 3D WebGL. Il fournit un ensemble de mathématiques, la scène et les 3d classes d'objet qui rendent le WebGL plus accessible pour les développeurs qui souhaitent développer des contenus 3D dans un navigateur sans vouloir traiter en profondeur le calcul 3D nécessaire pour la faire fonctionner. Lisant les modèles 3D en Collada, il reste orienté programmation.
     
  • SceneJS est un framework JavaScript qui fournit une API flexible basée sur JSON (Java Script Object Notation), qui est à la base un format d'échange très léger. Ce langage basé sur le Java script est utilisé pour la définition, l'interrogation et la manipulation de scènes 3D WebGL. Le projet a été lancé par Lindsay Kay, maintenant il a des contributeurs et l'aide d'un groupe diversifié d'experts au sein du Groupe SceneJS Google.
  • SpiderGL est une bibliothèque Java script graphique 3D qui repose sur WebGL pour le rendu en temps réel. Il fournit des structures typiques et des algorithmes en temps réel pour permettre aux développeurs d'application web 3D, de créer leur application sans   qu'il ne soit obligé d'utilisé un scenegraphe, ni empêcher l'accès aux couches bas niveau.
     
  • X3Dom est une librairie open source expérimentale, soutenant le W3C et le WEB3D dans l'intégration de la 3D dans le HTML5. Basé sur le langage VRML/X3D, couplé à du java script et de l'OpenGL ES, il est assez simple à prendre en main, de plus il existe un moyen d'utiliser les export de Blender, 3DS, Maya ou encore WoW, mais aussi de convertir directement les fichiers VRML ou X3D.
     
  • Threejs, l'objectif de ce projet est de créer un moteur 3D léger avec un très faible niveau d'abstraction. Le moteur peut faire un rendu canvas, svg et WebGL.
     
  • PhiloGL est un framework WebGL permettant la visualisation des données, de codification et de développement de jeux.

Pour l'instant il est difficile de dire parmi les librairies citées ci-dessus la quel est la plus adaptée ou la plus facile à utiliser, les librairies sont encore jeunes, tout dépendra de votre feeling avec l'une d'entre-elle et de son utilisation / finalité.

Ce que nous pouvons dire avec certitude c'est qu'une connaissance minimal du JavaScript et de l'HTML est plus que recommandée pour bien débuter avec le WebGL.

Note : Il y a quand même une solution pour les graphiste non programmeurs : CopperCube, en effet cet éditeur d'applications 3D temps réel permet de créer des applications HTML 5 supportant le WebGL sans devoir aligner une ligne de code, c'est clairement la solution à tester si le mot programmation ou scripting vous fait peur :)

 

- Que peut-on espérer du WebGL?

La première des choses est que ce format s'impose comme standard ! Après tout est imaginable, il n'y a qu'à voir les démonstrations présentées par le Chrome WebGL Experiments pour se dire que d'un point de vue graphique et performance cela ne présage que du bon.

Au niveau d'un futur standard pour le Web3D rien n'est joué, le WebGL va clairement empiéter sur le domaine de Adobe Flash 3D (qui depuis son ouverture à l'accélaration matériel devient un concurrent très sérieux au WebGL), ainsi que les solutions proposant de la 3D en ligne avec Plug-in. Seul des technologies offrant des solutions nettement supérieures (3Dvia, Unity, Shiva,...), que ce soit au niveau rendu ou possibilités, seront les moins touchés.

Du coté de son utilisation, cette technologie peut faciliter les problèmes de compatibilités et éviter l'installation d'un Plug-in. Plusieurs types d'applications devraient être récupérées par le WebGL : Les visites virtuelles sur Internet, les jeux en ligne, les présentations multimédias sur surfaces tactiles, les petites applications pour téléphonie mobile etc.

Pour résumer si vous désirez réaliser une page Internet avec un contenu 3D temps réel en WebGL, vous devez choisir une API (voir librairies), un navigateur qui support l'HTML 5 (voir ci-dessus) et connaitre un minimum de programmation HTML et Javascript.

Voilà qui clôture notre article sur la découverte du WebGL :)

 

- Quelques sites et références?

 Venez discuter du WebGL sur notre forum dédié

Making-of Dynamo Making-of Still Life Timbre en réalité augmentée Les outils de plantes 3D ? Comparatif Terragen Vs. Vue

Copyrights :

Laurent Goulois / Benoît Saint-Moulin
All datas, screen captures, pictures, trademarks, logos,...is copyrighted by their respective owners.


TDT3D 3D Design, Visualization & Realtime  About Informations Navigation Related My account
TDT3D is a magazine and a community of 45218 Members recognized worldwide dedicated to CGI artists.

Our lines of force are 3D, computer art, architecture, digital nature, design and 3D/VR interactive.

©2017 TDT3D - All rights reserved.

Made in Belgium
Who? What?
Advertising
Social network
Legal and privacy
Partners
Contact
Home
News
Featured CG!
Features
Gallery
Videos
Tutorials
Forums
Downloads
Links
1D Café
3D Saloon
ARTkm
Coworking Namur
HEAJ
Incubhacker
Kob-one
TDT3D pro
ZBrush-Fr
Login
Registration !
Forget your ID ?
Online (161 / 0):