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 .

 

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

Laisser un commentaire

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.

Nouveau look pour Spacegoo.com

Laisser un commentaire

Spacegoo a maintenant une interface entièrement en 3D. L’arrière plan est constitué par une sphère invisible portant des captures d’écran cliquables de nos applications de démonstration.

Le site internet est full javascript, et aucune version de fallback n’a été prévue : nous estimons que le taux de compatibilité du webgl est maintenant suffisant pour ne rien prévoir pour les non-compatibles. Ce dernier ne fait qu’augmenter, et il est maximal pour les utilisateurs de Google Chrome.

Démineur multijoueurs

Laisser un commentaire

Voici un démineur multi-joueur que nous avions développé il y a plus d’un an et demi. Il n’utilise pas le webgl, mais seulement l’élément canvas d’HTML5 muni d’un contexte 2D. L’application a été testée avec Chrome.

La partie réseau est gérée avec les websockets et utilise un serveur NodeJS, vieux pentium 4 hébergé dans nos locaux (nous sommes désolés s’il y a d’éventuelles ruptures de service 😉 ). Au cas où personne n’est connecté, des bots peuvent intervenir, avec plus ou moins de dextérité.

L’application est disponible ici : http://www.spacegoo.com/demineur

Spacegoo webgl/webrtc Chess est maintenant en ligne

Laisser un commentaire

En Mars 2012 nous avions développé un jeu d’échecs en 3D avec vue webcam de l’adversaire, utilisant les technologies webgl pour la 3D, getUserMedia API pour la récupération de l’image webcam et webRTC pour la transmettre n P2P entre les joueurs.

L’article sur la démo est ici

Cette application avait été développée en partenariat avec la Mozilla Fundation, et présentée lors du 83° meeting de l’IETF à Paris afin de promouvoir la technologie webRTC.

Lien vers l’article sur Mozilla Hacks

L’intégration de la technologie webRTC a été particulièrement rapide sur Chrome. Les versions stables actuelles l’intègrent parfaitement. Nous avons modifié l’application afin de la mettre en ligne. Voici les fonctionnalités rajoutées :

  • Légères améliorations du design (sol bleu, éclairage, correction de bugs),
  • Intégration d’ICE pour la traversée des NAT
  • Remplacement du serveur utilisé pour la mise en relation entre les joueurs et l’envoi des données de jeu (avant c’était un programme spécifique, indéployable sur notre serveur, et maintenant c’est un script PHP utilisant AJAX et un protocole ACK à fenêtre coulissante).

L’application ayant été développée très rapidement (moins d’une semaine), il est possible qu’elle ne soit pas entièrement déboguée.

Elle est disponible ici : http://www.spacegoo.com/chess

Une vidéo capture d’écran de l’ancienne version est ici : http://www.youtube.com/watch?v=aK1DC2zp6ZE