Nounours se prend pour E.T.

Nounours se prend pour E.T.

Encore un exercice, cette fois-ci c’est modélisation à l’aide des primitives de 3DSMax 2010 et éclairage. Le but et d’avoir une composition de l’image pertinente et un éclairage qui mette en valeur les objets.

Pour cet exercice l’idée du nounours qui se prend pour E.T. et venu très rapidement en faisant quelque croquis, j’ai tout de même fait quelque recherche pour le tricycle et le nounours :

Préproduction pour la scène Nounours et son tricycle se prend pour E.T.

La réalisation a été elle aussi très rapide, le plus dur étant de trouver le bon éclairage pour la lune. Comme nous n’avions pas droit à de la post-production il a fallut tout gérer au rendu. Pas si facile, mais intéressant.

Rendu finale de la scne 3D Nounours et son tricycle

Némo par en vacance.

Némo par en vacance.

Sur le thème de la valise, exercice de modélisation et d’UV-maping.

Recherche sur le thème de la valise

Après quelques recherches sur le thème de la valise, je me suis fixé sur un poisson qui par en vacance et qui arrive en vu du fabuleux paradis des poissons, une oasis de verdure, le lieu touristique par excellence : « la Dune d’Or ».

Voici le rendu final après post-production. J’ai rectifié les couleurs mais aussi, et surtout, les valeurs et les contrastes pour faire ressortir le sujet principal.

Post production de "Némo et sa valise

Rendu final avant la post-production :

Rendu final de Némo et sa valise

Sur cet exercice je me suis confronté à la modélisation organique et à la déformation par courbe pour donner du mouvement au poisson. J’ai utilisé des systèmes de particules de les poissons en arrière plan ; j’ai aussi expérimenté des méthodes d’éclairage autre que celle des « trois points » tout en m’en inspirant notamment pour le retour de lumière sur le dessous du poisson.

J’ai utilisé pour cet exercice Blender 2.49 et Photoshop CS4.

Comment faire du beau code html

Tout le monde parle de la nouvelle balise video, mais la nouvelle spécification HTML5 ne s’arrête pas là.

Proposition pour html5, video

Proposition de recherche pour le terme html5 sur Google

En effet, cette norme introduit des nouveautés intéressantes qui vont nous permettre de rendre le code encore plus structuré, encore plus beau. Cependant, il ne faut pas oublier les anciennes pratiques. Il faudra toujours faire attention à la hiérarchie des titres, mettre un titre et un texte alternatif pour les balises images etc…

La balise article

Avec les nouvelles balises descriptives on peut délaisser les div avec des id et des class à répétition. A la place on utilisera par exemple la nouvelle balise article qui permet de définir une entité rédactionnelle indépendante du reste de la page, par exemple un article de blog, qui pourra être réutilisé dans d’autre contexte, comme un flux RSS, ou la page d’une catégorie.

Et à l’intérieure de celle-ci, on pourra utiliser les titres, bien sur, mais aussi hgroup qui représente un ensemble de titre, sous-titre et tag, et d’autre encore comme la balise footer.

La balise footer

Cette balise footer est intéressante, elle est utile pour le bas de page, mais aussi pour toute les parties qui ont besoin d’information : l’auteur, la date de rédaction ou encore les documents relatifs.

C’est important de comprendre qu’elle se rapporte à la section parente la plus proche, càd : article, aside, nav, section et pas seulement à la page globale. On pourra donc mettre autant de footer que de sections

Ouverture

En lisant la spécification du html5 on se rend compte que les changements sont bien plus important que l’ajout de video et de canvas ; aujourd’hui je me suis attardé sur les nouveautés qui auront un impact sur la structure d’une page html, et sur le code, mais il y a encore beaucoup à dire, sur CSS3, sur la géolocalisation, sur les applications offlines… Le domaine est vaste. Mais sans un beau code, ça sera vraiment beaucoup moins intéressant de développer des applications web et des sites internet.

Nature morte

Nature morte

Voici un exercice intéressant à faire en 3d : une nature morte. Cet exercice fait travailler la composition, la modélisation, l’éclairage, trois brique indispensable pour construire une bonne image en 3d. La contrainte de l’exercice est simple, pas de texture, uniquement des shaders comme phong et blin, et seulement des lampes de bases, donc pas de radiosité ni d’AO ou autre algorithme de rendu sophistiqué. Ici c’est du basique.

