dudeGupta Posted March 10, 2021 Share Posted March 10, 2021 I'm working on a custom data-visualization for large data sets. I originally have been building it with svg, but I'm hitting a peformance bottle-neck quickly with the number of elements I can render and animate. I need to have thousands of elements rendered, animating periodically for key transitions, and support zoom eventually. Only a fraction of the total elements rendered will ever need to animate with dynamic geometry at any given time. Everything else will animate via fadeIn/fadeOut. So for an estimated medium sized data-set case, if I have ~ 1000 data objects, I need to render ~ 3000 objects, all needing animations, but only about 1000 of those will ever need to dynamically update their geometry at a given time, simultaneously. Whenever I see advice for performance, I always see pointers to using textures and sprites. Unfortunately, I don't think I can use textures or sprites here instead, because I'm not just doing simple transforms on the geometries, but changing fundamental parameters of the geometries (ie: one custom path to another). I cannot share my project code unfortunately, but here is a sandbox with n number of randomly placed circles, each of which has its r animating. If you change n to 300 in App.js, things start getting pretty janky... While this is a contrived example, the fundamental requirements are accurate: large number of dynamic geometries animating simultaneously. Thanks in advance for any guidance / advice / direction / tutelage. Note - I am very new to webgl, and it seems very daunting, which is why I'm currently opting to use react-pixi. I'm not opposed to digging into webgl deeper to get what I need, but I have no idea where to start... Quote Link to comment Share on other sites More sharing options...
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.