Three.js et Blender (Cycles)

Prenez un café et parlons de tout et de rien !

Modérateurs : frez, Yadoob, stilobique, ModSquad

Three.js et Blender (Cycles)

Message par Layo » 07 Août 2014, 15:43

Salut !

J'espère trouver sur ce forum une réponse à mon problème, qui concerne l'import d'un mesh fait par Blender sur une page web avec le WegGL à l'aide d'une bibliothèque JavaScript : Three.js

J'arrive déjà à importer à peu près ce que je veux avec dans le mode Blender Render, mais étant plutôt habitué à Cycles, je souhaitais donc importer des mesh créés en utilisant ce mode de rendu. Je me doute que cette méthode est possible car avec l'exporteur de Three.js que j'ai installé, un nouvel onglet intitulé "THREE", situé tout en bas du panneau "Material" s'ouvre et me propose différentes options
Image

Cependant, lorsque je charge mon fichier et l'exporte sur une page web, les matériaux ne semblent pas bien pris en compte. "Pas bien pris en compte" parceque visiblement Three.js reconnaît bien qu'il y a 3 matériaux différents mais ne leur applique ni les bonnes couleurs, ni leurs propriétés comme la réflexion de la lumière... etc.
Image

Je suppose que le problème vient d'un des paramètres de l'onglet "THREE" mais je ne sais pas ce que chacun signifie et je suis donc légèrement en galère à ce niveau.
J'ai déjà cherché sur le site officiel de Blender mais la doc' ne fait même pas mention de l'exporteur Three.js et je n'ai rien trouvé sur le web de bien consistant sur le sujet.

Je m'en remet donc à vous en espérant que quelqu'un sur ce forum ait déjà pratiqué la chose et puisse m'éclairer sur celle-ci.

Merci d'avoir lu dans tous les cas et bonne journée. :)



ps : Je profite d'ailleurs de ce premier message sur ce forum pour remercier l'auteur du tutorial qui m'a aidé à créer la montre que j'essaye d'importer et qui m'a permit de découvrir ce site. ;)
Layo
 
Message(s) : 4
Inscription : 07 Août 2014, 15:22

Re: Three.js et Blender (Cycles)

Message par stilobique » 07 Août 2014, 16:52

Web GL >> Temps Réel >> Baking. Je ne connait pas Three.js mais ça reste la solution la plus simple. Tu pourra baker notamment ton AO par dessus. Sinon regarde côté solution de Blend4web.

Amuse toi bien ^^ .
Avatar de l’utilisateur
stilobique
 
Message(s) : 1368
Inscription : 07 Sep 2013, 09:26
Localisation : France

Re: Three.js et Blender (Cycles)

Message par Layo » 08 Août 2014, 08:37

Désolé mais je n'ai pas très bien compris ce que tu voulais dire par là, est-ce que tu pourrais détailler s'il te plait ? Je ne suis pas trop familier avec Blender et surtout ce qui concerne la partie texture, UV Mapping etc.

Pour Blend4web j'avais déjà regardé mais ça ne correspondait pas vraiment à mes attentes.

Merci en tout cas pour ta réponse. : :P
Layo
 
Message(s) : 4
Inscription : 07 Août 2014, 15:22

Re: Three.js et Blender (Cycles)

Message par lapineige » 08 Août 2014, 09:31

En fait il te faut pré-calculer tes matériaux/textures, pour qu'il puisse garder en mémoire une simple texture ("couleur") a appliquer directement sur ton modèle.
Cette opération s'appelle le baking. Tiens un tuto avec Cycles: http://www.blenderguru.com/tutorials/in ... ng-cycles/


Ton problème venait du fait qu'il n'avait aucune texture à plaquer sur ton modèle, juste une couleur de base.
Mon terrier/blog: https://lapineige.fr/wp (l'ancien: le-terrier-de-lapineige.over-blog.com) | Mon GitHub: https://github.com/lapineige/Blender_add-ons | Lapineige's Tools: http://cgcookiemarkets.com/blender/all- ... ompilation
Avatar de l’utilisateur
lapineige
 
Message(s) : 3716
Inscription : 25 Juin 2014, 07:06

Re: Three.js et Blender (Cycles)

Message par Layo » 11 Août 2014, 09:30

Ok, j'ai regardé le tuto, tout marche comme il faut dans Blender, du moins je suppose.. sauf que ça ne marche toujours pas lors de l'import sur une page web.
Je note toutefois des changements par rapport à avant, comme le fait que maintenant, quand je change certains paramètres de l'exporteur THREE.JS dans Blender, j'en vois les effets sur le modèle placé sur le web. Cependant, je n'arrive toujours pas à visualiser les textures qui sont pourtant bien appliquées dans Blender..
Je sens que je suis sur la bonne voie, et qu'utiliser le baking est bien la bonne solution (et je tiens à vous remercier encore pour m'avoir aiguiller là-dessus), mais les résultats ne sont toujours pas là. :/

Est-ce que du coup quelqu'un a déjà réussi ce que je cherche à faire, c'est à dire importer un mesh créé dans Blender, avec différents materials, texturé etc, le tout sur Cycles, et à le voir de la même façon qu'on le voit lors d'un rendu Blender mais sur une page web ?
Layo
 
Message(s) : 4
Inscription : 07 Août 2014, 15:22

Re: Three.js et Blender (Cycles)

