Archives de l’auteur : Xavier

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 »

Lancement de Configurator3D

Laisser un commentaire

Afin d’éclaircir notre offre commercial, nous avons lancé une marqué dédiée uniquement au développement de configurateurs produits affichant une vue 3D en temps réel.

Le site internet est disponible ici : Configurateurs 3D

Ce lancement s’intègre dans notre stratégie de diversification SEO : il est plus facile de promouvoir plusieurs sites internet, chacun tablant sur des expressions spécialisées bien définies, que de promouvoir un seul site internet sur une multitude d’expressions de recherche.

Le site internet dispose d’une interface simple, 2D, mais intégrant des éléments Webgl. Pour les voir, cliquez et déplacez le curseur de la souris en bas à gauche et en haut à droite.

Site « au repos » :

Page après avoir bougé les éléments webgl :

 

 

frontoffice 3D pour wordpress

Laisser un commentaire

Nous avons créé une interface 3D pour un site vitrine ou un blog wordpress.

Les images d’arrière-plan, le contenu texte, le titre… sont tous facilement modifiables en passant par le backoffice wordpress. Les modèles sont également changeables.

Nous nous sommes basés sur Three.js, et nous avons également utilisé JQUERY et JQUERY-UI.

La démonstration est visible ici : Interface 3D pour wordpress

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