webgl paris 2015 - conférence de s.benchaa (lead graphics engineer @beloola)

44
Show your life with emotion Sofiane Benchäa, Lead Graphics Engineer

Upload: samuel-mound

Post on 16-Apr-2017

493 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Show your life with emotion

Sofiane Benchäa, Lead Graphics Engineer

Page 2: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Développement d’une application 3D d’avatars

Mise en place d’une diversité

Page 3: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Quelques repères

● Une des clés de l’immersion dans un monde virtuel est la projection de l’utilisateur d’une entité le représentant communément appelée avatar.

● L’avatar peut prendre des traits humains ou une tout autre incarnation sortie d’un imaginaire quelconque.

Page 4: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Quelques repères

● Afin de rendre agréable l’expérience virtuelle, les jeux vidéo s’emploient à instiguer une physionomie basée sur le style. Ils font varier également les différentes couches appliquées à l’avatar (items) afin que l’utilisateur puisse développer son propre personnage et refléter sa personnalité.

Page 5: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Plan de l’exposé

1. Introduction○ Déclaration d’intention○ Repérage des contraintes,

aperçu des objectifs○ Explication

2. Principes & solutions○ Modèles de “personnalisation”○ Classification, gestion du

dressing○ Physionomie, gestion de l’

apparence○ Plans, architecture logicielle

3. Rendu & optimisation○ Objectif 1D!○ Rendu des matériaux○ Traitements CG

4. Diversité

5. Bibliographie / Webographie

Page 6: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Points non traités

● Changement morphologique● Techniques de modélisation 3D● Techniques d’animation● Javascript● Comment faire du café● ...

Page 7: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

IntroductionDéclaration d’intention

Page 8: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Déclaration d’intention

Que souhaitons-nous obtenir ?

Page 9: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Déclaration d’intention

“ Nous souhaitons obtenir un avatar homme ou femme, actif, pouvant venir d'origines diverses, se vêtant d'une panoplie de tenues variées. Ces dernières refléteraient alors les usages et/ou l'esprit véhiculé par les courants culturels actuels. L'avatar aime son image, soigne son look et est fasciné par les combinaisons.”

Page 10: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Repérage

“ Nous souhaitons obtenir un avatar homme ou femme, actif, pouvant venir d'origines diverses, se vêtant d'une panoplie de tenues variées. Ces dernières refléteraient alors les usages et/ou l'esprit véhiculé par les courants culturels actuels. L'avatar aime son image, soigne son look et est fasciné par les combinaisons.”

Page 11: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Explication

● "homme ou femme" : ici le genre est clairement exprimé.● "actif" : indication d’une cible et donc une tranche d'âge ?● "venir d'origines diverses" : il y a ici un soucis de représentativité● "tenues variées" : la gestion d'un dressing est à prévoir.● "courants culturels actuels" : il faudra prendre en compte les

divertissements, styles musicaux (surtout!) etc.● "soigne son look" : un large choix dans la personnalisation. L’

apparence doit être gérée.● "fasciné par le changement" : cela nous indique le caractère

combinatoire des tenues.

Page 12: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Principes & solutionsModèles de “personnalisation”

Page 13: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Système de personnalisation

● Il existe plusieurs schémas de conception.● Chacun possède ces avantages propres.

Page 14: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Modèle monolithe

● Méthode de création simple.● Il existe donc autant d’avatars possibles que de modèle disponibles.● Les modèles nuancés sont totalement dupliqués (clone).

Page 15: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Modèle monolithe

● Comme il a été vu, cette méthode ne permet pas de combiner les modèles. Cependant, il est possible de décliner l’apparence d’un même modèle ce qui atténue l’effet clone.

Page 16: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Modèle monolithe

● Comme il a été vu, cette méthode ne permet pas de combiner les modèles. Cependant, il est possible de décliner l’apparence d’un même modèle ce qui atténue l’effet clone. X

Page 17: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Principe générique par remplacement

● Cette approche offre plus de souplesse dans la création des modèles et d’avantage de combinaisons. Le corps est fragmenté en plusieurs parties interchangeables.

Page 18: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Principe générique par agrégat

● Ce modèle est une variante du modèle de substitution.● Vision naturelle de l’habillage.● Les modèles sont à usage exclusif d’un corps prédéfini. ● Des solutions existent afin de répondre aux problèmes morphologiques

des corps (vision réaliste).

Page 19: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Principe dynamique complet

● Possibilité d’appliquer n’importe quel modèle à n’importe corps car les les ajustements sont réalisés dynamiquement.

● Le principe est très coûteux.● Il génère de nouvelle contraintes qui doivent être résolues par le biais d’

un système expert*.

* (cf. : cours de Marie-Paul Cani sur la Réutilisation et transfert des modèles 3D, Collège de France) .

Page 20: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

ClassificationGestion du dressing

Page 21: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Classification, gestion du dressing

● Chaque item et accessoire est issue d’une classification.

● Les items suivent la structure anatomique du corps et donc du maillage en cas de déformations et animations.

