Can't animate WEBGL model in draw loop

p5.js Coding Questions
1

Hi,

I’m loading 2 objs files with loadModel. Both objs have the same vert count, and because of this I’m trying to animate the verts to lerp from one model onto the other in the draw loop.

I have direct access to the model’s vertices so I’m editing their values to do this. Any changes to the vertices are only reflected on the first frame then have no effect on the model beyond that. Do I have a call a method or something to refresh the model to update to its current vertex values?

Here’s a simple example where I edit a vertex, and it only works on frame 0.

2

Actually it’s not officially supported :frowning:

3 Likes
3

Thanks that got me a bit closer. I’m able to animate the mesh but for some reason I can’t seem to clear drawing of the original model.

I’m trying to check out the source code for p5.Geometry for anything to refresh it but don’t see anything useful.

4

There we go, this hack seems to do it!

You need to set a few properties from the model to its dirtyFlags. This seems to trigger it to clear and redraw. Let me know if I can optimize it in any way!

1 Like
5

Here’s a test blending through multiple models to drive its jaw :slight_smile:

6

Hi there,
I’m also trying to change the vertices parameter of the WEBGL model to animate in draw loop. But I am currently encountering the same problem, and parameter adjustments are only reflected in the first frame. Changes can only be seen by refreshing the page. Do you still save your solution? Or can you describe the specific steps? The link above seems to be expired. Looking forward to your reply.

and attach the link of my code：p5js obj glitch - Pastebin.com

1 Like
7

Hello @Zuheng ,

There was a reference to dirtyFlags in this topic as a solution.

A bit of searching led me to this:
p5Shader - Is there a way to specify custom attributes? · Issue #5120 · processing/p5.js · GitHub

Take a look at example in live version in above link for a solution.

A snippet from the live version:

  {
    m.dirtyFlags.vertices = true;
    m.dirtyFlags.vertexColors = true;
    
    /* Mini dirty hack (2a)
       Propogate "dirty" state to default stroke shader
    */
    // Recalculate lines (when change vertices)
    m._makeTriangleEdges()._edgesToVertices();
    m.dirtyFlags.lineVertices = true;
    m.dirtyFlags.lineNormals = true;
  }

Experiment a little… you may not need all of the lines in snippet.

This worked for me in a similar example.

If you follow the link by @micuat in this topic there is also a hack (as they call it):

:)

1 Like