Archives par étiquette : demo webgl

Spacegoo Chess is Alive

Nous avions développé un jeu d’échecs en 3D avec vue webcam de l’adversaire en partenariat avec la Fondation Mozilla pour le salon de l’IETF de l’année dernière, qui se tenait à Paris.

Le jeu avait alors été développé pour Chrome 19, encore en version bêta. Puis il avait été porté pour une version spéciale de Firefox, créée pour le salon et intégrant le support Webrtc.

Google avait effectué des mises à jour cassantes dans le support webrtc, c’est pourquoi nous avons sorti une version compatible avec Chrome 22 il y a quelques mois. Malheureusement, il y a eu depuis encore des updates cassantes, faisant que le jeu ne fonctionnait plus. Je viens de le mettre à jour. Il fonctionne désormais avec la dernière version de Google Chrome (la 27).

Le jeu est disponible ici :

http://www.spacegoo.com/chess

La transmission des flux vidéos et audio est assurée en P2P via l’API webrtc, tandis que les données de contrôle sont transmises via AJAX et un simple serveur push PHP. Le rôle du serveur est très simple : il relaie les messages, sans contrôler les parties.

Si votre connexion est protégée par un firewall, il est possible que le jeu ne fonctionne pas. Dans ce cas vous pouvez toujours visionner la vidéo capture d’écran ci-dessous 😉

Webgl/Webrtc CHESS
Runtime
6:29
Compteur de vues
6,582

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 .

 

Nouveau look pour Spacegoo.com

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.

Spacegoo webgl/webrtc Chess est maintenant en ligne

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

 

 

Floating News

html2canvas est une librairie javascript permettant de rendre du code HTML avec des CSS dans un canvas. Elle est disponible ici : http://html2canvas.hertzen.com/ .

Afin de prendre en main cette librairie, voici une petite démonstration développée en quelques heures. Elle affiche le contenu de Google News ( http://news.google.com ) avec un effet ondulant. C’est essentiellement un exercice de style, cet effet ne facilitant pas trop la lecture… Techniquement, le canvas contenant le rendu de la page est récupéré par webgl, qui rajoute l’effet d’ondulation via le Fragment shader. Le canvas webgl contient l’attribut CSS pointer-events: none , qui a pour effet de rediriger tous les évènements souris et clavier vers la page web originale toujours affichée derrière. Grâce à cette astuce, les liens hypertextes de la page fonctionnent toujours.

La démonstration est disponible ici : http://www.spacegoo.com/floatingNews

Vidéo capture d’écran :

Article introuvable