Coobico n’est pas le chant d’un coq au lever du soleil mais le nom d’un projet qui avance à grands pas d’univers virtuel en ligne en flash. Coobico est un univers multiplayer – encore en gestation – orienté stratégie rempli de mini-jeux, en Free to play, dont le but est de construire sa ville et de la faire prospérer, avec une orientation très sociale bien sûr. Côté choix du moteur 3D, les 3 développeurs allemands basés à Hong Kong ont fait un comparatif sur de nombreux points (richesse de la documentation et des tutoriaux, performances, clarté de la conception du code..) autour des 3 moteurs et le choix s’est tourné sur… Sandy3D ! (Là on peut faire Cocorico par contre)

Plus d’images sur la galerie de Coobico

Seulement voilà, si Coobico était prévu à l’origine en 2.5D, il a été entièrement réécrit pour être porté en 3D pour gagner une plus grande liberté d’exploration. Reste à savoir jusqu’où se place le partage entre Sprite 2D et 3D. Nous ne sommes plus très loin du bon vieux – très vieux – Ragnarok en client lourd.

Côté conception technologique, il me fait penser à Smallworlds : 3D iso + personnage en sprite 2D ou un Dofus pour le côté graphique (et son prochain wakfu?) Bon, d’accord il y a aussi Hello Kitty Online… mais c’est sur pc ! A noter que les captures d’écran peuvent différer de la dernière version refaite en 3D.

Jeu prévu début 2009

Juste pour le plaisir… une petite animation de test de personnage en flash à base d’Away3D chez 3Dflashlo. A noter le paramétrage possible de la lumière qui donne des rendus différents et la qualité du meshe 3D importé. Chouette.

Surprenant PostPet! En essayant de retracer son historique, je tombe sur un premier article de l’atelier qui date de… 1997 ! et d’un autre qui date de 2000 sur transfert.net.

Lancé en 1996 (!), ce service de So-net pour les enfants, sous forme d’un logiciel à installer, lisait vos mails dans une petite pièce aménagée, dotée d’un avatar de compagnie. Le plus fort, c’est qu’il existe toujours et il a su évoluer avec son temps : d’abord il a été porté du bureau au web grâce au flash, puis un accès via mobile, des widgets animés à poser sur son blog, ou accès via Nintendo DS… et même un RPG sur mobile :

Et toutes sortes de services annexes se sont greffés autour : cartes postales virtuelles, activités diverses ludiques, galeries photos de son environnements sous forme de mini-blog, blog intime de son avatar de compagnie (ours en peluche etc..)… bref, tout une vie autour d’un univers à l’origine très ciblé : d’un logiciel de lecture d’e-mail simple, Postpet est devenu un espace d’amusement ludique, jusqu’à devenir un SNS (Social Networking Service), une sorte de réseau social enfantin. L’upgrade de PostPet4you lancée le 11 novembre dernier devient une sorte de réseau social sous forme d’univers virtuel où l’on peut inviter ses amis à une petite réception (tout en lisant ses mails j’imagine) dans son propre espace avec un choix de 11 types d’avatars différents :

Un exemple d’une room (abandonnée) ici

Je n’ai pas vu si l’on pouvait récupérer la salle sur son site, mais le service est entièrement gratuit… il n’y a qu’un accès premium qui est payant qui donne droit à certaines options de personnalisations.

Les aventures de ce petit ourson rose est devenu culte. On en voit la couleur si j’ose dire sur le blog de PostPet avec toutes sortes de goodies.

Une plateforme de DAM est une sorte de super-médiathèque, qui permet de gérer, d’archiver, d’annoter, de grouper, optimiser, exporter, et de réutiliser tout type de media : images, sons, vidéos… Très pratique en entreprise, certaines plateformes sur-mesure peuvent aller assez loin : découper un bout de vidéo pour le récupérer sur un de ses supports de communication ou récupérer un plan séquence en vidéo d’un personnage animé en 3D déjà utilisé en canal alpha pour le réinscruster ailleurs…. bref, une ressource tout aussi utile qu’importante et certaines sociétés (vidéo, post-prod) connaissent bien le problème.

Razuna réalisé par SixSigns est une plateforme open source (licence APGL 3) de Digital Asset Managementdonc, qui fait plaisir à voir. Elle manque un peu d’habillage graphique mais voici un petit tour rapide de ce qu’elle propose :
- Gestion de vidéos, images, et fichiers words ou excel et même pdf avec tout type de moyen d’upload en entrée (FTP, email, upload http…)
- Front web avec un CMS préfourni ou bien tout un système d’API disponible.
- Exportation en batch en tout type d’images différents.
- Prise en charge de Google Gears (!) pour tout mettre en cache.
- Visualisation des vidéos en flash avec conservation bien sûr du fichier source.
- Export automatique par email ou FTP, panier utilisateur….
- Metadata, descriptions, et moteur de recherche multilingue
- Gestion d’accès aux documents
- Côté serveur, c’est de la base Oracle ou Mysql, ImageQuick et FFmpeg. Cela marche sous un serveur J2EE ou Tomcat, bon globalement, au plus proche des standards.

