journal de bord de Ngoc Linh Cao

l'essayage virtuel

2009-04-03T02:36:00.000-07:00

http://ngoc.linh.cao.free.fr/melimelo/Essayage_Accueil.html

les fenêtres temps réel sont assez longue à charger. Si ça ne s'affiche pas alors que le téléchargement est terminé, il suffit de rafraîchir la page.

L'applet des lunettes clipsables a été mis à jour :
http://ngoc.linh.cao.free.fr/melimelo/lunettesClips/index.html

l'applet des lunettes aux lettres clipsables

2009-03-19T10:45:00.000-07:00

Voici une ébauche de l'applet :
http://ngoc.linh.cao.free.fr/melimelo/lunettesClips/index.html

Je rajouterai par la suite un champs de texte pour accéder plus facilement aux différentes lettres.

la collection contreforme

2009-03-19T10:39:00.000-07:00

placer la souris au mileu du cercle de lunettes pour les faire tourner, déplacer la souris en dehors du cercle pour arrêter le carousel.
Pour l'instant, seules les deux premières paires lunettes (la rouge et la violette) ouvrent une applet webseed :
http://ngoc.linh.cao.free.fr/melimelo/collection.html

les autres interfaces

2009-03-19T10:32:00.000-07:00

Nous avons donc déclinés le graphisme du site aux autres interfaces :
Evolution de l'applet des lunettes aux branches interchangeables :

autres applets :

interface essayage :

Le site

2009-03-19T10:23:00.000-07:00

Au final nous avons combiné nos deux designs pour réaliser le site définitif : on a gardé les éléments graphiques de Solenne et on l'a intégré à la structure que j'avais effectué :

Quand une action est égale à 15 lignes de codes...

2009-03-03T07:03:00.000-08:00

Ajout des couleurs de peau dans la page web test :
http://ngoc.linh.cao.free.fr/melimelo/subdoTest/testSubdo/Morphing02.html

Petit up des textures, ajoue de quelques zones de lumière sur la peau :

les couleurs de peaux

2009-02-27T07:58:00.001-08:00

interface suite

2009-02-27T07:56:00.000-08:00

interface essayage
interface lunettes :

Recherches graphiques suites

2009-02-25T15:19:00.000-08:00

j'ai laissé momentanément le design des autres pages du site pour l'interface de l'essayage virtuel. Voici des croquis recherches sur le découpage de l'espace.

Le choix de la forme de base de l'interface effectué sur illustrator :
Approfondissement graphique, finalisation :Un aperçu avec l'ajout du contenu :

Toujours en recherche graphique....

2009-02-24T03:06:00.001-08:00

Une forme plus classique :

Le site final :
Recherche sur la page "Collections"

Demo Reel

2009-02-19T16:51:00.000-08:00

Voilà ma demo reel est enfin sur mon site!
ngoc.linh.cao.free.fr

Recherches graphiques sites

2009-02-19T16:42:00.001-08:00

Le logo :La mise en page site :

Rendu Maquette des lunettes

2009-02-19T16:33:00.000-08:00

Voici quelques rendus de lunettes que j'ai effectués sous Vray. D'autres rendus photos réalistes seront réalisés par la suite.

Personnalisation du visage

2009-02-19T16:27:00.000-08:00

Au départ il était prévu que la transition entre les différents changements de nez, de bouches, etc. se fassent à l'aide d'un morphing. N'ayant pas réussi à créer une interaction qui fonctionne avec les morphs, j'ai du revoir la manière de procéder aux changements des différentes parties du visage.

Au lieu d'un morphing, ce sera un changement de poly qui s'effectuera.
Pour cela j'ai découpé le visage en plusieurs parties :Lorsque l'on cliquera sur un bouton pour changer de nez par exemple, le nez correspondant à l'image apparaîtra,les autres seront cachés.

Pour "camoufler" le découpage du visage, j'ai ajouté des lumières dans la scène subdo.
Un éclairage assez fort est nécessaire pour que les marques du découpage ne soit pas visible.
Au lieu d'ajouter des lumières, on peut également rendre la texture auto-luminescent.
C'est ce que j'ai fait au final, pour rattraper les détails, j'ai ajouté une map d'occlusion dans ma color.
Voici une maquette de l'application avec personnalisation des différentes parties du visage :
http://ngoc.linh.cao.free.fr/melimelo/subdoTest/testSubdo/Morphing.html

Certaines personnalisations du visage prévues, tels que l'ajustement du profil du nez, positionnement de la bouche, ne sont pas encore résolu.

boutons html suite_ switch entre les coiffures

2009-02-11T15:57:00.000-08:00

La difficulté résidait dans la création d'un bouton qui commanderait plusieurs actions :
-montrer la coiffure correspondant au bouton
-cacher les autres coiffures
http://ngoc.linh.cao.free.fr/melimelo/subdoTest/testSubdo/testCheveux02.htm

