Стратегия для анимации большой сетки в three.js?

Question

Я относительно новичок в three.js, но не OpenGL (хотя это было время :-). Я работаю своим путем, хотя куча примеров, чтобы познакомиться с трио.js. Я решил перенести некоторые из демонстраций NeHe. Большинство из них достаточно легкие (хотя и образованные). Однако демонстрация 11 по существу создает большой (45x45) сетку GL_Quads (в ​​старом OpenGL) и отображение текстуры для каждого набора вершин. Затем на каждом кадре анимации изменяются значения Z сетки, а сетка воссоздается, чтобы вызвать ее пульсацию.

В OpenGL 1.x с C++ или Java, не имеет большого значения. Он хорошо работает, чтобы просто воссоздать вершины и отображение текстур. В трех.js было достаточно легко закодировать (меняя каждый набор вершин на пару треугольных граней, но производительность является ужасной.

Я увидел демо-версию размахивающей ткани на сайте three.js (http://threejs.org/examples/webgl_animation_cloth.html) который выглядит так, как будто он использует шейдеры непосредственно для выполнения работы. Поэтому мой вопрос: я что-то упускаю (например, есть эффективный способ сделать это без перехода на уровень шейдера), или мне пора узнать больше о шейдерах?

Answer 1

Ответ в этом случае заключается в том, что я могу решить свою проблему с параметрической геометрией, поскольку форма и ее дисперсия очень просты. Более сложная поверхность (например, реальная трехмерная поверхность), вероятно, потребует изучения шейдеров. , но думаю, что я буду ходить до запуска.

UPDATE: Использование ParametricGeometry работает и работает быстрее, но производительность по-прежнему оставляет желать лучшего. Поэтому я рассмотрю другие решения, такие как спуск к уровню шейдеров.

Answer 2

Да, для этого вам следует использовать шейдер.

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

Но для полностью динамичной вещи, такой как вода, где вы можете бросать камни, я думаю, вам нужен ваш собственный (похожий) шейдер. Надеюсь, это достаточно просто с примерами и т. Д., Делите, когда сделайте это, если сможете :)