How to change vertices of a mesh?

[timetocode]

I'm trying to create a mesh that consists of a few dozen triangles that are going to change every frame (hopefully performs okay....)

How do I actually do that though?

Create mesh:

const shader = Shader.from(vertexSrc, fragSrc)

const geometry = new Geometry()
    .addAttribute('aVertexPosition', [initialVerts])
    .addAttribute('aVertexColor', [initialColors])

const mesh = new Mesh(geometry, shader, null, DRAW_MODES.TRIANGLES)

Attempt at changing aVertexPosition and aVertexColor each frame:

mesh.geometry.addAttribute('aVertexPosition', newVertices)
mesh.geometry.addAttribute('aVertexColor',  newColors)

Error:  Cannot read property 'updateID' of undefined;  originating from GeometrySystem.updateBuffers.

[bubamara]

this should work:

const buffer = mesh.geometry.getBuffer('aVertexPosition');

updateLoop(() =>
{
    // change 1st vertex
    buffer.data[0]++;

    buffer.update();
});

 

[ivan.popelyshev]

buffer.update(newVertices)

where new buffer is buffer attached to one of your attributes

[timetocode]

Thanks @bubamara and @ivan.popelyshev I've been able to mutate my mesh a bit now. 

I'm stuck trying to change the indices, any idea what I'm doing wrong?

const vertBuffer = geometry.getBuffer('aVertexPosition')
vertBuffer.update(new Float32Array(vertices))  // works
const colorBuffer = geometry.getBuffer('aVertexColor')
colorBuffer.update(new Float32Array(colors))   // works
const indexBuffer = geometry.getIndex()
indexBuffer.update(new Float32Array(indices))  // makes my mesh disappear

All of this except changing the indices seems to work. If I change the indices my object vanishes.

The `vertices`, `colors` and `indices` aren't actually changing -- i'm just creating the same circle over and over again and trying to update the buffers.. so maybe I have a more basic issues that is making my shape disappear.

Here is the shape that I'm drawing (black lines and green points added for debugging, the mesh is the whole lighting overlay of a radial gradient within the circle and shadows in the other triangles).

Edited March 2, 2020 by timetocode

[timetocode]

Nevermind! The bug was that indices are an Int32Array and I had turned them into Float32s.

[bubamara]

Uint16Array actually, but glad you found it.

[ivan.popelyshev]

not all devices support int32, use uint16

btw you can pass Float32Array there once and then modify the array itself , just calling "buffer.update()" each time you do that. No need of creating new instances of array each time. It doesnt matter in small cases (~1000 vertices) but does matter in big ones 10k-100k

Edited March 2, 2020 by ivan.popelyshev