Archives par étiquette : présentation 3d

Lifting pour Spacegoo.com

Spacegoo.com reste la principale source de clientèle de Spacegoo. En effet, le site internet est plutôt bien positionné pour les requêtes de recherche concernant le WebGL. Ce positionnement s’explique principalement d’une part par l’ancienneté de Spacegoo.com, positionné sur le WebGL depuis sa création début 2011, et d’autre part par un bon pagerank et beaucoup de liens retour grâce à nos démonstrations.

En ce qui concerne les autres leviers de l’optimisation SEO, nous n’avons pas eu besoin d’y faire recours. L’interface actuelle de Spacegoo est peu compréhensible par les bots des moteurs de recherche, et il n’y a pas de version de fallback au cas où le visiteur n’est pas compatible WebGL. Déjà que les bots des moteurs de recherche ont du mal avec Javascript, alors leur demander de comprendre le WebGL…

Et quant aux campagnes de publicité, google adwords, efforts commerciaux divers, nous n’y avons pas recours. Nous sommes pour l’instant dans le B2B. Nos clients veulent des applications de qualité, mixant WebGL avec d’autres technologies web de pointe (WebRTC, WebAudio, …), et ils ont déjà fait leur choix technologique.

Bien que le design ne soit pas notre métier (notre métier est la programmation), nous avons effectué un petit lifting pour Spacegoo.com. La comparaison en images :

ancienne version :

Lancement de Configurator3D

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

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

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

 

PARIS BUBBLES

Le développement de cette démonstration webgl nous a fait revenir à l’objet initial qui nous a lancé dans la création de SPACEGOO, à savoir l’affichage de contenus multimédia, typiquement 2D, dans un contexte 3D. Ici le contexte 3D permet une expérience de navigation plus douce, qui n’est pas hachée par les clics sur les liens hypertextes.

Le contraste entre la 2D et la 3D créé un effet intéressant, et met en valeur le contenu 2D par effet de perspective. Cette mise en valeur est enrichie par les transitions entre la couleur et le noir et blanc.

Cette démonstration nous a pris 4 jours de développement à 2, et on est très satisfait du résultat produit. Par rapport à nos autres démonstrations nous introduisons des éléments nouveaux, notamment le positionnement d’éléments CSS en synchronisation avec la scène Webgl. Le déploiement du contenu est également innovant : au début il sort de la bulle où chaque contenu est emballé dans un carré, et ces carrés sont de tailles décroissantes et positionnés dans un rectangle dont le rapport hauteur/largeur vaut le nombre d’or ( vous trouverez plus d’informations sur cette disposition ici : http://en.wikipedia.org/wiki/Fibonacci_number ). Puis il se dispatche sur l’écran de sorte à ne pas trop se chevaucher.

Cette présentation rend particulièrement bien avec un écran tactile de grande taille.

Le lien vers la démo est ici : http://www.spacegoo.com/bubbles

Pour les non compatibles, voici la démo :

bubbles.ogv
Runtime
1:25
Compteur de vues
451