Динамическое изменение вершинного буфера в WebGL - PullRequest
Новая
       9

Динамическое изменение вершинного буфера в WebGL

10 голосов
/ 24 августа 2011

Я разрабатываю симулятор ткани в WebGL, подготовил всю физику и анимацию, но я просто не могу отрендерить его. Я привык использовать glVertex в Opengl, поэтому на каждой итерации я могу изменить положение вершины, и она будет двигаться, но в WebGL (OpenGL ES) такого метода нет.

Это мой код: 

//Initialization:
    puntosBuffer= gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, puntosBuffer);
    telaVertices3=new Array(12);
    telaVertices3=[
    0.0,0.0,0.0,
    2.0,0.0,0.0,
    1.0,1.7,0.0,
    0.0,1.0,0.0
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(telaVertices3), gl.DYNAMIC_DRAW);

//loop:
    posx=posx+0.2;
    telaVertices3[0]=posx;
    gl.bindBuffer(gl.ARRAY_BUFFER, puntosBuffer);
    gl.bufferSubData(gl.ARRAY_BUFFER, 0, new Float32Array(telaVertices3));

Но он всегда рендерит в одинаковых точках !!!

1 Ответ

14 голосов
/ 14 сентября 2011

Я использую дополнительные звонки на gl.bufferData(...) вместо gl.bufferSubData(...). Я не знаю, имеет ли это значение или нет, но я думаю, что это единственное, что я делаю иначе, чем твой пример.

Вы можете увидеть мою текущую реализацию управления буфером в jax / buffer.js # L48 и более старую версию в webgl / buffer.js # L26 . Как видите, я не делаю ничего особенного: 

gl.bindBuffer(self.bufferType, buffer);
gl.bufferData(self.bufferType, instance, self.drawType);

Вы можете увидеть анимацию в живом демо на webgldemos / md2 .

Однако

Если вы планируете обновить много вершин одновременно, то это, вероятно, не лучший метод. Вместо этого я бы предложил отправить соответствующие данные на видеокарту и выполнить анимацию непосредственно в GLSL, чтобы вы не ограничивались медлительностью JavaScript и могли использовать преимущества аппаратного ускорения. Фактически, я перевожу большую часть своего кода для работы таким образом. Два живых примера манипулирования вершинами на видеокарте доступны в jax / blobular и jax / meadow . Исходный код для этих демонстраций находится в свободном доступе здесь и здесь соответственно.

Надеюсь, это было полезно для вас.

...