boutons html

2009-02-11T02:16:00.001-08:00

Voilà j'ai réussi à créer des boutons dans une page html qui contrôle la couleur des yeux dans la fenêtre Subdo.
La création des boutons dans une page html me permettra d'avoir plus de liberté dans la mise en place de l'interface.

Pour l'instant ce n'est qu'un TEST l'interface définitive n'est pas encore définie. Les textures du visage ne sont pas encore finalisées.
http://ngoc.linh.cao.free.fr/melimelo/subdoTest/testSubdo/Visage02.htm

Les différents morphs

2009-02-11T02:14:00.001-08:00

modélisation d'un visage

2009-02-03T17:45:00.003-08:00

Après avoir déplié toutes les lunettes, j'ai commencé à modéliser et texturer un visage pour le conseiller d'essayage virtuel :

Recherches Design site

2009-01-27T16:42:00.000-08:00

Modélisation des lunettes

2009-01-27T16:26:00.001-08:00

Recherches Design Lunettes suite

2009-01-27T16:22:00.000-08:00

Recherches organisation et charte graphique du conseiller d'essayage virtuel

2009-01-06T15:43:00.000-08:00

tests maquettes temps reel

2009-01-06T15:39:00.000-08:00

test réalisé sur DX studio
http://ngoc.linh.cao.free.fr/melimelo/DxStudio/testDxstudio.html

test réalisé sur Subdo
Pour tourner autour de la tête : cliquez sur le bouton gauche de la souris, pour zoomer : faites rouler la molette, pour faire un pan : maintenez appuyer le bouton du milieu tout en déplaçant la souris.

http://ngoc.linh.cao.free.fr/melimelo/Subdo/testVisage.htm

Contenus de l'outils

2009-01-06T15:09:00.000-08:00

Suite à l'écriture d'un cahier des charges, voici des images qui présentent le contenu du Conseiller d'essayage virtuel. Une explication succincte se trouve en bas des images.

Pour commencer l’utilisateur personnalise une tête 3d pour qu’elle lui ressemble le plus possible. Ces modifications se traduisent dans la 3d par un morphing. Pour chaque paramétrage du visage une seule case ne peut être validée : une bordure de couleur apparaît sur la case sélectionnée, les autres propositions sont grisées.
Une flèche blanche en bas à droite permet de passer à la page «Détails», on peut également accéder directement à cette page en cliquant sur le nom de l’onglet écrit au dessus.

Le client peut personnaliser davantage la tête virtuelle en changeant plusieurs parties du visage : la couleur de peau, la forme des yeux, du nez et le bas du visage. En cliquant sur le nom de l’onglet qui l’intéresse, il accède à plusieurs propositions de caractérisation.

Une fois satisfait de son visage virtuel, l’utilisateur à la possibilité de l’enregistrer, sous condition d’être inscrit sur le site de la marque.
Si le client n'est pas inscrit le bouton "Mémoriser mon visage" est grisé. En cliquant dessus, un message apparaît expliquant pourquoi l’accès lui est refusé.
Si le client est un adhérant, un message apparaît sur la fenêtre temps réel : "enregistrement de votre visage".
En fonction des critères physiques validés sur la page « Générales » une sélection de lunettes va être proposée à l’utilisateur. Un conseil esthétique explique le choix des lunettes suggérées. Si le client n’est pas satisfait, il aura toujours la possibilité d’essayer toutes les lunettes en cliquant sur le bouton prévu à cet effet. Pour essayer des lunettes, le client clique sur la vignette avec la photo qui l’intéresse. Celles-ci apparaissent alors en 3d sur le visage virtuel.
Pour chaque paire, des informations permettant de mieux connaître le produit s’affichent en dessous des propositions de lunettes.
Le lien «voir l’objet en détail» ouvre une fenêtre avec les lunettes en 3d temps réel.

L’utilisateur a la possibilité de mémoriser jusqu’à 6 photos de lunettes en cliquant sur «ajouter à mon album» ou en glissant la vignette dans un encadré de l’album. Ces images sont également des liens qui lui permettent de réessayer rapidement les lunettes choisis.
Une fois sa décision prise, l’utilisateur confirme sa sélection en cliquant sur le bouton «valider». Ce lien n’est accessible qu’aux personnes inscrites, pour les personnes qui ne le sont pas, il restera grisé.

Conseiller d’essayage virtuel Méli Mélo

2009-01-06T14:57:00.000-08:00

