Archives de catégorie : le WebGL

La technologie webGL, binding d’openGL ES pour Javascript

Moteur physique sur GPU basé sur le Cubemapping

Habituellement les moteurs physique WebGL ( ce qui empêche le joueur de passer à travers le décor ) tournent sur le CPU (Central Processing Unit) et non sur le GPU (Graphic Processing Unit).

Dans les applications compilées, la physique peut être calculée sur GPU, soit en utilisant des shaders comme le geometry shader auxquels on n’a pas accès en WebGL, soit en utilisant des fonctionnalités matérielles spécifiques, comme PhysX pour les carte graphiques Nvidia. Mais pour les applications WebGL, la physique est ramenée à des collisions sphère/octree calculées sur CPU.

L’octree (arbre contenant toutes les faces de la scène) est soit pré-calculé et inclus dans les données, soit calculé lors du chargement de la scène. Dans tous les cas, il alourdit le chargement. Quant au moteur physique en Javascript, il requiert beaucoup de calculs de collisions pour chaque image générée.

Je détaille le fonctionnement d’un tel moteur physique dans mon ouvrage WebGL : Guide de programmation d’applications web 3D.

Je présente ici une façon très différentes de calculer la physique. Elle ne nécessite ni de calcul d’octree, ni de calcul d’intersections sur CPU via des méthodes dérivées de l’utilisation des coordonnées de Plücker et du théorême de l’axe séparateur. Presque tout est effectué sur le GPU.

Capture d’écran de la démonstration :

Capture d'écran de la démonstration du moteur physique basé sur le cubemapping

Capture d’écran de la démonstration disponible sur http://spacegoo.com/publis/cubemapPhysics/implementation

Cliquez ici pour lire la publication détaillant le fonctionnement de l’algorithme (en anglais)

Cliquez ici pour jouer à la démonstration (utilisez les flèches du pavé directionnel du clavier pour vous déplacer, et la barre d’espace pour sauter),

Cliquez ici pour télécharger le code source de la démonstration

Cet algorithme est intéressant à implémenter pour des applications où la physique se résume à des collisions personnage/décor. S’il y a de nombreuses interactions physiques à calculer (interactions objet-objet notamment), il vaudra mieux passer par des algorithmes plus classiques basés sur l’utilisation d’octree.

WebGL Academy – Enjoy learning WebGL :D

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

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 .

 

WebGL : Guide de développement d’applications web 3D

Webgl livre
Webgl : guide de développement d’application web 3D sera disponible dès Janvier 2013 en librairie, et sera aussi commercialisé en version électronique. Il concentre notre savoir faire dans le développement webgl. Plus de détails ainsi qu’un résumé de l’ouvrage sont disponibles sur le site internet des éditions ENI.

Nouvelle démo webgl : Dark sea

Nous avons programmé une nouvelle démo vous permettant de noyer un site internet de votre choix.
Le site présent au démarrage est un miroir de madchat.org, site fermé en 2006, qui était un repository connu du milieu hacker francophone.

Cliquez ici pour afficher la démo

Vous devez avoir un navigateur récent tel Chrome ou Firefox4 ou + pour afficher cette démonstration, ainsi que des pilotes graphiques à jour.
Si votre ordinateur n’a pas de carte graphique dédiée, il se peut que la démo soit assez lente à cause des opérations de composition entre l’iframe restituant le site internet et la scène webgl.

En cas de non compatibilité, voici la vidéo :