imagenes - animaciones javascript para tu web

¿Cómo puedo animar un objeto en WebGL(modificar vértices específicos NO transformaciones completas)

Question

Bueno,

Soy nuevo en gráficos 3D y quiero animar vértices específicos individuales en un modelo (NO transformaciones de modelo completo) . Mi script se basa en gran medida en el tutorial de NEHE webgl. En este tutorial, todos los vértices de objetos se almacenan en un búfer, que se inicializa una vez cuando el programa se ejecuta por primera vez. Aquí está el código de inicialización: * Los vértices de nota contienen una matriz de vértices

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);

Ahora, debido a que estos se inicializan al inicio, obviamente, cambiar la matriz de vértices no hará nada. Así que me preguntaba cómo es la mejor manera de modificar los vértices en tiempo real y al mismo tiempo mantenerlo lo suficientemente eficiente como para funcionar sin problemas.

¿Es posible volver a vincular el búfer de alguna manera, por ejemplo, ejecutar este código nuevamente en cada tic de animación?

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

Saludos, j

Answer 1

Alternativamente, puede seguir los pasos que se explican en http://learningwebgl.com/blog/?p=239 .

Aquí se mantienen constantes los datos del vértice. En su lugar, siguen cambiando la matriz mvMatrix que proporciona las traslaciones y rotaciones necesarias. mvMatrix se alimenta al sombreador a través de una variable uniforme y luego se multiplica por la posición del vértice para obtener las nuevas posiciones del vértice. Espero que esto ayude.

Answer 2

Está bien después de mucho cavar a través de la red. He encontrado que se deben hacer los siguientes cambios; En primer lugar, debe hacer que la matriz de vértices sea dinámica. esto es posible utilizando el enumerador ''gl.DYNAMIC_DRAW'', donde anteriormente en la mayoría de los tutoriales tenemos ''gl.STATIC_DRAW''. Resultando en lo siguiente:

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

El segundo cambio debe activarse en la función de bucle (o tic, o animación). Se llama una nueva función para actualizar la matriz. Primero debe desvincularse primero el búfer de matriz dinámica anterior:

gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

luego, después de esto, actualiza los vértices antiguos con la siguiente función:

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

Donde los parámetros son <buffer_type>, <array_offset>, <new_data>

Fuente: http://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf

Espero que esto ayude a alguien :)

J