Alors bien sûr, il existe de nombreuses autres solutions de DAM ou de MAM (Media Asset Management) (comme cynapse notamment ou Montala), mais l’idée de fournir des plateformes comme celles-ci peut aider les entreprises à se créer de véritable médiathèques à peu de frais. (C’est mon grand regret d’ailleurs que Adobe ne propose rien dans ce sens hormis des FMS ou des Live Encodeurs). Il y a une souplesse de plus en plus grande d’ailleurs dans le choix de la licence d’utilisation de ces solutions : open-source, commerciale ou Saas.

De nombreuses entreprises ne savent pas vraiment comment s’y prendre avec tous leurs medias, et repoussent un peu la priorité de ce type de plateforme à plus tard. Pourtant, cela aide à gagner du temps (on passe moins de temps à chercher), et de l’argent puisque cela contribue à réutiliser de la matière produite ou déjà créée. Par contre, le revers de la médaille à utiliser une solution opensource sans support réside dans la maintenance et la maîtrise de la plateforme en interne.

D’ailleurs, à l’heure où la vidéo avance à une vitesse fulgurante sur internet, quid de la gestion des autres medias : vidéos youtube, flickr etc… ? C’est encore une autre question dans la gestion des medias, (et encore, faut-il tout archiver?) Autre sujet, je lisais dernièrement encore les problèmes de criticité à tout stocker en un seul serveur même pour ce type de plateforme, et que le Cloud pouvait répondre à ce type de problème. Tout un programme…

Je vous laisse avec deux vidéos de démo :

Razuna 1.1.2 – Introducing new features from SixSigns on Vimeo.

Razuna – Adding digital assets to the system made easy from SixSigns on Vimeo.

On avait vu des expérimentations marketing avec des systèmes comme celui de motion portrait qui permettent de transformer des photos de visages en 3D. Utilisant sans doute le même système que Motion Portrait, hairtry permet d’essayer à partir d’une simple photo, différentes coupes de cheveux :

- Voir sa tronche très fatiguée animée en 3D et suivant la position de la souris est suprenant. (L’application bride un peu les yeux mais le site s’adresse à des japonais hein…)
- L’animation des yeux est saississante.
- La détection de l’ensemble est de très bonne qualité.
- Ce n’est pas un visage entier recomposé en 3D comme on le fait avec Virtools mais une déformation du visage avec détection des yeux. L’effet est suffisant et cela rend plutôt bien.
- Les coupes de cheveux ne sont pas toujours de très bon goût. (du moins au mien)
- Une photo sur fond blanc donnerait un bien meilleur rendu.

Le site est créé pour Aderans, spécialisé dans la recherché de régérénation du cheveux. Comme quoi la 3D légère en flash a des débouchés intéressants, en l’occurrence pour des simulations de retouches capillaires cosmétiques (ou pour cause de chute brutale de cheveux passé un certain âge), voire des optichiens puisque le dernier onglet vous permet d’essayer aussi des lunettes… mais il existe déjà des essais en réalité augmentée dans ce domaine (toutefois sur pc, et non dans flash).

Et le premier qui me pique ce post avec ma tronche en image coiffée d’une perruque ridicule se prend un atémi doublé d’un jeté de boeuf à la menthe bouilli durant 7 heures….

Je me rends compte avec effroi que tout le monde ne maîtrise pas vraiment la vidéo dans flash, alors allons-y pour les bases. Cela permettra peut-être d’éviter des erreurs de taille (et de poids !), même si je n’ai pas pour vocation de faire des tutoriaux…

Jouer avec de la vidéo sur le web en flash : comment ?
Plusieurs techniques :
- Intégrer directement la vidéo dans le swf. Pratique pour les interactions, l’intégration ou les transitions, mais destiné à des boucles ou des vidéos très courtes, car l’inconvénient est qu’il faut tout télécharger avant de commencer à le lire. (on pouvait avoir aussi à une époque un décalage de synchro vidéo/son sur des vidéos longues)
- séparer la vidéo du swf : permet le streaming ou le progressive download. Autorise ainsi la lecture dès que quelques secondes de vidéos sont chargées ou la lecture instantanée.

Historique et formats
Le format vidéo de prédilection de flash est le FLV. C’est ce que l’on appelle un conteneur, comme l’avi ou le mov. Il permet d’avoir différentes compressions vidéos à l’intérieur même de cette extension. Rapide historique

