Karthik

Members
  • Content Count

    10
  • Joined

  • Last visited


Reputation Activity

  1. Like
    Karthik reacted to ivan.popelyshev in PIXI, Suggest optimizations to minimize CPU/GPU   
    Oh, I forgot to welcome you to the forums!
    I'm glad another "hi im new here but i need to do this hard task"  went well. Usually its 50/50 whether the person is good enough to solve hard problems straight from first post.
     
  2. Like
    Karthik reacted to mobileben in PIXI, Suggest optimizations to minimize CPU/GPU   
    Why don't you send a few examples of what a graph looks like at different scale so we can see the spectrum of visuals you are trying to achieve and how they interrelate?
  3. Like
    Karthik reacted to mobileben in PIXI, Suggest optimizations to minimize CPU/GPU   
    Ahh, okay, I saw that. I misunderstood. You talked about zooming/scaling so wanted to see how it would differ. Essentially the rough views are the same (rectangles and lines)?
  4. Like
    Karthik got a reaction from ivan.popelyshev in PIXI, Suggest optimizations to minimize CPU/GPU   
    Hello Gurus,
    I'm working on a project where I have 400,000 static rectangles (5px*5px)  and a 20 rectangles that get added dynamically every second. At any given point in the frame, I only need to keep 3000 rectangles in the viewpoint. I'm using single graphics object and clear() method to render 3000 rectangles every sec (draw + clear). I have pan/zoom functionality added as well, and I'm using downsampling to remove overlapping pixels and reduce the number of points that I draw at any given point (to around 5000 rectangles).
    It works fine but the CPU/GPU usage is around 15%-23%. I'm looking for some suggestions to optimize CPU/GPU and  memory usage and reduce the load on CPU/GPU. I set antialias:false on the app. It seems to help a bit. Any further suggestions to improve performance would be greatly helpful. Thank you.
     
    Here are couple of things that I tried, but no luck.
    1)Instead of draw+clear, I created sprites using graphics and moved them around. That did not help either.
    2)I cannot avoid clear and redraw because I have 400,000 points to draw. So I cannot draw all at once and have to downsample. Also, dependeing on the view window, I need to rescale the rectangles, which is extremely difficult to achieve without repaint.
     
  5. Like
    Karthik got a reaction from ivan.popelyshev in PIXI, Suggest optimizations to minimize CPU/GPU   
    My response in red
    You certainly need chunks. Use transform (position) to scroll things. Store 200-500 points in a single graphics, update only last one, destroy or just make "renderable=false" those who dont appear in camera right now. For zoom use different set of graphics - every 2nd point, every 4th poiint, every 8th and so on, in other words spawn log2 strips , level of detail. LoD also helps the quality, because 100 vertex per pixel is really an overkill for geometry 😃 . I am doing the same thing (pick every ith point depending on window size, instead of showing it all) to reduce points. That being said, I'm having to do this real time (as I zoom in and out) so have to clear and repaint every frame depending on window size & total points in frame. May be if there is a way todo this without clear and repaint, it might solve my issue. If you could point me to some examples that do what you explained, that can really help. Thanks again.
    The other issue is Graphics lineWidth - if you want it to be adjustable through zoom, you change the style internally "graphics.geometry.graphicsData.lineStyle" and call "geometry.invalidate()" on all visible graphics elements. The line thickness is constant.
    Dont use drawCircle() for points when you have many points - geometry will have colossal size. Use lines or rectangles. I am using rectangles, and lines. No circles.
  6. Like
    Karthik got a reaction from ivan.popelyshev in PIXI, Suggest optimizations to minimize CPU/GPU   
    The line thickness is always constant (3pixels) in relative to the screen. The line length however is varying as I have to resize it to the window size. i shared a picture below that shows exactly how it looks.
    https://ibb.co/Gkhzw7G
    I'm not clear on how to avoid repaint with just reposition and scale, without a way to hide/show dormant rectangles.
     
  7. Thanks
    Karthik reacted to ivan.popelyshev in PIXI, Suggest optimizations to minimize CPU/GPU   
    Is line thckness constant relative to stage (zoom) or screen? You dont need to clear() and repaint every time if you just adjust position and scale. clear&refill is needed only for chunks that weren't visible in previous frame, or the one that is updated (new data).
    UPD: I love that kind of threads! When you make the main algorithm, while pixijs or any other renderer or framework is just your building blocks
  8. Thanks
    Karthik reacted to ivan.popelyshev in PIXI, Suggest optimizations to minimize CPU/GPU   
    OK, if its relative to screen then we're fucked. Try change lineStyle internally and call "geometry.invalidate()". https://www.pixiplayground.com/#/edit/3AKL1vurX38ct_sY~43Ap
    That eats a bit less CPU but its still a re-upload. I know that there's a plugin in development that allows to change lineWidth relative to screen entirely on GPU, but cant give you code yet.
  9. Like
    Karthik reacted to ivan.popelyshev in PIXI, Suggest optimizations to minimize CPU/GPU   
    Thank you!
    You dont need to show 400k points on the same screen because screen is maximum 4k , right?
    You certainly need chunks. Use transform (position) to scroll things. Store 200-500 points in a single graphics, update only last one, destroy or just make "renderable=false" those who dont appear in camera right now. For zoom use different set of graphics - every 2nd point, every 4th poiint, every 8th and so on, in other words spawn log2 strips , level of detail. LoD also helps the quality, because 100 vertex per pixel is really an overkill for geometry 😃
    The other issue is Graphics lineWidth - if you want it to be adjustable through zoom, you change the style internally "graphics.geometry.graphicsData.lineStyle" and call "geometry.invalidate()" on all visible graphics elements.
    Dont use drawCircle() for points when you have many points - geometry will have colossal size. Use lines or rectangles.
     
  10. Thanks
    Karthik reacted to ivan.popelyshev in PIXI, Suggest optimizations to minimize CPU/GPU   
    400k  is too slow to draw with any geometry, whether its Graphics or Sprites. maybe pixi-tilemap plugin can handle that but im not sure.
    You need RenderTexture's, organize them in chunks, redraw only those that were changed. In case of zoom you can make a queue - which renderTextures has to be re-drawn with better resolution.
  11. Like
    Karthik got a reaction from ivan.popelyshev in PIXI, Suggest optimizations to minimize CPU/GPU   
    Thanks for the reply Ivan. I see  your response in all the other posts and you don't know how much you have helped  me without you ever knowing it. I want to first thank you for all the time you spent sharing your knowledge in this forum.
    Let me elaborate a bit so that I explain my issue more clearly. I'm trying to plot time-series data that is captured every second upto a history of 1 day. That equates to 86400 points (roughly 100k) and 4 properties each second, so 400k points. Now, by default I show the last 1000 points, and the current information that comes every second. So the  frame is constantly moving to the right showing the current data. When the user zooms or pans I have to show historical data (that is static) by squeezing it and fitting it in the frame. So the overall data looks like a long horizontally elongated rectangle (image : https://ibb.co/7gw1mPb);
    So 99% of my data is static.  1% is dynamic data that gets captured second. So if there is a way to add all my points to a container that takes all the data, and later use some transformation to rescale and display, that would be the best.
    Also, I wouldn't mind paying for hourly rate for consultation  to provide some technical guidance on how to approach this problem.
    Thanks again.