Jump to content


Performance issues with tweening many three.js objects at once

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I recently started using GSAP for animating three.js as an alternative to https://github.com/sole/tween.js, commonly used for this.  It made it really easy to do something like: make a cube spin and when it stops, wait until one of the faces are square (through a 90 degree rotation with repeat -1 switched on/off).  


However, I'm struggling with severe performance issues in tweening many objects at a time. I think this has to do with having to create a duplicate copy of the objects to store the tween data rather than just being able to directly tween object variables without having to write in onUpdate.  This makes writing the tween a tad more tedious than tween.js, and it has been no easy task to convert from tween.js to GSAP.  Once I finally did figure out how to do this, I found the performance was severely worse than using tween.js.  I created an example modification of a three.js example which closely relates to the project I'm working on:



Original, using tween.js: http://jsfiddle.net/justin_hackin/J3k9N/  (Tweening @ 292)

Single variable for closure in loop, not working: http://jsfiddle.net/justin_hackin/dHLcg/

TweenMax demo: http://jsfiddle.net/justin_hackin/6bFJc/ (Tweening @ 298)


I'm wondering, are these performance issues happening because each TweenMax closure is trying to store the whole object copy array ?  I don't quite understand the deeper aspects of JS, excuse my ignorance. 


Am I doing something wrong here ?  I really love these GSAP libraries so I hope I can make it work for  the project I'm working on.  If not, I really hope the developers will consider making the code more friendly to this kind of use.  The project I'm working on might eventually be willing to invest in such a feature if it would take some efforts to implement, please let me know what could be possible.





Link to comment
Share on other sites

First, sick demo. Thanks for taking a stab at converting it to GSAP.


I think you may have been overthinking things with all those object copies.


I didn't have a ton of time to dig into everything, but I started with your TweenJS demo and made a slight modification to make it work the GSAP way.


I only edited your transform function thinking that is the only place the animation is triggered


function transform( targets, duration ) {
for ( var i = 0; i < objects.length; i ++ ) {

var object = objects[ i ];
var target = targets[ i ];
        TweenMax.to(object.position, 1, { x: target.position.x, y: target.position.y, z: target.position.z })



TweenLite.ticker.addEventListener("tick", render);



Link to comment
Share on other sites

Nice work, Carl. Yeah, HUGE difference performance-wise. 


Also, if you want to match the easing of the original, you could add ease:Expo.easeInOut to the tweens. Actually, Power4.easeInOut would probably perform slightly better and look very similar (since that ease is baked into the core), but not a big deal. 

  • Like 1
Link to comment
Share on other sites

Carl, you are awesome, I was bashing my head up against this for some time, I'm really happy that you've solved this issue... I thought I tried something like this before but it must have been something else that was going wrong.  The only demos I've seen used the ticker for animate, not render, maybe that's what solved my problem.   Anyway, keep up the great service !  Don't think we'll need a license for now, but hey, do you folks take donations ?

  • Like 1
Link to comment
Share on other sites

Nah, we don't really take "donations" - folks generally join Club GreenSock in order to show their support (or just to get the bonus plugins). I sure appreciate your generous posture, especially given the fact that you don't need the special commercial license. 


I bet you could find some interesting uses for ThrowPropsPlugin with three.js :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.