Animation Mixers not firing at the correct times when multiple mixers are being fired at once

[Michael_Nicol]

Hello,

I am working on a large project that is designed to animate a maze showing up on the screen.

The issue I am having below is fully explained in this youtube video. While the issue is simplistic, the cause may not be due to the size of my project.

Help Video

I created this 3D maze generating and solving software not too long ago:

https://yqs5l9.csb.app/

I had a idea to be able to animate this cube of cubes so cubes on the same depth layer would be grouped into instances and then animate on the screen and different times, therefor creating a slice animation.

GitHub - michaelnicol/maze3d-world: A Three.js world for maze3d package on npm

Code files shown in the video: https://github.com/michaelnicol/maze3d-world/tree/main/views

My code was successful in being able to break down the maze in slices (with each slide being a instance mesh) and then create a unique mixer for each slice. Here is a example of some of these values:

Each instance mesh is a slice with the corresponding mixer

The animation clips of each mixer generate correctly:

Clip from slice 0:

Clip from slice 4:

Despite these two clips having completely different timings and roots (create that slice in effect), they run at exactly the same time as shown in the video.

Link To Gif Showing Animation

The playing of all the mixers is done through the animationMixersAPI function that just hits play on all the clips at the same time by looping through this._animationSliceMixers

        var animate = function () {
            requestAnimationFrame(animate);
            controls.update()
            mixer.update(clock.getDelta())
            clientMaze.animationMixersAPI("update", clock.getDelta())
            renderer.render(scene, camera);
        };
        animate();

note: Keep in mind that the code is not finished. This fade-in animation is just one of many animation times I am working on. That is why the code seems so expansive just to do this one animation. Its later designed for a verity of situations.

I also have a red box animation at <10,10,10> running at the same time as a indicator if my frame loop is working.

Thank you for your help,
Michael Nicol

[Ranao]

thats probably ur array uses one index, each mixer in the array should have unique index

[seanwasere]

call clock.getDelta() once per loop and put its value into a variable that you can use. Otherwise your second call of it (in the same loop as shown in your code sample) returns an extremely small number.

Try this maybe

var delta;
var animate = function () {
    requestAnimationFrame(animate);
    controls.update()
    delta = clock.getDelta()
    mixer.update(delta)
    clientMaze.animationMixersAPI("update", delta)
    renderer.render(scene, camera);
};
animate();

[Michael_Nicol]

Thank you for the reply,

It still seems to be animating wrong despite this change. However, you fixed the issue where the duration was not correct, so thank you.

Link to GIF

The object with the animation mixers looks like this. On on top is the instances, one below that is the mixers.

All mixers seem to to just follow the animation clip of the first mixer called to play.

If I play the mixer at property 0 then the mixer at property 4, property 4 will just use the animation mixer action clip of property 0.

The bindings of each mixer don’t share any of the same UUID’s of the target material, so it is not like I accidentally mixed up the instances and have each mixer playing for both.

Or did I?

I did some more digging and found something interesting. Since both of the instances share the same material, they both use each others animation. Separate Meshes, but same material:

Slice 0:

Slice 4:

Once I fixed this, it worked:

[Lawrence3DPK]

I was about to suggest something as simple as the instance objects possibly sharing the same material, you beat us to it

Ps cool project, is it for any particular use or just for fun?

[Michael_Nicol]

Recently, I built a 3D maze solving algorithm: maze3d - npm

Mostly because I got bored in CS class. I just graduated HS and have a few months before college to finish this project up.

It uses a 3D matrix to solve the maze, and then saves the data as a 3D matrix as so (The O character is the path to solve given the start and end points):

[
  [
    [ 'X', 'X', 'X', 'X', 'X' ],
    [ ' ', 'O', ' ', 'X', 'X' ],
    [ 'X', 'X', 'X', 'X', 'X' ],
    [ 'X', ' ', ' ', ' ', 'X' ],
    [ 'X', ' ', 'X', 'X', 'X' ]
  ],
  [
    [ ' ', 'X', ' ', ' ', ' ' ],
    [ ' ', 'O', ' ', 'X', 'X' ],
    [ ' ', 'O', 'X', ' ', 'X' ],
    [ 'X', ' ', ' ', 'X', ' ' ],
    [ 'X', 'X', ' ', ' ', 'X' ]
  ],
  [
    [ ' ', ' ', 'X', 'X', 'X' ],
    [ ' ', 'X', ' ', 'X', 'X' ],
    [ 'X', 'O', 'X', 'X', 'X' ],
    [ 'X', 'X', 'X', 'X', ' ' ],
    [ 'X', 'X', 'X', 'X', 'X' ]
  ],
  [
    [ ' ', ' ', 'X', ' ', 'X' ],
    [ 'X', 'X', ' ', 'X', ' ' ],
    [ 'X', 'O', ' ', 'X', 'X' ],
    [ ' ', ' ', ' ', 'X', ' ' ],
    [ 'X', 'X', ' ', ' ', 'X' ]
  ],
  [
    [ 'X', 'X', 'X', 'X', 'X' ],
    [ ' ', ' ', 'X', ' ', 'X' ],
    [ 'X', 'O', 'X', 'X', 'X' ],
    [ ' ', 'O', 'O', 'O', ' ' ],
    [ 'X', ' ', 'X', 'X', 'X' ]
  ]
]

If you use Three.js to create a cube for every cell in the 3D matrix, but swap the index around:

maze[1][2][3] = cube at (3,2,1)

It creates a solved 3D maze:

Live demo (with some added GUI features not in the package): https://yqs5l9.csb.app/

(Show barrier layers allow you to look inside the maze by hiding which instances render. Make sure to hit generate barriers and select start/ end).

Code: Interactive maze3d 2.0.2 - CodeSandbox

This is where version 2.0 stops. It doesn’t doesn’t have any functions built in to work with Three JS. It only provides that 3d matrix.

I am currently working on version 3.0, which will provide the user with all of the instances for the 3D model. All they have to do is simply add them to the scene. That part works, now I decided to make a animation engine that can take in a variety of configurations, such as slide or fade in, and then create a 3D animation over the maze building and solving itself.

The 3D animation part has been tricky:

Render order issue with with materials with lower opacity not being transparent when animating

Hello Mungen87, Thank you for the clarification, I seem to have found some more information about my problem and have been able to narrow it down to the render order. I made a video to summarize my issues: three render order issue - YouTube Basically, depending on the order at which I load in my instances, it will cause either the red or the blue slices to render correctly. If I load all of the blue instances on the screen, set the opacity to zero, then do the same with the red, the blue wil…

For the animation part (such as in this post), I have to create a new 3D model of the maze but split it for every slice of every part of the maze (barrier, space, void, path, etc).

The comment of the post I linked above discuses the issues I am having with the render order not as intended.

[Lawrence3DPK]

Very interesting, it makes me wonder if threejs’ ‘traverse()’ uses breadth first or depth first searches… 'traverseAncestors(breadthFirst) would be so quick and useful for certain use cases (if this isn’t already the callbacks default behaviour)

[Ranao]

ur time delta should be 1/60 so that the mixer fires at correct time