Pixi.js: Animate circle (improving performance) - performance

I would like to animate 1000 circles (position, radius, alpha, fill, stroke).
The current method I am using involves updating some properties on the Graphics object but then also clearing and recreating the circle for each draw().
holder = new PIXI.Graphics();
holder.lineStyle(strokeWidth, strokeColor, strokeOpacity);
holder.beginFill(color);
holder.drawCircle(r, r, r);
holder.endFill();
This is unfortunately too expensive ... Is there any way to avoid clearing the circle or another approach that can speed this render loop up?

if you hold a reference on each holder (for example in an array) you just can update their positions / tinting etc.. on each loop.

You can try a couple of things to improve performance:
Make sure that you only use one PIXI.Graphics (or as least as possible objects) object which is created on initialisation and not on every animFrame. Draw all of the circles on that object and only manipulate those.
If you don't have to change properties on every single circle try to group similar ones and you can generateTexture from them which then still allows you to manipulate position, size and alpha.
Try to limit updating the circles so it doesn't happen on every draw. Do you really need 60 updates per second? If you do, try to group circles and update for example 100 of them in one frame, next 100 in next frame and so on...
I'm not sure what exactly do you want to achieve with 1000 circles but if you add an example to your questions I can be more specific with optimisation tips.

Related

Smartest way to draw symmetric QGraphicsRectItems

I am writing a GUI that is supposed to display entities of a system in a 2D coordinate system, which the user can select and drag around. The system is mirror-symmetric w.r.t. the x and y axes. Currently I am subclassing an entity using a QGraphicsRectItem so that I can drag it around in the first quadrant (x>0, y>0) of the coordinate system. I reimplemented the paint method to draw the other three additional rectangles with painter.drawRectangle(). So when I move the entity in quadrant 1, the elements in the other three quadrants perform mirror motions. That works well.
In the next stage, each entity can be subdivided, i.e. consist of hundreds of rectangles. So I need to draw hundreds of rectangles and that four times, with mirror operations. The naive approach takes four for-loops, but I'm wondering if there is a smarter way of doing this in QT. The for-loops hurt a little because I'm using PyQt.
If your drawing operations are so slow the simplest thing you could do is draw to an image, and then simply draw the cached painting from the image 4 times, which will be very fast, since it will just be copying some pixel values.
It might be efficient to cache the drawing result not on item basis but to cache a quadrant of your grid. This way if you zoom in and the items get huge or numerous in count, you won't be wasting lots of memory, instead you will only need one image cache that's the screen size of the quadrant.
It really depends what you want to achieve, which at this point is not entirely clear from the description, and your image isn't showing neither.

How do I insert time into my Maya animation timeline

I frequently get myself into trouble when I've put together a complex animation in Maya with lots of rigs and connections and animated attributes and then find that I need to insert 100 frames somewhere in my 5000 frame animation to make space for additional animation. In the past, I've struggled with selecting all objects and all of their keyframes to move them down the timeline as it seems that I always miss some attributes that don't get moved and then things get ugly and I waste a lot of time fixing things.
I feel like there must be a more elegant way to insert a certain number of frames into the timeline easily without worrying that some keyframes will be left behind. I've tried my luck with the dope sheet, but I don't really find it any easier to use than the graph editor.
"Elegant" in this case is in the eye of the beholder.
Effectively what you need to do is move all the keys after a given point by a given amount. The hard part is that moving the keys will change the meaning of the curves: the interpolation is going to change no matter what you do unless you've got locked tangents on both sides of the change.
if you just want to insert keys at a particular point in time, it'll look like this:
def move_keys_after(start, time_shift):
key_string = '%s:' % start
for curve in cmds.ls(type='animCurve'):
before = cmds.keyframe(curve, q=True)
cmds.keyframe(curve, r = True, tc = time_shift, t = (key_string,), iub=True)
after = cmds.keyframe(curve, q=True)
print curve, before, "->", after
move_keys_after( 10, 20)
That example moves all of the keys in the scene after time start by time_shift frames. If you want to limit this to an object you could get the anim curves from the object directly or use the animation flag of the keyframe command

