Karthik

Members
  • Content Count

    10
  • Joined

  • Last visited

  1. Hi All, After some performance testing with some random data, I managed to resolve the issue. I want to share the test cases below in case someone is interested. As I have 400k points and at any given moment, I only need 4k elements, I tried to replicate this scenario using a container, sprites. Test Cases: Scenario Graphic Sprites container start with (sprites in container) Action taken every sec to simulate my use case performance 1 1 100k 1 100k change x/y properties of container very bad 2 1 100k 1 100k randomly set visibility to true for 4k sprites bad 3 1 100k 1 0 remove all children from container and add 4k children good 4 1 4k sprites 1 4k randomly move x/y and width and height properties of 4k sprites best So instead of clear and redraw, I'll load 4k sprites to my container to start with and set x/y/width/height properties as per my sample. Thanks again for all your time.
  2. This is so true. I was initially intimidated to use a game rendering framework for building charts, but considering the volume of data I have to render and the handy apis PIXI offers to leverage GPU, I decided it's worth giving a shot, and I'm so happy with that decision. btw, I have a youtube channel where I post programming related videos. I'll try to make a series on PIXI to share the knowledge that i gained, mistakes I made, and why i recommend PIXI over other libraries.
  3. That is correct. All I have is rectangles and lines. I figured out the zooming part as well, the big issue is that the CPU/GPU usage is very high when I clear and repaint every second. Also, this is a bit unrelated to this topic but I don't know how you can add a line graphic into a sprite and reuse. A rectangle sprite was easy to scale and change x,y co-ordinates as a sprite, but I don't know how you can do this with a line. Thanks again for your time.
  4. I did share a screenshot, here it is incase you missed it. https://ibb.co/Gkhzw7G
  5. 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.
  6. 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.
  7. 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.
  8. 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.