Le projet propose un service en ligne d’essayage de lunettes 3d, assisté par un conseiller : son but est d’orienter la personne vers un choix esthétique basé sur la forme de son visage et la couleur de ses yeux.
Une tête en 3d sera le support d’essayages des lunettes, celle-ci permettra au consommateur de visualiser les lunettes de n’importe quel angle de vue sur un visage.
Lors de l’essayage l’utilisateur n’est plus face à son image, il crée un personnage qui lui ressemble, une ébauche de son visage en 3d.
Une inscription du client sur le site permettra d’enregistrer ses paramétrages du visage virtuel ainsi que sa sélection de lunettes, et d’y accéder en magasin.
L’objectif de l’outil est de faciliter la démarche du client, du moment où il sélectionne les lunettes en ligne jusqu’à son acquisition en magasin.

cliquer sur l'image pour agrandir

Design des lunettes

2008-12-16T15:33:00.001-08:00

Concept de la marque

2008-12-16T15:24:00.000-08:00

Méli Mélo est une marque de lunettes qui s’adresse aux hommes et aux femmes de 20 à 35 ans.
Inspiré des caractères typographiques, elle en a fait sa marque de fabrique. Méli Mélo joue avec les mots et les lettres, les caractères du monde entier.
De cette idée, trois concepts ont été créés:
_ Le premier est basé sur une recherche formelle qui s’inspire des lettres.
_Le deuxième est un jeu graphique des caractères d’écriture du monde.
_ Le dernier offre une personnalisation des lunettes en insérant des mots sur les montures.
Restrictions :

Les recherches design seront uniquement basées sur l’esthétique et les formes de l’objet, les matériaux choisis et les normes en vigueurs pour les montures ne feront pas l’objet d’une étude poussée.

Le projet personnel : Méli Mélo

2008-12-16T15:20:00.000-08:00

Ce projet se fait en partenariat avec Solenne Habault.
Il consiste à créer une marque de lunettes (Méli Mélo) avec son design et de le promouvoir au travers de deux procédés : une communication visuelle (développée par Solenne) et des prestations 3d dédiées au net (développée par moi-même).

Mon objectif sera de mettre en valeur le produit en utilisant des outils 3d.

La particularité du travail réside dans la recherche et la création de solutions interactives qui auront pour but de séduire l’utilisateur et lui permettre de mieux connaître l’objet, le rendre acteur de sa découverte produit.
Après avoir fait une étude de l’existant, je proposerais la réalisation de deux prestations 3d temps réel : une maquette « produit » qui consiste à manipuler et voir les lunettes en détail, et une maquettes « essayage de lunettes ».

La video Utopiales 2008

2008-12-16T15:17:00.000-08:00

http://www.dailymotion.com/video/x7e3ok_utopiales2008_shortfilms

Texturing

2008-10-21T13:36:00.000-07:00

Avec Charly, nous avons effectué le texturing du robot 02. Je me suis principalement occupée des maps de Specular. A certains endroits, le métal perd de son vernis, quelques traces de rouilles sont présentes.

dépliage

2008-10-19T18:59:00.000-07:00

Chaque modélisateur devait déplier les objets qu'ils avaient modélisés. Charly et Flavien nous ont aidé dans cette étape.

Je suis également chargée de vérifier si tous les objets sont bien déplier, les modifier si nécessaire.

robots finaux

2008-10-19T18:49:00.001-07:00

chanfreinage

2008-10-19T18:23:00.000-07:00

Etant responsable de modélisation, je dois m'assurer que tout ce déroule pour le mieux et que chaque pièces des deux robots soient bien modéliser puis déplier par la suite.

Des difficultés ont été ressenties notamment pour chanfreiner les objets, j’ai donc repris la mod de plusieurs pièces :

torse du robot 01

torse du robot 02

jambes du robot 01

modélisation des bras

2008-10-19T18:12:00.000-07:00

Pour des raisons esthétiques, ce qui est peut être intéressant en 2d ne l'est malheureusement pas forcément en 3d, le design des bras ne se calquent pas complètement sur le modèle dessiné.

Les bras en blanc sont les définitifs.

modélisation des têtes des deux robots

2008-10-19T18:05:00.001-07:00

ci-dessus la tête du robot 01 et ci-dessous, celle du robot 02 :

bienvenue!

2008-10-19T17:58:00.000-07:00

Bienvenue sur mon carnet de bord!
Actuellement en dernière année 3d à Graphicréatis, ce carnet de bord vous permettra de suivre mon avancement dans mon travail durant ces 6 mois, notamment pour un certain projet personnel de fin d'année.

Mais tout d'abord je vais vous exposer le travail effectué pour le premier projet de l'année, un court métrage pour le festival des Utopiales, réalisées par l’ensemble de la promo.

Le court métrage en quelques mots : deux jeunes hommes font la course pour obtenir un billet des Utopiales. Durant leur effort ils se transforment en robot.

Sur ce projet, je suis chargée de la modélisation, avec Julien et plusieurs deuxième année. Le design des Robots a été dessiné par Josselin Billard. Voici comment les taches ce sont réparties pour la modélisation des deux robots :