Chesscube est une interface en flex magnifique pour les amateurs de jeux d’échecs. Ce type de jeu est trop souvent réservé à un public de passionnés sur des interfaces en Java assez pauvres graphiquement mais cette interface donne vraiment envie de jouer. Un système de réputation, et de chat selon les pays permettent de se gérer son profil. Les différentes parties d’échecs (Blitz etc..) sont possibles avec des durées de jeu variables, avec un moteur de recherche très bien pensé, par niveau de joueur. Le site n’est pas avare de fonctionnalités et comblera aussi bien les habitués que les novices.

En premier, mon préféré de la semaine que je pique honteusement à écran.fr qui est Pencil rebel. Un superbe jeu qui a demandé un travail fou, pour un résultat à la hauteur !

Le site de BBH : j’aime beaucoup la simplicité et l’élégance du site, avec une très grande souplesse dans l’animation

Scozzese Design : Un portfolio qui combine deux axes pour la présentation des travaux. Elegant, quoiqu’un peu troublant

Whitevoid vient d’ajouter à Viewzi un onglet de visualisation en 3D à son moteur de recherche. Il combine les tags et les résultats en images. A voir aussi bien cet onglet que viewzi, toujours aussi intéressant, à l’ère du visual search

Lumina : gestion de panneaux en 3D gérés de manière assez complexe.

Spana vilnius : une superbe vidéo d’entrée de jeu. On peut encore regarder l’intégralité d’une intro sur un site internet.

Le site en flash que je n’ai pas aimé : http://www.lamberta.org/ : un effet superbe de déplacement des panneaux… mais : 1. ca fait mal aux yeux. 2. quelqu’un comprend la navigation ?

Je finis par une copie de navigation telle que l’avais développé whitevoid : chez O2

Je lisais dernièrement une interview à propos d’une solution de passage de site html en 3D, et l’un des arguments - hormis le côté ludique - était d’avoir un espace plus ‘ergonomique’… ergonomique, la 3D ? Lorsqu’un ergonome met à l’épreuve certaines navigations, le résultat n’est parfois pas bien brillant. Cela m’a donné envie de lister les différentes manières de naviguer (attention, pas de représenter) dans un espace en 3D dans un navigateur.

J’ai trié selon 4 critères les systèmes de navigation :

1/ La vue à la première personne = une caméra virtuelle qui se déplace
2/ La scène qui se déplace avec une caméra virtuelle fixe ou aimantée sur un objet
3/ La vue à la 3ème personne où l’on guide un avatar (l’utilisateur), avec une caméra qui suit celui-ci
4/ Les systèmes d’interactions : clic maintenu, utilisation de la roulette, de l’interaction dans un décor en 3D ou avec un menu traditionnel en 2D.

Dans quel espace en 3D j’évolue et pourquoi ?
Et finalement, cela peut se résumer en une question simple : suis-je moi-même la caméra qui évolue dans un contenu ou bien suis-je un acteur fixe qui manipule un objet dans l’espace ? Cette approche dépend aussi du type de contenu que l’on met en avant : s’il s’agit d’un décor complet, je vais guider ma vue comme une caméra, et s’il s’agit d’un ‘petit’ objet (un globe terrestre) je vais le manipuler, ma vue ne change pas. Je vais donc me déplacer dans un grand espace, mais je vais déplacer un petit objet. Il y a toujours des variations… puisque lorsque je regarde un objet dans la réalité, j’ai tendance à pencher la tête… donc déplacement léger de la caméra

Les navigations vont d’un statut passif pour l’utilisateur “je clique et je regarde l’animation” jusqu’à un statut pro-actif : “je clique, je déplace ma souris pour regarder, je cherche l’interaction avec l’objet”. C’est aussi un effort pour l’utilisateur, et l’on pourra se demander jusqu’où cet effort est envisageable.

Les 9 donc :

1 - Navigation grâce au clic sur des flèches dans l’espace
Sans doute la navigation la plus vieille et la plus évidente : l’utilisateur dispose de grandes flèches apparentes directement dans la scène. Il n’a qu’à cliquer dessus pour aller de droite ou de gauche, et changer la vue.
exemple : shopping life et certains panoramiques à 360°