En 2002, avec flash 6, le codec Sorenson est apparu et a permis de lire de la vidéo en H263 sur le web le plus simplement du monde. Utilisé longtemps par Youtube, il n’a pas été spécialement apprécié par les amateurs de vidéos de qualité mais il a permis de démocratiser totalement la vidéo sur le web, et Youtube comme Viméo ont finalement migré vers le au H264 (j’y viens).

Avec Flash 8, le codec propriétaire On2 VP6 a complètement boosté la qualité et optimisé le poids des vidéos, instaurant une nouvelle ère de la vidéo interactive. De plus, le VP6 permettait la prise en charge du canal alpha, ouvrant la voie à des incrustations de personnes ou d’éléments interactifs sous fond vert/bleu dans la scène. Ajoutons l’effet de ‘smooth’ directement dans flash 8 qui permet de lisser une vidéo présentant des effets de petits carrés, un peu plus consommateur en ressources par contre.

En Aout 2007, ca se complique, mais pour le meilleur. La release beta 9.115 du player flash prends désormais en charge le mp4 et le H264 (enfin x264) tout en créant en parallèle un nouveau container : le F4V (f4a pour l’audio et f4p pour le mp4 avec DRM) avec du son en AAC et plus seulement en mp3.

Pourquoi avoir rajouté cette prise en charge de ce format ? Sans parler de support en plus de M4V, M4a ou de 3gp pour le mobile, je ferais court : Adobe s’est rapproché d’un standard, plus libre, permettant d’encoder avec une très bonne qualité la vidéo. De plus, le H264 permet la HD pour peu que l’on ait la bande passante suffisante (histoire de contrer l’avance prise par Silverlight à l’époque pour l’excellente qualité de sa compression en wmv). Cela a aussi permit à de nombreux acteurs de la vidéo en ligne de ne pas utiliser de codec propriétaire à licence/royalties… puisque FFMpeg, MeGui ou Mencoder côté serveur peuvent aussi à l’heure actuelle encoder en H264.(même si certains ont trouvé la parade depuis apparemment avec le VP6).

Comparaison
Quel est le codec de compression idéal ? Tout dépend du projet, mais une chose est certaine : le Sorenson H263 est un format préhistorique maintenant, lourd, de mauvaise qualité, à proscrire en 2009 (je prends de l’avance). Préférez un VP6 ou un H264… Je viens de refaire la comparaison, un VP6 est de meilleur qualité à débit de moitié inférieur à un Sorenson. (200 / 400kbps).

Entre le VP6 et le H264 ? C’est à peu près la même chose, même si les effets de compression sont différents (crénelage, flouté, perte de teinte/luminosité de couleur….). Je trouve que l’on perd un peu en intensité de couleur en h264… même s’il est censé être meilleur que le VP6.

Si le temps d’encodage est critique pour vous, faites attention au format source de la vidéo : un mp4 en source est très long à encoder en flv tandis qu’un simple avi tout bête en DV sera rapide. Autre détail à prendre en compte : le temps de l’encodage d’un même fichier en VP6 ou H264. Le H264 est plus long à encoder et il est plus consommateur en ressources CPU à la lecture.

La qualité est aussi importante : une vidéo très compressée à l’entrée en encodage ne vous donnera pas une meilleure vidéo en sortie. La source doit être impeccable !
;)

Encoder, comment ?

Le plus simple aujourd’hui reste de passer maintenant par le Adobe Media Encoder : il est fournit avec flash et autres logiciels de la suite d’Adobe, il est à l’heure actuelle de très bonne qualité, gérant avec la CS4 les batchs d’encodage, l’estimation du projet final et les différents profils de réglages. Il y a aussi MediaCoder ou Riva. Il existe bien sûr d’autres outils assez puissants (Turbine, Sorenzon Squeeze, Rhozet (ancien Canopus), Flix…), mais souvent payants et… beaucoup plus chers. (4 000€ pour un encodeur, dans un projet, ca plombe un peu l’ambiance…)

Note : tous les encodeurs se suivent et ne se ressemblent pas. Ils n’ont pas les mêmes performances en qualité de compression et de temps de calcul. Faites des tests si vous hésitez.

Note 3 : les outils payants ont des fonctions que les autres n’ont pas forcément. Je pense aux « watched folders » qui permettent d’encoder dans différents profils des vidéos déposées dans un dossier partagé à partir d’un réseau ou depuis internet, et de les renvoyer ensuite par FTP ailleurs….

Note 3 : attention par ailleurs aux metadata, ces petites informations incluses dans le FLV. Un encodeur inconnu peut ne pas les inclure, perdant ainsi des informations de durée, de débit etc… c’est pour cela que sont apparus des outils comme celui de Buraks : FLVMI. Sans metadata, oublions le streaming et la navigation efficace dans la vidéo.

