Как я могу анимировать объект в WebGL (изменить определенные вершины, а не полные преобразования)

Хорошо,

Я новичок в 3D-графике и хочу анимировать отдельные определенные вершины в модели (НЕ преобразования всей модели). Мой сценарий в значительной степени основан на учебнике NEHE webgl. В этом руководстве все вершины объектов хранятся в буфере, который инициализируется один раз при первом запуске программы. Вот код инициализации: *Примечание vertices содержит массив вершин

vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
vertexBuffer.itemSize = 3;
vertexBuffer.numItems = parseInt(vertices.length/vertexBuffer.itemSize);

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

Можно ли каким-то образом перепривязать буфер, например, снова запустить этот код при каждом такте анимации?

gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

Привет, Дж.


javascript animation webgl buffer vertex
person Josh Mc    schedule 31.03.2011    source источник

Ответы (2)


arrow_upward
50
arrow_downward

Ладно, после долгих копаний в сети. Я обнаружил, что необходимо внести следующие изменения; прежде всего, вы должны сделать буфер массива вершин динамическим. это стало возможным благодаря использованию перечислителя «gl.DYNAMIC_DRAW», где ранее в большинстве руководств мы использовали «gl.STATIC_DRAW». В результате получилось следующее:

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.DYNAMIC_DRAW);

Второе изменение должно быть запущено в вашей функции цикла (или тика, или анимации). Новая функция вызывается для обновления массива. Вы должны сначала связать предыдущий буфер динамического массива:

gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

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

gl.bufferSubData(gl.ARRAY_BUFFER, 0, new Float32Array(vertices));

Где параметры ‹buffer_type>, ‹array_offset>, ‹new_data>

Источник: http://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf

Надеюсь, это поможет кому-то :)

J

person Josh Mc    schedule 31.03.2011
comment
Это очень помогло мне! У меня был точно такой же вопрос, и вы предоставили рабочее решение вместе с разумным объяснением. Спасибо! - person Thomas; 27.10.2011
comment
Есть ли причина, по которой этот ответ и исходный вопрос имеют bufferData вместо gl.bufferData? Я предполагаю опечатку, но, поскольку она перенесена, возможно, я что-то упускаю. - person Grumdrig; 16.09.2012
comment
Хорошее определение, должно быть, скопировано из спецификации. Буду обновлять :) - person Josh Mc; 10.09.2013
comment
Вы только что сделали мой проект возможным! - person Sonofblip; 26.11.2014

arrow_upward
4
arrow_downward

В качестве альтернативы вы можете выполнить шаги, описанные в http://learningwebgl.com/blog/?p=239< /а>.

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

person Anirudha Patro    schedule 03.08.2012