# Can't animate WEBGL model in draw loop

**URL:** <https://discourse.processing.org/t/cant-animate-webgl-model-in-draw-loop/29539>\
**Category:** Coding Questions\
**Created:** [April 21, 2021, 10:24am UTC](https://discourse.processing.org/t/cant-animate-webgl-model-in-draw-loop/29539 "2021-04-21T10:24:20Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![GreenCell](https://avatars.discourse-cdn.com/v4/letter/g/b5ac83/32.png) [@GreenCell](https://discourse.processing.org/u/GreenCell)\
**Post date:** [April 21, 2021, 10:24am UTC](https://discourse.processing.org/t/cant-animate-webgl-model-in-draw-loop/29539/1 "2021-04-21T10:24:21Z")

</div>

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](https://openprocessing.org/sketch/1172195) where I edit a vertex, and it only works on frame 0.

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 21, 2021, 1:30pm UTC](https://discourse.processing.org/t/cant-animate-webgl-model-in-draw-loop/29539/2 "2021-04-21T13:30:51Z")

</div>

Actually it’s not officially supported ☹

> [@Help with 3d object transfiguration/distortion effect](https://discourse.processing.org/t/help-with-3d-object-transfiguration-distortion-effect/28795/2):
>
> it seems not supported while Spongman’s example shows how to “hack” to render the modified buffer (below is copied from the link above, I tried with your code and partially works but I’m not posting that because 1) I don’t want to tidy the code laughing and 2) somehow it doesn’t seem to work with noFill - which perhaps is related to the implementation of WEBGL in p5.js) var renderer; var geometry; var gid = 'custom'; function setup () { renderer = createCanvas(500, 500, WEBGL); geometry…

---

<div class="post-metadata">

**Author:** ![GreenCell](https://avatars.discourse-cdn.com/v4/letter/g/b5ac83/32.png) [@GreenCell](https://discourse.processing.org/u/GreenCell)\
**Post date:** [April 22, 2021, 2:45am UTC](https://discourse.processing.org/t/cant-animate-webgl-model-in-draw-loop/29539/3 "2021-04-22T02:45:53Z")

</div>

[Thanks that got me a bit closer](https://openprocessing.org/sketch/1172195). 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](https://github.com/processing/p5.js/blob/1.3.1/src/webgl/p5.Geometry.js#L12) for anything to refresh it but don’t see anything useful.

---

<div class="post-metadata">

**Author:** ![GreenCell](https://avatars.discourse-cdn.com/v4/letter/g/b5ac83/32.png) [@GreenCell](https://discourse.processing.org/u/GreenCell)\
**Post date:** [April 22, 2021, 3:06am UTC](https://discourse.processing.org/t/cant-animate-webgl-model-in-draw-loop/29539/4 "2021-04-22T03:06:41Z")

</div>

[There we go, this hack seems to do it!](https://openprocessing.org/sketch/1172195)

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!

---

<div class="post-metadata">

**Author:** ![GreenCell](https://avatars.discourse-cdn.com/v4/letter/g/b5ac83/32.png) [@GreenCell](https://discourse.processing.org/u/GreenCell)\
**Post date:** [April 22, 2021, 6:55am UTC](https://discourse.processing.org/t/cant-animate-webgl-model-in-draw-loop/29539/5 "2021-04-22T06:55:37Z")

</div>

[Here’s a test](https://openprocessing.org/sketch/1173937) blending through multiple models to drive its jaw 🙂

---

<div class="post-metadata">

**Author:** ![Zuheng](https://avatars.discourse-cdn.com/v4/letter/z/e9bcb4/32.png) [@Zuheng](https://discourse.processing.org/u/Zuheng)\
**Post date:** [May 28, 2024, 5:42pm UTC](https://discourse.processing.org/t/cant-animate-webgl-model-in-draw-loop/29539/6 "2024-05-28T17:42:57Z")

</div>

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](https://pastebin.com/tgZFGZaz)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [May 28, 2024, 10:25pm UTC](https://discourse.processing.org/t/cant-animate-webgl-model-in-draw-loop/29539/7 "2024-05-28T22:25:57Z")

</div>

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](https://github.com/processing/p5.js/issues/5120#issuecomment-863749210)_

Take a look at example in _live version_ in above link for a solution.

A snippet from the _live version_:

```auto
  {
    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):

> [@Help with 3d object transfiguration/distortion effect](https://discourse.processing.org/t/help-with-3d-object-transfiguration-distortion-effect/28795/3):
>
> i think we found another hack

`:)`