Débit d’encodage et bande passante ?
La bonne question^ Cela dépend aussi de votre projet, mais il faut savoir qu’une vidéo très « standard » encodée à 550/600kbps ne gagnera pas forcément beaucoup en qualité si elle passe à 800kbps, toutefois si vous avez du traffic sur cette vidéo, cela représente une grosse montée en charge au niveau de la bande passante : 1/4. Et oui. Libre à vous de monter à 1500kb/s ou de faire de la HD si le coeur vous en dit mais il faut éviter que l’internaute n’attende trop le chargement…. ou que la plateforme ne supporte pas la charge.

Adobe a mis en ligne il y a quelques mois une calculette pour le débit optimal si jamais vous n’êtes pas sûr de vous ainsi qu’un autre article sur la taille recommandée que l’on peut utiliser pour étirer la vidéo. (Encoder en 320×240 mais on peut la visualiser avec une règle simple de multiples en 464×348) (septembre 2007 quand même, mais c’est un bon référent. Pour info, c’est ce que font Youtube et Dailymotion.)

Dernière chose : l’espace disque sur les serveurs ne coûte rien aujourd’hui. Par contre, la bande passante est une autre paire de manche. Think about it.

Paramètres d’encodage : CBR, VBR, FPS…
Il existe deux techniques d’encodage :
- Le CBR (Constant Bitrate Rate) et le VBR (Variable Bitrate Rate). En gros, le CBR diffuse en continu par exemple 500 kb à la seconde de donnée tandis que le VBR va analyser la vidéo pour réduire le débit lorsque l’image n’a pas de mouvement et remonter plus fortement lorsque l’image bouge beaucoup. Cette fourchette haut et bas est bien sûr paramétrable et elle permet d’optimiser énormément la qualité de la vidéo.

Pour le VBR, il y a l’analyse à la volée avec un 1-pass et l’analyse plus fine avec le 2-pass, plus longue à encoder. Un VBR 2-pass est préférable, car l’autre provoque des effets hilarants dans certains cas de compression dès que la vidéo entre en mouvement.

On peut jouer en fonction de la nature de la vidéo sur les FPS (Frame Per Second). Cas beaucoup plus rare, cela peut être utilisé lors de fonds animés plein écran en vidéo, cela marche bien, mais c’est vraiment occasionnel. Le risque est d’obtenir une vidéo saccadée si l’on tombe en-dessous des 25 images par seconde. (standard en Europe). Un 60 FPS avec de la HD donne une superbe fluidité à l’image mais… disons que c’est consommateur en bande passante… (euphémisme!)

Keyframe
Je fais court : une keyframe est l’image de référence à partir de laquelle la vidéo ensuite va rajouter ce qui a changé : mouvement, déplacement etc… Rajouter des keyframe va alourdir la vidéo, en enlever peut provoquer (notamment pour le streaming) des effets indésirables (de lapin bien sûr) dans la navigation.

Le son ?
Le poids du son doit s’ajouter à la vidéo bien sûr et il faut faire attention à la nature de la bande son. Si vous avez de la musique complexe, vous pouvez passer jusqu’à du 160 kbps en stéréo, mais pour de la voix, en fonction de sa nature, vous pouvez descendre à du mono, 64kbps et même moins, jusqu’à cibler un 11khz de fréquence d’échantillonage. (Cela s’entends dans tous les cas à l’oreille).

The end
Il existe d’autres choses à prendre en compte plus poussée comme la taille finale de l’export, le 4:3 et le 16/9ème, les keyframes, le désentrelacement, les filtres mais en laissant les paramètres par défaut, ca passe bien le plus souvent… et le but ici était d’arriver à s’y retrouver dans les différents formats, les basics quoi.

So…. la conclusion est : sauf si vous avez le malheur de devoir cibler flash 6 ou 7, le Sorenson H263 est vraiment mort : lourd, de mauvaise qualité, vieux. Même si l’on peut faire de très bons encodages avec, j’ai envie de dire : Oubliez-le.
;)

J’ai fait ce guide rapidement, mais si vous avez repéré une erreur, comme d’habitube, faites signe ^

RealCity | Nike Blazer ou quand vos chaussures colorent la ville. Le site tient dans un seul et unique effet de couleur qui se répand dans toute la ville. Il y a de quoi devenir fétichiste du pied… A noter une introduction en animation réalisée par le studio 4°C, célèbre pour ses créations originales au Japon, et ce n’est pas leur première collaboration avec Nike puisqu’ils avaient déjà réalisé trois spots pour Nike en 2004.

Le site renvoie ensuite vers l’impressionnant outil de personnalisation des chaussures, pour les commander ensuite. A voir aussi.