2 - Navigation grâce au clic maintenu dans l’espace pour bouger la caméra
Description : Clic gauche maintenu : rotation autour d’un objet central. Clic droit maintenu : zoom sur l’objet. Deux clics en même temps maintenus : translation de la caméra en haut bas et gauche droite.

Elle correspond à la navigation classique d’une scène 3D… habituellement hors d’un navigateur. Les solutions 3D avec plugins l’utilisent beaucoup, héritage parfois des logiciels de création 3D, mais n’est-elle pas trop ardue à manipuler ?
Exemples : de manière générale, tous les systèmes de 3D par plugin dédié.

3 - Caméra virtuelle aimantée autour d’un objet cliquable (rotation)
Description : c’est sans doute l’une des mises dans l’espace la plus classique dans les sites en flash, qui a du s’inspirer de la navigation précédente en la simplifiant grâce à la prise en compte de la position de la souris dans l’espace. La mise en place technique est facile à réaliser et l’effet saisissant quoique limité.
exemple : L’exemple de la vache ou plus complexe Screenvader, Tiltviewer… etc…

4 - Vue à la 3ème personne et en 3D isométrique
Description : Navigation grâce au clic pointé pour aller là où l’on veut ou avec les flèches du clavier.
La caméra suit l’avatar. La vue rappelle les jeux vidéos, où elle a émergé dans Sim City, ou Populous il y a bien longtemps, la navigation suit ainsi les codes de jeux vidéos.
exemple : yoowalk ou smallworlds

5a - Un menu en 2D évident qui déclenche une animatique 3D
Un type de navigation très utilisé sur les sites en flash et qui permet de ne pas perdre trop l’utilisateur : un menu très clair, qui déclenche une animation ou une transition en 3D sans avoir de menu trop complexe avec des éléments à cliquer dans une perspective impossible.
exemple : Cristof Echard ou Galaxy ou MCBD

5b - L’interaction devient complexe et déclenche une animatique 3D : déplacement caméra + objets dans la scène
L’extension de la navigation précédente, on rajoute à cette navigation un déplacement des éléments en fonction de la position de la souris tout en intégrant dans l’espace des éléments de navigation cliquables. Cela donne un effet de mise en place d’éléments dans l’espace saisissant mais qui peut très vite perdre l’utilisateur dans les interactions possibles.
Exemple : UFC ou EMlab

6 - Parcours imposé de la caméra
Un peu plus difficile à saisir, la caméra qui suit un parcours imposé qui défile en fonction de la souris de la souris ou des éléments sur lesquels on clique. Reste à cliquer sur les éléments du décor.
Exemple : http://www.brinkdieckmann.de ou la campagne absolut Iaaw ou christian lacroix pour la redoute

7 - Changement de position de la caméra
Description : Dès que la caméra bouge en fonction des éléments sur lesquels on clique, le scénario devient plus complexe. Le clic sur le fond devient un moyen de revenir à la position de départ, c’est nouveau.
Exemple : tiltviewer ou Canon

8 - Le glissement pour faire bouger un objet - (caméra fixe + clic maintenu)
Description : à l’ère de la navigation tactile, le clic maintenu semble être une navigation intéressante et très pratique dans certains cas d’utilisation, même si elle ne fait pas parti des codes classiques de navigation. C’est l’inverse de la navigation en 2./ puisque la caméra ne bouge pas. Toutefois, le clic et le survol sont parfois nécessaires.
Exemples :ecodazoo ou twittearth , ou Taggalaxy

9 - Navigation au clavier qui déplace un objet ou la scène
Description : Utilisation des flèches du clavier pour évoluer dans un espace en 3D ou pour faire bouger un objet. Dans le cadre de la visite virtuelle, c’est le challenge le plus difficile à résoudre : comment naviguer autrement qu’au clavier, sans perdre complètement en lisibilité ? La souris reste nécessaire.
Exemples : Ecws.pl ou Playsmart

Finalement…
Là où les interfaces cherchent à standardiser leur comportement, la 3D dans flash provoque des bouleversements de navigation : compréhension du site, retours en arrières, objets réactifs…

