I’m trying to make a table of elements, with several columns and rows. The user should be able to select one column for sorting (which works fine), and all the slices(text-elements) should be able to get animated, so the user can scroll through the table and there is a nice transition when resorting the elements.
the rendering works fine with a test csv-file of around 10 columns and 10 or more rows (100 text-elements).
after that i tried to load a sample .csv file with more elements (it also has 10 columns, but around 1400 rows which results in 14000 elements), and the patch gets really laggy. At that point there is no animation included, no quads behind the texts, no graphic elements, so I guess this approach will never get me into an end-result that’s usable.
i already experienced that in other patches, whenever there are too many spreads that need to be rendered, its not possible to come only close to a smooth rendering result and i never have anything else in these patches, so for a whole project this would only be a part of what has to be calculated/rendered.
am i doing too basic approaches in patching, which eats up too much performance, or where could i try to read on and learn to get better results with better performance?
i was already thinking of making only 10 text-elements, where each represents a column? anyway it would not be possible to do some sorting animation… or is there a way to only calculate the elements that are in or close to the screen area since the lists will/can be long?
when the CPU gets to slow for animations you’ll have to resort to the GPU. there things get slightly less intuitive but don’t let this set you back because what you gain is vastly better performance.
get the DX11 Pack and start by going through its girlpowers. then pay specific attention to packs\dx11\girlpower\09_Geometry_Instancing_Overview.v4p
where you’ll learn how instancing can help you gain performance.
don’t hesitate to come back with more specific questions but also best provide a patch of what you have so far so it will be easier for us to understand where you’re heading…
This is a problem with manipulating text on vvvv. I’ve come to this problem days visualizing relatively large data sets.
It might be better to load, separate and order the text in a vl patch or a plug-in , and output the result as a shorter spread, offsetting the position of the spread as the user scrolls?
Do you have IOboxes with large mounts of data showing in the patch somewhere? if so, you can try putting it in a subpatch.
Having large IOBoxes with data in your patch window can significantly hurt performance.
Thanks for all of your Inputs so far, I will go and patch during the next free time I find and post a patch, this will be easier of course. Will be happy to come back with results / improvements!
I think using bin functionality may also simplify the patch, however I’m not sure if it reduces cpu/gpu load as well.
Because this should run on a small computer (laptop or maybe the fastest of the intel nuc family), I think a MacBook 2011 is a good point to be prepared for a not too powerful machine?
There are no big io boxes (only some showing only one slice of the table at a time), but thanks for reminding me about that! Or do they also eat up resources when having lots of data going through them, but only showing some slices? Don’t think so, because the performance/debug mode shows only big numbers on the renderer itself!
we got kind of the same problem, the former patcher used the html renderer (Dx11) to render and sort the list. i guess its works with http://listjs.com
here a short video - with the table on the bottom
if your interested i could look in the old patches to get a working example
Yep, you are facing the problem of too many draw calls.
Because if you “spread” a shader, for example with a spread of transforms, the graphics pipeline effectively makes one draw call per slice (element in spread).
This is a general computer graphics topic and as joreg and catweasl pointed out, the solution is to go for a smarter rendering approach.
One in which you make one draw call for all objects (e.g. for all text).
The contribution that catweasl points out can solve your problem I guess.
BUT
I know that as a starter it will be not easy to grasp the graphics pipeline and how to work with shaders.
As a quick workaround I can recommend you doing the following, but it only applies if you have a static text in your application:
Just go ahead as you do already and dont care that it is slows down everything.
Then render it to a large texture and save it with Writer node.
Then simply load that texture on a quad and you are fast again ;)
Thanks everybody, I am amazed how many of you want to help!
I will go on with trying to instance, so far had no luck with using text-geometry instead of quads, but just started out. If each text draws a call on the gpu, I can understand how long that takes with 14000 elements.
@jjh this looks really nice what you did there! Are you using vvvv.js and running a web application or actually vvvv itself? I think the problem is, that I want to have the resorting of the table animated, so all approaches of pre-rendering in any way will not allow to animate a sorting process afterwards because I cannot access the lines of the table and move them anymore. Maybe I should skip this idea and make another transition, but first I am trying to solve the problem :)
@tekcor I am jsut looking into the smarter render approach. As all the lines/rows of the table belong together, they could be put into a single text-element, resulting in a number of draws that equals the number of rows (and because this will be maximum 1000 or much less usually, this should be performant). I would just need to figure out how to maintain the spacing and alignment of all the entries, so that they are at the same position in every row. Or prerendering every row to a texture on startup and then using them to draw the actual render.
Or there is a way to only render elements that actually appear in the render window or are close to it? So scrolling through a list that is much longer than the screen, will always only render the stuff that is actually on screen?
Also had a a go. Requires beta 35.2
I tried the text in doing the text in vl. Very small data set, but sortable (the mechanism could perhaps e improved but it works) and should work with bigger data sets.
1400 lines a lot plugin canhold the data. With some well placed ‘if’ loops you could reduce the cycles even further. What you could do of course is limit the amount of data seen on screen at any point using ‘getspread’ and offset as bjoern neatly demostrates.
