Archives de catégorie : javascript

WebGL Paris 2015

Laisser un commentaire

webglSquare

WebGL Paris est un événement ouvert à tous, gratuit, francophone et framework agnostic consacré au WebGL sous toutes ses formes. Il aura lieu à le Lundi 12 Octobre 2015 sur toute la journée au Centre de Conférences de Microsoft à Issy les Moulineaux.

Les inscriptions sont déjà ouvertes, et si vous souhaitez participer nous vous conseillons de réserver votre place (pour l’édition précédente nous avions dû clore les inscriptions 3 semaines avant le jour J à cause de la capacité de la salle). Toutes les bonnes volontés pour présenter, participer à l’organisation, à des ateliers sont les bienvenues.

Plus d’informations sont disponibles sur le site internet du meetup : site officiel de WebGL Paris

Le lien direct vers les inscriptions : S’inscrire à WebGL Paris

Le programme et les vidéos de l’édition 2014 : WebGL Paris 2014

De l’avenir radieux de WebGL

Laisser un commentaire

Cet article a été écrit en réponse à un récent article paru sur developpez.com : Le WebGL a t-il un avenir.

ça commence mal…

Le ton du titre suscite déjà le doute quant à la partialité de l’auteur.

WebGL est la spécification d’une bibliothèque graphique 3D au même niveau que OpenGL ou Direct3D. Celle-ci repose sur OpenGL ES 2.0 (la spécification pour l’embarqué de OpenGL) et permet de créer des pages Internet intégrant du contenu 3D. Ainsi, à l’aide de HTML 5 et du Javascript vous pouvez afficher un rendu accéléré par la carte graphique et bénéficiant donc de la puissance du GPU.

WebGL n’est pas une bibliothèque graphique 3D. La bibliothèque 3D utilisée par WebGL est OpenGL ES2.0, et parfois les appels vers cette bibliothèques sont transcrits en DirectX via Angle, notamment sous Windows. WebGL est un binding, soit une liaison entre Javascript et OpenGL ES2. Il permet simplement d’utiliser OpenGL ES via javascript.

WebGL permet d’aller bien plus loin qu’afficher du contenu 3D sur des pages internet. En effet depuis le VRML de l’eau a coulé sous les ponts. WebGL permet de créer des applications interactives 3D dans le navigateur : des jeux, des configurateurs 3D, des interfaces de navigation, de la réalité augmentée, …

A l’aide d’HTML5 et de javascript il est effectivement possible d’afficher du rendu accéléré par la carte graphique : sur un navigateur moderne tout est accéléré par le GPU. Mais WebGL ne fait pas partie du standard HTML5. HTML5 est un standard normalisé par le W3C, consortium industriel spécialisé dans le web, tandis que WebGL est spécifié par le Khronos Group, consortium industriel spécialisé dans l’accélération matérielle, et pas moins légitime que le précédent (même si son nom est moins hype et fait moins branché que le World Wide Web Consortium).

 

Le support

Actuellement, les principaux navigateurs présents sur le marché disposent du support de WebGL :

Firefox (6 juillet 2010)
Google Chrome(3 février 2011)
Safari (20 juillet 2011)
Opera (14 juin 2012)
Internet Explorer (17 octobre 2013).
les versions mobiles de Firefox, Opera et du navigateur de Blackberry supportent également WebGL.

L’information est plutôt approximative. Pour des statistiques détaillées des support il vaut mieux se fier à caniuse.com/webgl. Il est nécessaire de préciser que bien que Safari ai implémenté WebGL précocement, il a fallu attendre la version 8 du navigateur pour que WebGL soit activé par défaut (sortie après IE11 dont l’activation est par défaut). WebGL sera également compatible avec la version 8 d’iOS Safari, et il l’est déjà avec les dernières moutures d’IE mobile.

 

La sécurité

 On notera aussi le possible second frein lorsque des failles de sécurité critiques ont été découvertes dans le standard même, entraînant notamment la vive réaction de la communauté et de Microsoft.

Lors des débuts de WebGL, Microsoft tentait d’imposer sa technologie propriétaire, Silverlight, d’où sa réticence face à WebGL. Depuis Internet Explorer a rapidement comblé son retard, implémenté WebGL depuis la version 11 et Microsoft soutient également le développement du moteur BabylonJS. Deux failles de sécurité ont été découvertes dans la foulée de la sortie de Firefox 4 avec WebGL activé par défaut, et ont été très rapidement corrigées. L’une permettait de récupérer des images normalement accessibles via un login (on peut voler des photos de Facebook waouuh !), et l’autre permettait de récupérer des contenus des tampons vidéos, pour certains GPU avec des pilotes non sécurisés.

Actuellement, WebGL est désactivé (du moins avec Chrome) si les pilotes GPU ne présentent pas les impératifs de sécurité nécessaires (même s’ils seraient en mesure de faire tourner WebGL). Les seuls failles restantes permettent de faire planter certains navigateurs, comme on pourrait le faire en javascript/action script en jouant sur les boucles infinies et la saturation mémoire.

 