Message par lapineige » 11 Août 2014, 09:51

Comment exporte tu ton fichier ? Il est possible que les matériaux Cycles ne soit pas reconnus. Essaye de créer un matériaux Internal avec les textures baké depuis Cycles.
Mon terrier/blog: https://lapineige.fr/wp (l'ancien: le-terrier-de-lapineige.over-blog.com) | Mon GitHub: https://github.com/lapineige/Blender_add-ons | Lapineige's Tools: http://cgcookiemarkets.com/blender/all- ... ompilation
Avatar de l’utilisateur
lapineige
 
Message(s) : 3716
Inscription : 25 Juin 2014, 07:06

Re: Three.js et Blender (Cycles)

Message par Layo » 11 Août 2014, 13:32

J'exporte mon fichier avec l'exporteur Three.js
Quelques screenshots :
http://image.noelshack.com/fichiers/201 ... shot-3.jpg
http://image.noelshack.com/fichiers/201 ... shot-4.jpg

Alors effectivement les matériaux créés avec Cycles ne sont pas reconnus. Cependant, la possibilité de "baker" ces matériaux pour finalement avoir un fichier à part avec la texture me semblait pouvoir palier à ce problème.

Ok je vais essayer, par contre avant si tu pouvais m'expliquer rapidement ce qu'est un matériaux internal je t'en serai très reconnaissant. :p
Layo
 
Message(s) : 4
Inscription : 07 Août 2014, 15:22

Re: Three.js et Blender (Cycles)

Message par jemian » 11 Août 2014, 13:55

il veut sans doute dire faire ton matériaux en blender render et non en cycle render
Sans doute le format n'utilise même pas les nodes
Avatar de l’utilisateur
jemian
 
Message(s) : 2796
Inscription : 03 Fév 2014, 01:52
Localisation : Brest

Re: Three.js et Blender (Cycles)

Message par lapineige » 11 Août 2014, 20:10

Jemian: on venais d'en parler ^^

Je te laisse regarder des tutos, désolé je pars ne vacances là ^^
Mon terrier/blog: https://lapineige.fr/wp (l'ancien: le-terrier-de-lapineige.over-blog.com) | Mon GitHub: https://github.com/lapineige/Blender_add-ons | Lapineige's Tools: http://cgcookiemarkets.com/blender/all- ... ompilation
Avatar de l’utilisateur
lapineige
 
Message(s) : 3716
Inscription : 25 Juin 2014, 07:06

Re: Three.js et Blender (Cycles)

Message par cedric » 11 Août 2014, 20:25

Encore ? Chanceux !
Cédric Lepiller, Freelance 3D Pitiwazou.com, Mes Addons, Asset Management, Speedflow
Avatar de l’utilisateur
cedric
Administrateur
 
Message(s) : 7049
Inscription : 03 Août 2013, 21:36

Re: Three.js et Blender (Cycles)

Message par lapineige » 11 Août 2014, 20:32

Ouais bon ça me fait un peu chier, mais ça je te le dirais sur skype.
Disons que je pars en Sicile et qu'il y fait 40°C à l'ombre...
Mon terrier/blog: https://lapineige.fr/wp (l'ancien: le-terrier-de-lapineige.over-blog.com) | Mon GitHub: https://github.com/lapineige/Blender_add-ons | Lapineige's Tools: http://cgcookiemarkets.com/blender/all- ... ompilation
Avatar de l’utilisateur
lapineige
 
Message(s) : 3716
Inscription : 25 Juin 2014, 07:06

Re: Three.js et Blender (Cycles)

Message par jcfrog » 25 Août 2014, 13:34

Salut,
les matériaux complexes de type Cycle ne sont pas exportés.
Le WebGL et ThreeJS ont leur gestion des matériaux, l'exporteur blender transférera certains paramètres mais pas de quoi rêver à un rendu de type Cycle. De toute façon ils faut recréer les éclairages et l'environnement.
L'idée est d'exporter des UVs et de calculer des supers textures (pour diffuse, bump, normals...)

Pour profiter de la qualité du rendu il faut effectivement faire du "texture baking", c'est à dire en gros calculer le rendu de haute qualité pour le plaquer sur des textures qui serviront à simuler la finesse des détails. Nous on a aussi fait de la retopologie pour avoir des mesh bien plus légères.

J'ai fait un post là dessus pour nos jeux d'échec en WebGL:
http://www.jocly.com/optimize-3d-chess-piece-design

Bonne nouvelle, le baking est désormais aussi possible avec Cycle (ce qui n'était pas le cas lorsque j'ai fait mes pions)

C'est justement en cherchant un peu de doc sur cette nouveauté que je suis tombé ici ;)

Je conseille aussi le dernier tuto d'Andrew Price: https://www.youtube.com/watch?v=sB09T--_ZvU

jerome

Image
jcfrog
 
Message(s) : 1
Inscription : 25 Août 2014, 13:20

Re: Three.js et Blender (Cycles)

Message par stilobique » 25 Août 2014, 15:16

Sympa le taff sur le jeu d'échec.
Avatar de l’utilisateur
stilobique
 
Message(s) : 1368
Inscription : 07 Sep 2013, 09:26
Localisation : France


Retour vers Le Salon

Qui est en ligne ?

Utilisateur(s) parcourant ce forum : Aucun utilisateur inscrit et 2 invité(s)

cron