Как анимировать сетку в webgl

Question

Я новичок в поле WebGL, и мне нужно анимировать человеческое лицо, у меня есть сетка из полигонов, загружаемая с https://sketchfab.com/models/4d07eb2030db4406bc7eee971d1d3a97, как я могу выбрать точки на глазах, ртах и ​​т. Д. и переместить их для создания выражений? Заранее спасибо

Answer 1

Я просто вручную распаковал загрузку и из того, что я могу рассказать о ее просто наборе текстур, bumpmaps и т. д., с испеченным в статическом освещении ..., чтобы вы могли визуализировать модель как статическую 3D-модель используя WebGL/OpenGL ... быстрый быстрый анализ предполагает, что вам будет необходимо определить все возможные предполагаемые движущиеся/анимированные биты и бобы.

Это не значит, что вам не мешает ... на самом деле такой статический набор данных мог бы быть красивой скалой, из которой можно катить свою собственную анимацию поверх того, что это дает вам

После того, как вы сделаете ее статически, следующим шагом будет создание picker ... что является прозой ss, где вы интерактивно перемещаете: (модель и/или камера и/или глаз), чтобы определить местоположение XYZ желаемых сегментов (вершины/многоугольники), а затем группировки таких сегментов.

Допустим, вы использовали свой picker, чтобы разграничить всю голову от шеи или сказать один глаз с лица. Теперь вы разделите каждого на свой объект в своей модели. Это разделение позволяет перемещать каждый объект в целом независимо от других объектов. В то время как изначально вся модель была единственным объектом и ей приходилось перемещаться как монолитный blob

Теперь, когда исходный набор данных стал набором независимо перемещаемых объектов, вы можете ввести новые графические элементы, которые не были частью исходного набора данных. Здесь он становится креативным. Программно вы можете динамически перемещать подразделы сетки. Группы вершин и ребер. Задача состоит в том, что вам также придется одновременно перемещать все соответствующие записи в различные файлы текстур для этих вершин/ребер, которые были бы кошмаром и не были предназначены для использования в данном наборе данных.

Набор данных, который вы выбрали, чрезвычайно реалистичен из-за многоуровневого набора файлов текстур, все в точном соответствии с текущим состоянием статического рендеринга/освещения. Возможно, что вам выгодно, чтобы помочь динамически оживить сетку, - это начать с простой сетки или во многом упростить динамическую синтез вашей собственной сетки «ab initio», которая позволяет более легко идентифицировать отдельные объекты для их анимации, выполнить все ваше собственное освещение и т. д. самостоятельно, чтобы дать ему возможность для последующей обработки

Answer 2

WebGL is just a rasterization library. Он рисует линии, точки и треугольники. Вот и все. Все остальное зависит от вас.

Для загрузки и рисования 3D-модели требуются сотни или тысячи строк кода. Возможность выбора частей модели (глаз, рта, языка) требует еще большего количества кода и структуры, ни одна из которых не имеет ничего общего с WebGL. Анимация такой модели требует еще большего количества кода, который не имеет ничего общего с WebGL.

Я предлагаю вам использовать библиотеку, такую ​​как three.js, которая поддерживает загрузку моделей, выбор их частей и их анимацию. Говорить вам, как делать все это в WebGL напрямую, в основном будет целая книга, и это слишком широкая тема для одного вопроса о переполнении стека.

В противном случае сделать это в WebGL очень много.

Сначала вам нужно написать 3D-движок, потому что, как я сказал выше, WebGL is just a rasterization library. Это не делает 3D для вас. Вы должны написать код, чтобы сделать его 3D.

Вы хотите загрузить 3d модель.Вы связаны с этим изображением

Оказывать этот образ в WebGL вам нужно написать несколько видов шейдеров. Глядя на этот образ, вам нужно будет написать как минимум shadow casting system, что-то вроде normal mapping shader with lighting и bloom post processsing system (см. Свечение на макушке). Каждая из этих тем - целая глава в книге о 3D-графике. WebGL не делает это за вас. Он просто рисует треугольники. Вы должны предоставить весь код, чтобы заставить WebGL нарисовать этот материал.

К тому же вам нужно сделать какой-то scene graph, чтобы представить различные части головы (глаза, уши, нос, рот, ...). Предполагается, что модель настроена на части. Это может быть только одна сетка.

Предполагая, что он настроен на части, вам необходимо будет установить skinning system. Это еще одна целая глава книги по 3D-графике. Системы шкуры позволят вам открывать и закрывать веки или рот, например. Без системы скинов многоугольники, делающие голову, будут разлетаться друг от друга. Другим вариантом было бы использовать систему смешивания , если бы вы морфировали между несколькими моделями, которые используют одну и ту же топологию, но с такой системой будет сложно анимировать глаза и рот.

После всего этого вы можете начать внедрять систему анимации, которая позволяет перемещать кости вашей системы скинов для анимации.

Тогда, помимо всего прочего, вам нужно будет выяснить, как взять данные с модели, с которой вы связались, и превратить ее в данные, которые может использоваться только двигатель, который вы только что потратили за несколько месяцев, описанные выше.

Я только предполагаю, что вы, вероятно, не знали, сколько будет работы, потому что WebGL ничего не делает для вас, поскольку он просто рисует треугольники. Если вы действительно хотите узнать все это и сделать все это, я начну с http://webglfundamentals.org, чтобы узнать основы WebGL и их расширения, пока вы не сможете сделать все это. Это был бы отличный опыт обучения. Я только предполагаю, что потребуется несколько месяцев, пока вы не сможете загрузить эту голову и оживить части своего собственного кода WebGL.

Или вы можете пропустить все это и просто use a library, что уже делает большинство из этого для вас.