Le mouton noir du Khronos Group ?

Il ne faut pas non plus oublier que l’accélération graphique dans WebGL est disponible uniquement que si la carte graphique implémente correctement la spécification. Cela a aussi provoqué une certaine lenteur dans l’évolution du support d’OpenGL, notamment sous Linux où il était peu présent. Maintenant, nous pouvons dire que ces soucis sont globalement résolus.

Nous ne l’oublions pas. Les fabricants de cartes graphiques sont présents dans le Khronos Group (ATI, NVIDIA, AMD). WebGL nécessite pour eux de produire des drivers présentant des meilleurs impératifs de sécurité. Il s’agit d’un progrès. Depuis 2 ans n’importe que ordinateur, même le plus bas de gamme, est compatible WebGL sans avoir à réaliser de quelconque manipulation (changement de pilote, de paramètres du navigateur).

C’est totalement gratuit d’affirmer que WebGL a ralenti l’évolution d’OpenGL. OpenGL continue d’avancer, indépendamment de WebGL. OpenGL ES également. WebGL est basé sur OpenGL ES2, et OpenGL ES 3 est sorti. OpenGL est à la pointe, approximativement OpenGL ES suit OpenGL avec une dizaine d’années de retard, et WebGL suit OpenGL ES avec 2 ans de retard.

Sous Linux les problèmes proviennent souvent des fabricants de cartes graphiques qui livrent des pilotes peu aboutis pour ce système d’exploitation. Avec Nvidia il n’y a pas de problème, mais avec ATI l’installation des pilotes est parfois plus difficile.

 

WebGL a un avenir radieux !

Après un paragraphe louant le WebGL, l’auteur émets quelques objections :

WebGL a toutefois quelques limitations :

absence de tampon de sélection ;
absence de textures 3D ;
absence de geometry shader.

Ces trois fonctionnalités ne sont pas présentes dans OpenGL ES2.0 . Il est donc impossible qu’elles soient présentes dans WebGL. Le tampon de sélection peut tout de même être émulé pour faire du picking cheap.

L’auteur semble s’être abondamment inspiré de l’article Wikipédia sur WebGL. Les défauts reprochés sont les mêmes, et les petites imprécisions quant à sa compatibilité aussi.

 

 Finalement, il n’y a toujours pas d’application phare pour cette technologie. De plus, pour les jeux vidéo et les applications intensives le JavaScript et la surcouche apportée par le navigateur peut être aussi un facteur décisif et ainsi empêcher l’adoption de ce standard.

 