● Tout doit rentrer dans une case.● Pas de règles d’exception !!

Page 22: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Classification

Page 23: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Classification

Page 24: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

PhysionomieGestion de l’apparence

Page 25: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Classification

Page 26: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Physionomie, gestion de l’apparence

● Sets d’items

Page 27: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Physionomie, gestion de l’apparence

● Palette de couleurs

Page 28: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Plans, architecture logicielle

Page 29: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Rendu & optimisation 3dObjectif 1D!

Page 30: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Objectif 1D!

● Un drawcall correspond à l’action d’affichage d’un objet GL pendant une trame de rendu.

● Une instance d’objet GL (pas forcément 3D) possédant un matériau et/ou une texture représente un drawcall.

● Le CPU pousse le GPU les éléments à afficher avec un coût nominal variant selon les capacités de la machine ainsi que la résolution des buffers de l’objet (maîtrise des coûts).

Page 31: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Objectif 1D!

● Une opération permet de réduire les appels : le batching.● fusion des items dans une seule géométrie.● Assemblage des textures (atlas).● Un modèle 3D === Un shader.

une seule texture obtenue avec une opération de bin-packing

Page 32: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Objectif 1D!

● Une affaire d’optimisation

Page 33: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Rendu des matériaux

● Le matériau est représenté sur texture.● La texture apporte un réalisme sur les surfaces.

atlas complété des cartes

de textures

Page 34: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Rendu des matériaux

● Problème d’encodage des informations● Combinaison des intensités exprimé sur ● Combinaison des intensités + énergies lumineuses sur ● Cas des normales !!

Ex. :eps = 1000a1 = 0.123, b1 = 0.456c1 = a1||b1 = 0.123456

Page 35: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Rendu des matériaux

● Méthode du transfert de gradient● Préserve les caractéristiques● Supporte la multi-résolution

gradient A avec 3 points de caractérisations

gradient B avec 4 points de caractérisations

gradient C avec 2 points de caractérisations

Page 36: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Traitement CG

● Possibilité d’enlever les zones du corps couverts.● vertex color et matrice booléenne.● masquage VS suppression.

Temps réel Post-traitement

discard (shader) suppression des triangles

+ processus rapide et interactif

+ réversibilité- triangles cachés toujours

pris en compte - géométrie non optimale

+ géométrie optimisée+ géométrie allégée- processus lent- commutation non permise

Page 37: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Diversité

Page 38: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Diversité : pourquoi ?

● Dans le cadre d’une simulation, il y a nécessité de cohérence dans la représentation des individus.

● Peupler un environnement doit prendre en compte les paramètres qui le définissent.

● Une simulation informatique est capable de répondre plus rapidement (instanciation de milliers d’acteurs virtuels) que l’humain.

Page 39: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Diversité : simulation

● Nous devons classifier les tenues selon certains critères (couleur, style, tendance, etc.).

● Nous établissons les codes vestimentaire à partir de l’existant et calculons la probabilité d’association des tenues pour un code vestimentaire donné, conditionné à une cause (typiquement un réseau baysien).

Page 40: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Diversité : simulation

● Formulons quelques hypothèses.● Probabilité qu’un item appartienne à style X.● Probabilité qu’un set items appartienne au cv.● Probabilité que le cv respecte la tendance.● Probabilité que le cv respecte les préférences de l’individu.

Page 41: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Diversité : simulation

● Nous constituons une palette de couleur et définissons les harmonies (gamme des tendances par constat ou apprentissage).

Page 42: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Diversité : simulation

● La résolution peut s'effectuer soit de manière déterministe ou probabiliste.

● suggestions (recommandation) :

CV Casual = 0.68CV Sport = 0.12CV Business = 0.77

CV Casual = 0.73CV Sport = 0.67CV Business = 0.02

CV Casual = 0.81CV Sport = 0.16CV Business = 0.09

Page 43: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

Bibliographie / Webographie

● Jason Mitchell, Moby Francke, Dhabih Eng, Illustrative Rendering in Team Fortress 2 (2007)

● Rozenn Bouville, Interopérabilité des environnements virtuels 3D : modèle de réconciliation des contenus et des composants logiciels (2012)

● Kamal Siegel, How to build a character customization system (2008)● Jonas Materinez, Space-optimized texture atlases (2013)● Lap-Fai Yu1, Sai-Kit Yeung2, Demetri Terzopoulos1, Tony F. Chan3,

DressUp! Outfit Synthesis Through Automatic Optimization (SIGRAPHAsia 2012)● Carol O’Sullivan, Variety Is the Spice of (Virtual) Life (2009)● Marie-Paul Cani, Design Preserving Garment Transfer, ACM Transactions

on Graphics, Association for Computing Machinery (ACM), 2012

Page 44: WebGL Paris 2015  - Conférence de S.Benchaa (Lead Graphics Engineer @Beloola)

TESTEZ NOTRE DEMO !

Un grand merciSofiane Benchäa, Lead Graphics Engineer

[email protected]

@beloola