Alors on commence par un croquis pour avoir le cadrage, histoire de ne pas modéliser 3000 objets de trop. Et puis ça permet de composer tout ça.

Croquis de la nature morte

On passe ensuite à la modélisation. Pour cet exo, c’est assez simple. Le plus long ? Sans doute le poireau… C’est vous dire la simplicité de la tache.

Modélisation des éléments de la nature morte

Ensuite j’ai répartis les objets selon le croquis de base et j’ai placé les lumières.

Mise en place de la lumière

L’étape suivante c’est le coloriage, ou plutôt l’étude des fruits et légumes pour avoir La bonne nuance de couleur qu’il faut, en fonction de l’éclairage en plus. Cette étape n’est pas facile du tout, elle demande de la documentation, du sens critique. C’est vraiment pas évident, surtout quand on n’a pas de textures pour venir nous sauver.

Mise en couleur de l'image

Et enfin l’image finale ! Après une multitude de test, de prise de tête pour régler le spéculaire des pommes ou des orange (pas facile du tout de choper la nuance du reflet sur les oranges), de tâtonnement pour les ombres, pour qu’elles soient assez foncé, mais pas trop… Bref, après beaucoup de boulot, on arrive enfin à la version finale :

Image finale de la Nature Morte

La 3d c’est bien, mais c’est beaucoup de boulot, beaucoup beaucoup beaucoup de travail pour avoir un résultat convenable.

Utilisabilité, vite et bien fait.

L’utilisabilité est en concept primordiale dans l’élaboration de produit multimédia et de logiciel, c’est tout simplement l’efficacité et la rapidité de la tache qui en dépend, et du coup la satisfaction du travail accompli, ou non.

Efficacité

Il s’agit pour le concepteur d’optimiser les outils : faire des tests utilisateurs pour savoir qu’elle est l’option la plus utilisé et la mettre en choix par défaut par exemple.
Prenons un autre exemple : les formulaires de téléchargement sur internet. Un formulaire efficace rempli la langue, le système d’exploitation et même l’architecture, laissant à l’internaute le chois entre télécharger cette version et changer les paramètres.

ex : Firefox

L’efficacité c’est aussi faire en sorte que le résultat prévus soit effectif, par exemple pour le traitement de photos : si on veut en enlever le grain et qu’après un filtre mal codé il est toujours la, alors le filtre n’est pas efficace, et c’est très agaçant (voir « La satisfaction »).

Efficience

C’est la vitesse d’exécution des taches, c’est aussi l’organisation du flux de travail et de l’interface.

Par exemple dans AfterEffect on peut changer les paramètres de plusieurs objets à la fois, démonstration :

Il y a trois méthodes avec la souris pour changer les paramètres comme la visibilité de l’objet :

  1. objet par objet, clic par clic ; c’est la méthode habituelle dans la grande majorité des applications
  2. par la sélection ; on change toute la sélection en un clic
  3. par glissé ; ça permet de se passer de l’étape sélection, encore plus rapide donc.

Voila un bel exemple d’efficience pour une interface.

Satisfaction

Le concepteur de l’application doit tout faire pour que l’utilisateur se retrouve immédiatement dans l’interface, elle doit être conforme aux standards du milieu, par exemple les applications pour iPhone et iPod Touch ont toutes la même interface, la même manière de réagir au glisser, au zoom, à la rotation, elles ont les mêmes menus, la même logique, et c’est ce qui fait une des grandes forces de l’iPhone, de l’iPod et maintenant de l’iPad. L’utilisateur n’a pas à réapprendre une interface pour chaque application.

Dans le même temps, l’interface de l’application doit être la plus adapté à son domaine et savoir se détacher des habitudes grand public. Par exemple dans PhotoShop le clic droit n’affiche pas un menu avec les traditionnelles Couper/Copier/Coller/Tout sélectionner, mais un menu contextuel affichant les options de bases de l’outil

ex : la taille, la dureté et l’apparence du pinceau

Conclusion

L’efficacité, l’efficience et la satisfaction sont très lié, elles sont même indissociable. Les exemples que j’ai pris sont assez simple, mais j’espère parlant. Pour plus de lecture il y a la page de Wikipédia sur l’utilisabilité qui est bien documenté.