Which is the best way to render large number of geometries in three js?

Initially when I start my three.js based application there are very few cubes (less than 50) and they are rendered withing no time. But as number of cubes increase the rendering time increases.
When I reach 150 cubes with each having texture on all six sides.
It takes long time (3 to 5 minutes) to render the scene.
Once the scene is rendered I want to add/remove individual cubes, without rendering the whole scene again.
I have gone through similar question here.
But using this technique has following disadvantage:
It won’t be possible to move the merged objects independently from each other. Or you can no more remove or add a object without recomputing the whole geometry.
How do I solve this issue ?
Note : I am using WebGL Renderer
This seems to work well, no?
http://threejs.org/examples/webgl_interactive_draggablecubes.html
Code seemed sane too, has the cubes as separate objects. Though perhaps you mean that need more..
I edited the example to do 1000 cubes for me now, am getting 40fps on this laptop with intel hd 4000 -- not bad I'd say!

Three js performance

Hy!
I am working with huge vertice objects, I am able to show lots of modells, because I have split them into smaller parts(Under 65K vertices). Also I am using three js cameras. I want to increase the performance by using a priority queue, and when the user moving the camera show only the top 10, then when the moving stop show the rest. This part is not that hard, but I dont want to put modells to render, when they are behind another object, maybe send out some Rays from the view of the camera(checking the bounding box hit) and according hit list i can build the prior queue.
What do you think?
Also how can I detect if I can load the next modell or not.(on the fly)
Option A: Occlusion culling, you will need to find a library for this.
Option B: Use a AABB Plane test with camera Frustum planes and object bounding box, this will tell you if an object is in cameras field of view. (not necessarily visible behind object, as such a operation is impossible, this mostly likely already done to a degree with webgl)
Implementation:
Google it, three js probably supports this
Option C: Use a max object render Limit, prioritized based on distance from camera and size of object. Eg Calculate which objects are visible(Option B), then prioritize the closest and biggest ones and disable the rest.
pseudo-code:
if(object is in frustum ){
var priority = (bounding.max - bounding.min) / distanceToCamera
}
Make sure your shaders are only doing one pass. As that will double the calculation time(roughly depending on situation)
Option D: raycast to eight corners of bounding box if they all fail don't render
the object. This is pretty accurate but by no means perfect.
Option A will be the best for sure, Using Option C is great if you don't care that small objects far away don't get rendered. Option D works well with objects that have a lot of verts, you may want to raycast more points of the object depending on the situation. Option B probably won't be useful for your scenario, but its a part of c, and other optimization methods. Over all there has never been an extremely reliable and optimal way to tell if something is behind something else.

What is the best way of making concurrent animations?

this is an algorithm/data structure question about making different animations at the same time. For example, a ball is falling down one pixel in a millisecond, a bullet is moving 5 pixels in a ms, and a man is moving 1 pixel in 20 milliseconds. And think that there are hundreds of them together. What is the best way of putting all animations together, moving what we need to move in one function call, and removing the ones whose animation is completed? I don't want to create a thread for each one. What I want to do is to create one thread moving all items and sleeping until an object needs to be moved.
Note: I'm using Java/Swing, printing objects and images in JPanel.
I recently did something similar in Python. I don't know if this is the best method, but here's what I did.
Create an abstract Event class with the following public interface:
tick - calculates how much time has passed since the last tick. Perform work proportional to that time span. This should be called frequently to create the illusion of smooth movement; maybe sixteen times a second or so.
isDone - returns true when the Event has finished occuring.
Make a subclass of Event for anything that takes more than one frame to finish. Rotating, scaling, color changing, etc. You might create a TweenEvent subclass of Event if you want to move an image from one part of the screen to another. During each tick, redraw the image in a position farther away from the original position, and farther towards the destination position.
You can run many Events concurrently, like so:
Array<Event> events = new Array<Event>();
//add a bunch of TweenEvents here - one for a bullet, one for a ball, etc.
while(True){
Sleep(1/16);
for(Event e in events){
e.tick();
if (e.isDone()){events.remove(e);}
}
}

Resources