Comment animer mesh dans webgl

Question

Je suis nouveau dans le domaine WebGL, et je devrais animer un visage humain, j'ai le maillage de polygones, téléchargé de https://sketchfab.com/models/4d07eb2030db4406bc7eee971d1d3a97, comment puis-je sélectionner les points sur les yeux, la bouche, etc. et les déplacer pour créer les expressions? merci d'avance

Answer 1

Je viens de décompresser manuellement le téléchargement et de ce que je peux dire c'est juste un ensemble de textures, bumpmaps, etc, avec un éclairage statique cuit ... pour vous permettre de rendre le modèle comme un modèle 3D statique en utilisant WebGL/OpenGL ... un rapide examen superficiel suggère que ce serait à vous d'identifier tous les différents bits et bobs mobiles/animés putatifs

Ceci n'est pas pour vous décourager ... en fait un tel jeu de données statique pourrait être un bon substrat rocheux à partir duquel rouler votre propre animation au-dessus de ce que cela vous donne

Une fois que vous le rendre statiquement, l'étape suivante serait de créer un picker ... qui est un proce ss où vous déplacez interactivement le: (modèle et/ou caméra et/ou œil) de sorte que vous identifiez l'emplacement XYZ des segments souhaités (vertex/polygones), puis les groupements de tels segments. Disons que vous avez utilisé votre picker pour délimiter la tête entière du cou, ou dire un œil du visage. Maintenant vous devez séparer chacun dans son propre objet dans votre modèle. Cette séparation vous permet de déplacer chaque objet dans son ensemble indépendamment des autres objets. Alors que le modèle entier était initialement un objet unique et qu'il devait se déplacer comme un objet monolithique

Maintenant que l'ensemble de données source original est devenu un ensemble d'objets déplaçables indépendamment, vous pouvez introduire de nouvelles entités graphiques qui ne faisaient pas partie de l'ensemble de données original. Voici où il devient créatif. Par programme, vous pouvez déplacer dynamiquement des sous-sections du maillage. Groupes de vertex et de bords. Le défi est que vous devez également déplacer simultanément toutes les entrées correspondantes à travers les différents fichiers de textures pour ces vertex/bords, ce qui serait un cauchemar et n'est pas un cas d'utilisation prévu pour l'ensemble de données donné.

L'ensemble de données que vous avez choisi est extrêmement réaliste en raison de l'ensemble de fichiers de texture en couches qui correspondent exactement à l'état actuel du rendu/éclairage statique. Peut-être que ce qui pourrait vous aider, pour aider dynamiquement l'animation du maillage, est de commencer par un maillage simple, ou de plusieurs façons de synthétiser dynamiquement votre propre maillage "ab initio", que vous pouvez identifier plus facilement les objets distincts pour les animer, effectuer tous vos propres éclairage etc. vous-même pour lui donner ce clin d'oeil post-traitement

Answer 2

WebGL is just a rasterization library. Il dessine des lignes, des points et des triangles. C'est tout. Tout le reste dépend de toi.

Charger et dessiner un modèle 3D nécessite des centaines ou des milliers de lignes de code. Etre capable de sélectionner des parties d'un modèle (yeux, bouche, langue) nécessite encore plus de code et de structure, ce qui n'a rien à voir avec WebGL. L'animation d'un tel modèle nécessite encore plus de code qui n'a rien à voir avec WebGL.

Je vous suggère d'utiliser une bibliothèque comme three.js qui prend en charge les modèles de chargement, en sélectionnant des parties et en les animant. Vous dire comment faire tout cela directement dans WebGL serait fondamentalement un livre entier et est un sujet trop large pour une question sur Stack Overflow.

Sinon, le faire en WebGL demande beaucoup de travail.

D'abord, vous devez écrire un moteur 3D car comme je l'ai dit ci-dessus WebGL is just a rasterization library. Cela ne fait pas 3D pour vous. Vous devez écrire le code pour le faire en 3D.

Vous souhaitez donc charger un modèle 3D.Vous lié à cette image

Pour rendre cette image en WebGL vous devez écrire plusieurs types de shaders. En regardant cette image, vous auriez besoin d'écrire au moins une sorte de shadow casting system, une sorte de normal mapping shader with lighting, et bloom post processsing system (voir la lueur sur le dessus de sa tête). Chacun de ces sujets est un chapitre entier dans un livre sur les graphiques 3D. WebGL ne le fait pas pour vous. Ça dessine juste des triangles. Vous devez fournir tout le code pour que WebGL dessine ce genre de choses.

En plus de cela, vous devez faire une sorte de scene graph pour représenter les différentes parties de la tête (yeux, oreilles, nez, bouche, ...) Cela suppose que le modèle est mis en pièces. Il pourrait s'agir d'un seul maillage.

En supposant qu'il est configuré en parties, vous devrez implémenter un skinning system. C'est un autre chapitre d'un livre sur les graphismes en 3D. Les systèmes de skinning vous permettront d'ouvrir et de fermer les paupières ou la bouche par exemple. Sans un système de dépouillement, les polygones faisant la tête s'écarteront. Une autre option serait d'utiliser un mélange de formes système si vous morph entre plusieurs modèles qui partagent la même topologie, mais il sera difficile d'animer les yeux et la bouche séparément en utilisant un tel système. Après tout cela, vous pouvez commencer à mettre en œuvre un système d'animation qui vous permet de déplacer les os de votre système de skinning pour animer. Ensuite, en plus de tout cela, vous devrez trouver comment prendre les données du modèle auquel vous avez lié et les transformer en données que le moteur que vous venez de passer plusieurs mois à écrire peut utiliser. Je ne fais que deviner que vous ne saviez probablement pas combien de travail cela allait être parce que WebGL ne fait rien pour vous puisqu'il ne fait que dessiner des triangles. Si vous voulez vraiment apprendre tout cela et tout faire vous-même je commencerais par http://webglfundamentals.org pour apprendre les bases de WebGL et de leur développement jusqu'à ce que vous puissiez faire tout cela. Ce serait une excellente expérience d'apprentissage. Je devine juste que cela prendra plusieurs mois jusqu'à ce que vous puissiez charger cette tête et animer les parties dans votre propre code WebGL.

Ou vous pouvez ignorer tout cela et juste use a library qui fait déjà la plupart de cela pour vous.