WebGL commence tout juste à avoir un taux de compatibilité sur desktop permettant d’envisager des applications commerciales (66% d’après http://caniuse.com/#feat=webgl ). Peu de développeurs sont actuellement formés à cette technologie, et les projets importants nécessitent encore du temps. Les décideurs sont souvent peu au courant de ce que permet cette technologie.

Les jeux vidéos et les applications intensives resteront évidemment natives. COD ou Solidworks ne passeront jamais dans le navigateur. Les joueurs et les ingénieurs CAO ont des machines puissantes, sont prêts à acheter les licences, à télécharger le produit. Ils recherchent la performance avant tout.

WebGL est uniquement un binding, et ne joue pas sur le même tableau que Unity qui propose un workflow de création 3D remarquable, et depuis peu il est possible d’exporter des applications Unity en WebGL. WebGL ne sera pas non plus aussi optimisé et contiendra moins de fonctionnalités que des technologies propriétaires et tournant sur un nombre limité de plateformes comme Metal.

Le Khronos Group est notamment constitué de développeurs de navigateurs : Google, la Fondation Mozilla, Opera, …, de concepteur de système d’exploitation: Apple, Canonical, … de fabricants de matériel : AMD, Nvidia, … et d’Universités parmi les plus reconnues. C’est compliqué et cela prend du temps de mettre tout le monde d’accord sur un standard. Et même si au final ce dernier à des défauts, sa portabilité est imbattable.

 

WebGL sera intéressant, voire incontournable pour :

  • le casual gaming,
  • les configurateurs produit,
  • les interfaces de navigation 3D (avec la prise en compte des NUI notamment),
  • de nouvelles expériences Web (ex : http://www.chromeexperiments.com/detail/graffiti-general/?f= ),
  • la recherche en algo 3D et les simulations (WebGL permet de partager le code très simplement, sans nécessiter d’OS/de librairie particuler ),
  • des applications dont on n’a pas encore l’idée !

En bref, c’est un grand OUI, WebGL a un avenir !

WebGL 1K demo

Laisser un commentaire

fnacap6

WebGL est réputé pour être lourd à mettre en oeuvre. Effectivement développer un simple cube tournant coloré nécessite beaucoup de lignes de code.

Mais pour jouer avec les mathématiques et calculer la couleur des pixels parallèlement, dans le but de créer des visualisations sympathiques, webGL peut s’avérer imbattable.

Pour preuve, une démo WebGL de 1024 caractères, soit 1KO :

<body style=’margin:0‘ onload= »m=’;varying float x,y;void main(void){‘,w=window,c=document.getElementById(‘c’);k=c.getContext(‘webgl’);r=k.createBuffer;y=c.width=w.innerWidth,z=c.height=w.innerHeight;f=k.createProgram(),x=function(o,l){n=k.createShader(l);k.shaderSource(n,o);k.compileShader(n);k.attachShader(f,n);return n};x(‘attribute vec2 p’+m+’x=p.x;y=p.y;gl_Position=vec4(p,0.,1.);}’,35633),x(‘precision lowp float;uniform float t’+m+’gl_FragColor=vec4(mod(floor(t-x*pow(x*x+y*y,-1.5))+floor(t-y*pow(x*x+y*y,-1.5)),2.)+vec3(0.,.4,.8), 1.);}’,35632);k.linkProgram(f);j=k.getUniformLocation(f,’t’);b=k.getAttribLocation(f,’p’),k.enableVertexAttribArray(b);k.useProgram(f);q=function(n,p){v=k.createBuffer();k.bindBuffer(p,v);k.bufferData(p,n,35044)};q(new Float32Array([-1,-1,1,-1,1,1,-1,1]),34962);q(new Uint16Array([0,3,1,2]),34963);k.viewport(0,0,y,z);d=function(l){k.clear(16384);k.uniform1f(j,l*.001);k.vertexAttribPointer(b,2,5126,0,8,0);k.drawElements(5,4,5123,0);w.requestAnimationFrame(d)};d()« ><canvas id=’c‘/>

Je me suis permis le luxe de placer des balises HTML, et de les compter dans le total. Je n’utilise pas les balises <!DOCTYPE html>, <html>, je ne précise pas l’encodage des caractères et je ne ferme pas les balises <body>, <html>. Je n’utilise pas de var pour déclarer les variables et j’oublie volontairement GL.flush() à la fin de la boucle de rendu. La déclaration du code dans la propriété onload de la balise body n’est pas chaleureusement conseillée par le W3C. Mais les navigateurs modernes sont très tolérants,  alors il faut en profiter !

La démo est entièrement codée en caractères texte normaux. En effet, je considère qu’utiliser des jeux de caractères étendus/compresser tout le code de façon plus qu’incompréhensible n’est pas fair play.

La démo est accessible à partir du site de Webgl Academy : Démo Webgl 1K

 

WebGL Academy – Enjoy learning WebGL :D

Laisser un commentaire

WebGL Academy est un IDE simplifié permettant d’apprendre les bases de la programmation 3D avec WebGL. Les cours y sont présentés de façon progressive, pas à pas, et accompagnés d’exercices permettant de bien s’approprier le code.

WebGL Academy : apprendre le WebGL avec des tutoriels intéractifs

Les exemples sont totalement framework agnostic : aucune librairie extérieure, même de calcul matriciel ou JQuery, n’est utilisée. Cette année je vais l’utiliser auprès de mes étudiants en préambule à mes cours/TD sur la programmation 3D avec WebGL . Les étudiants commencent avec WebGL Academy, sans se soucier de l’IDE, avec un code très simple mais peu structuré, puis basculent sur Netbeans/TD en méthode copy&paste.

Au niveau technique, WebGL Academy utilise Codemirror pour l’ éditeur de code (que j’ai modifié légèrement 😉 ). Il prend en compte l’indentation automatique et la coloration syntaxique pour les langages suivants : HTML, Javascript, Python. Le projet peut-être exécuté soit dans l’IDE, soit en plein écran. Il peut également être téléchargé.

Les cours sont écris en utilisant une syntaxe XML. Exemple de cours.

Petite capture d’écran de l’interface :

Capture d'écran de l'interface de Webgl Academy

Capture d’écran du cours « modèle d’éclairage de Phong »

Talk à ParisJS

Laisser un commentaire

ParisJS est un meeting mensuel des développeurs javascript sur Paris. Pour le meeting du 30/01/2013 j’ai présenté un talk de 20 minutes sur une application permettant d’enregistrer au format webM une vidéo issue de la webcam de l’utilisateur, et de lui reproduire des effets colorimétriques réalisés avec un logiciel de retouche d’image tel The Gimp.

L’application utilise getUserMedia API pour récupérer le flux webcam, webgl pour le traiter, et Whammy.js pour l’enregistrer. Elle est disponible ici : Filtre coloré vidéo avec webgl . Les slides de la présentation sont ici : Slides sur le talk ParisJS .

Les slides ont été réalisés avec reveal.js . J’y ai ajouté une petite fonctionnalité permettant de rajouter aisément des slides contenant une iframe, de telle sorte que le contenu de l’iframe soit chargé lors du passage de la slide et déchargé lorsque l’on passe à la slide suivante. Cela évite de charger trop d’iframes d’un coup, et donc de ralentir le navigateur.

Le code (démo + slides) est à télécharger ici : code source .