Beaucoup utilisent une caméra fixe et déplacent des éléments dans l’espace. Le déplacement de la caméra reste peu utilisé au final, (certains exemples vont jusqu’à être incompréhensibles dans la navigation). Les types d’interaction se multiplient : on peut cliquer sur le fond d’une scène pour revenir au début de sa course (ce qui n’existait pas auparavant), utilisation de la molette, du rollover/clic maintenu et glissé (en html, cela était attribué à un drag & drop, du bouble clic, de la position de la souris… bref, autant de raisons d’avoir une navigation originale que brouillon !

Il est rare que je croise le pro et le perso à ce point mais j’ai laissé passer le calendrier et finalement, il se peut que publier ici l’annonce soit plus efficace qu’ailleurs…

Je recherche donc un stagiaire à partir du mois de septembre pour travailler sur le périmètre de L’atelier, cellule de veille technologique internationale que vous connaissez peut être au travers de l’émission de radio (attention, ce n’est pas une agence web!). Bref :

* Niveau : Bac +3 minimum
* Compétences requises : les bases du html/css, et du php, Flash surtout ! (animation et connaissances en prog, un tout petit peu d’AS3 serait idéal), montage vidéo (Premiere pro).
Et puis certains projets peuvent s’adapter en fonction de vos compétences (si vous faites de la 3D, que vous aimez rédiger des articles sur les nouvelles technos, que vous aimez les univers virtuels, ou n’importe quoi d’autre… héhé)
* Profil : Connaissance du web2 et de ses usages. Avant tout curieux et passionné (enfin, si vous lisez ce blog, cela se pourrait bien), autonome et aimant le travail en équipe.
* Rémunération : oui, dépend d’une grille, si je ne peux donner de salaire fixe ici, elle reste intéressante.
* Lieu : sur Paris, dans le quartier de l’Opéra.
* Durée : 6 mois.

Envoyez moi vos candidatures avec quelques lignes de motivation à :
galdric.pons (at) atelier.fr

Si vous avez des questions complémentaires, n’hésitez pas non plus à me contacter…

Petit retour sur l’actualité de Source Binder, qui est un outil de création de code visuel en temps réel. Cet outil n’inclut pas seulement les librairies 3D mais aussi la gestion de la wiimote ou une librairie de gestion de la physique. Dans le même genre, nous avions vu aussi Gnero.

J’en reparle puisque quelques démos sont apparues depuis, ce qui permet de tester un peu l’outil d’édition de code en temps réel. J’éprouve un malin plaisir à modifier visuellement sans le moindre effort une scène dont la construction s’additionne tristement en ligne de code colorée. Rapide démo vidéo, je vous invite à le tester vous-même pour en tester l’efficacité :

Source Binder demo from Galdric on Vimeo.

Edit : cela s’appelle de la synchronisation, ils viennent d’en parler ce matin sur le blog de papervision…

Pour rappel, Silverlight tout comme flash 9, ne dispose pas de moteur 3D ni de support de la carte graphique pour l’afficher, c’est le processeur qui fait tout le travail. D’où les limites techniques d’affichage en nombre d’éléments affichés à l’écran, sans parler de tout ce qui compose de la véritable 3D : gestion de la lumière, des shaders (bump, specular etc…), du nombre de polygones bien plus importants etc…

Dès la sortie de Silverlight 1, des essais en 3D ont commencé : essais en mise en place d’éléments dans l’espace ou modèle 3D. C’est avec la version 2 encore en beta que les choses ont l’air de s’accélérer. Certains travaillant sur des technos 3D travaillent d’arrache-pied dessus d’ailleurs et d’autres s’y intéressent fortement ou par ici. Quelques exemples en images au travers de deux projets sur CodePlex, Kit3d et Balder :

Kit3D par exemple est un outil intéressant puisqu’il dispose de quelques exemples (seulement la moitié a marché chez moi) marquants. Une autre démo à base de cubes texturés qui flottent dans l’espace. Cela ne vous rappelle rien ? Ces exemples rejoignent la montagne de travaux réalisés en flash à ses débuts en 3D. Reste du chemin à faire encore…

On parle de Balder, qui avait une bonne démo il y a quelques temps, même si on aimerait en voir un peu plus. Des objets importés, comme cette théière, un classique dans la 3D. Encore un peu gourmand. Il existe Polygraph3D également, un projet pour créer des graphiques en 3D. 3DEarth est tout aussi intéressant… si vous parvenez à le faire tourner.

En définitive, des essais prometteurs, une volonté de développeurs de doter Silverlight de 3D. Appuyons le fait que beaucoup de designers ont trouvé des parades aux limites d’affichage, et dès que la gestion de quelques panneaux dans l’espace a été possible, ils ont pu s’engouffrer dans la brèche. Nous revenons à une époque des vieux jeux vidéos sur consoles où toute les parades pour créer l’illusion étaient permises. Flash a pris une énorme avance pour l’instant. Toutefois, silverlight est encore un peu jeune, laissons lui le temps de déployer ses ailes.

note : malgré mes efforts, j’ai toujours énormément de problèmes à voir tous les exemples en Silverlight. La version 1 n’est plus compatible avec la 2, ou c’est l’autodétection de la V1 qui marche mal (comme pour flash parfois en définitive). Quelqu’un peut confirmer ?

Je viens de lire sur AsiaJin un exemple de logiciel nouveau avec la webcam + 3D. Attention, ce n’est pas du flash cette fois (peut-être à la portée de flash 10 ?).

Geisha Tokyo vient d’annoncer pour la fin d’année un nouveau logiciel de Cyber Maid : Cyber Figure Alice. La charmante demoiselle apparaitra sur des cubes sur lesquels des petits dessins sont collés. Je ne relèverais pas tout ce que l’on peut faire avec, il s’agit là d’un module de compagnie virtuelle pour les Otaku. On peut imaginer -au delà de cet exemple de réalité augmentée qui arrive sur le bureau - un ensemble de petits animaux virtuels par exemple ( comme Pet-Iz ou virtualDog , avec des options de personnalisation (habits, accessoires…), voire même des jeux.

Si les outils qui permettent le faire vous intéressent, vous trouverez par ailleurs sur la page projets d’ARToolkit une liste de réalisations avec ce moteur open source.

Dans le jeu, l’expérience n’est pas nouvelle puisqu’il y en déjà eu quelques uns sur consoles, ou sur PC comme celui-ci, ou des expérimentations assez riches dans les universités de recherche, voire sur mobile (et je ne parle pas de l’Iphone qui n’en est qu’au prototype).

Alors bien sur, cet exemple semble un peu primaire. Toutefois, croisons le avec l’expérience du même type en flash 9 que j’avais vue, ces mini-jeux pourraient bien se multiplier rapidement. Il existe d’autres exemples du même type sans flash mais avec une webcam et un PC avec cette vidéo de la BBC. Flash 8 avait rendu possible son lot de jeux interactifs à la webcam, qui sait vers quoi nous tendons dans les prochains mois avec Flash 10. Point d’installation coûteuse, beaucoup ont des webcams et un navigateur internet… reste à voir si l’usage qui en est fait se démocratise !

Peut être aviez-vous vu Edushi il y a quelques temps, qui représente la ville en 3D vu de haut, avec une représentation qui rappelle énormément un ‘Sim City’, ou du Pixel Art. La navigation reste la même que celle d’un google maps traditionnel.

La même compagnie auteur d’Edushi s’est associée avec Youcity, pour réaliser des cartographie de Manhattan, à voir ici et par ici. Plusieurs angles de vue devraient être disponibles, ainsi qu’une API.

Une représentation facile à comprendre car elle reprend les codes de jeux vidéos classiques. Par une vue à la verticale, les villes ne sont forcément expressives lorsqu’elles quittent le plan tout bête. En mode photo, les prises de vues de satellite sont souvent inclinées selon des angles étranges, alors… pourquoi pas ?

(Via digital Urban)

En regardant tomber la pluie…

Flash

NewX3D : un nouveau moteur 3D en flash pour Flash 10.
Toutefois pas de précipitation, non seulement il est en chinois, mais au vu du code et de ses classes, il manque encore de bon nombre de fonctions pour être exploitable. Si vous voulez le tester, il est sur google code. (en attendant la sortie open source de Sharikura bien sûr ^)

Electric Sheep Company sort WebFlock, un chat en 3D et en flash (via secondworld.)
De la vidéo, des avatars, du chat, du casual game… un univers configurable à la carte pour des entreprises comme un gros pack, sans les restrictions d’un plugin. J’aurais aimé le voir tourner mais on ne dispose que d’une seule image sur leur site. Dommage. A moins de 100 000$ la licence à l’année, on ne rigole plus.

Un usage de la 3D original pour une bannière publicitaire
Moins lourd que de la vidéo, et plus d’intéractivité. (Edit : que Jacinthe vient de mettre à l’épreuve dans son ergoflash test)

- Une vidéo de jeux en flash
Pendant que tout le monde se rue sur labrute.fr, une vidéo de kakokako, un des sites de motion-twin, est apparue sur leur blog, histoire de faire le tour de la plateforme de jeux. Les jeux sont excellents, bien réalisés et addictifs avec un système de pay-per-play. Si vous vous ennuyez, allez y faire un tour pour découvrir le site, même en mode preview.

- Vous vous souvenez du système de réalité augmentée en flash ? J’ai une variante avec un personnage 3D connu modélisé et réintégré en flash, avec tout un système de tracking visuel avec une tête en carton et trois diodes + webcam un peu compliqué que je n’expliquerais pas ici, mais c’est amusant de voir le modèle 3D bouger :

Pour info, le personnage est basé sur une application musicale sortie au Japon qui a créé une vraie mode, à voir les différentes variations sur youtube (plus ou moins atroces) comme celle-ci, ou celle-là. Personnellement, je suis fan, mais cela n’engage que moi…(je vais perdre en crédibilité sur le coup, c’est sûr^)

- Dernier exemple intéressant d’une application AIR sur pc avec un écran tactile. :

Flex 4 SDK disponible.
Nom de code : Gumbo

19 classes utiles en AS3.
J’en aurais bien rajouté quelques unes mais bon… (il y a CannonML une librairie pour créer des jeux de shoots sortie récemment en open source au fait, avis aux amateurs… euh, comme moi… ).

The charges against AS3 ou sur Is Flash getting too complicated ?
Certains se posent des questions sur la complexité de l’AS3 : ce n’est pas moi qui dirait le contraire, l’AS3, c’est plus propre, certes, mais rien que pour créer un bouton avec une url, que de changements et de complications… (rien que ca, déjà…) alors que certains sont restés à l’AS1 / flash 5…

Univers virtuel

Advanced 3D GIS Engine exceeding Google Earth capabilities Erects Urban Planning Information System in Seoul
Un google-earth like coréen qui dépasse de loin GoogleEarth.

Un petit tour dans Just Leap In chez Wangxiang.
Ma première impression se confirme aussi. Cet univers n’a pas fini de m’intéresser.

Le middleware Torque permet de porter ses applications sur Iphone
Comme ses concurrents, virtools, shiva ou Unity (que cartoon network va prochainement utiliser pour son nouveau MMO). C’est la saison.

Voici une bonne liste qui rassemble des vidéos de différents univers virtuels.
Vous voulez voir à quoi ressemblent tous ces univers dont on parle régulièrement ? C’est l’occasion, sans que cela ne vous prenne trop de temps.

The 3D internet changes everything
Une approche critique mais constructive que j’ai bien aimé : “Call me a cynic, but I have still not bought into the notion that 3D Avatar Chat (called the 3D internet by some) will, by itself, change how we live.”

Edit : suis-je distrait, j’ai oublié deux posts intéressants :
- Les 10 challences à relever pour les univers virtuels et Un retour dans le browser pour les univers virtuels ?,
Tous deux assez synthétiques, le deuxième reprenant la problématique de l’univers virtuel dans le browser : “pas de gros volumes de trafic sans un environnement 3D réaliste et immersif, mais pas d’environnement 3D réaliste et immersif sans plug-in ou installation.”.