Archives de catégorie : Démos webgl

Spacegoo Chess is Alive

Laisser un commentaire

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,581

Configurateur de Zippo

Laisser un commentaire

Capture d’écran du configurateur de zippo

Voici une petite démonstration développée en une journée pour montrer le coup de pouce que peut apporter webgl dans le développement de configurateurs, notamment pour les objets gravés personnalisés.

Pour placer votre propre image sur le zippo, vous devez l’uploader en cliquant sur parcourir en haut à droite. Vous pouvez ensuite jouer sur son échelle via le slider, ou la déplacer sur la zone de gravure.

L’image est convertie en niveau de gris, ce qui constitue une heightmap. Puis en utilisant des shaders adéquats la heightmap produit une normal map et une texture d’ambient occlusion, via un algorithme de SSAO (Screen Space Ambient Occlusion) simplifié. Le résultat est un rendu de gravure assez réaliste.

La démo est ici : configurateur de zippo 3D

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 .

 

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.

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