Tom Atom Posted May 26, 2015 Share Posted May 26, 2015 UPDATED: see my response below... Hi, I have problem with performance when rendering into RenderTexture. First I will describe my scene: I have two images/textures with 512x512 dimensions. I have on RenderTexture with size 640x640 I generate random curve on this RenderTexture. Then I use this generated RenderTexture as sprite which I put onto screen. Finally I add additional sprites to complete scene. Because the curve in Rendertexture has to be filled from both sides with images/textures 1 and 2, I have to draw it line by line (640 lines * 2 draws on each) - I will call this "initial draw". For drawing I use call to renderXY(), after I set crop rectangle on texture. I am croping it to have just one line from source texture with needed width. Then the curve is scrolling so I need to draw one line with the same principle on every update. My problem is, that "initial draw" is very slow - on iPad it takes noticable delay before game starts (1-2 seconds) and even worse on Lumia 532 it takes around 10 seconds. Then, when bg is regularly updated, iPad runs OK, while Lumia is slow and scrolling is with jerks. I also tried to use frames instead of crop rectangles, but with same result. I cannot believe, that rendering 1 screen takes so much time. Am I doing something wrong? I understand, there is switching from texture 1 to 2 640 times, so I would expect some inefficiency, but not 2 sec. on iPad Air. I also tried to replace RenderTexture with BitmapData (with the same flow on diagram). And it works. Even on Lumia 532, which is low end device. I expected opposite: BitmapData has to be uploaded into GPU, while switching rendering target with RenderTexture is quite common OpenGL/WebGL task. Any ideas, what is hurting performance of rendering into RenderTexture? Is there any other way how to achieve my goal - draw curve into background? Link to comment Share on other sites More sharing options...
Tom Atom Posted June 25, 2015 Author Share Posted June 25, 2015 Bump... No one can help me? I am really stuck... Whole scene has 640 lines. Here I created stats, how much time (in millis) it takes to render various number of lines on iPad and on Lumia 532. It is for both methods: RenderTexture and BitmapData: Finally, here is VS2013 project where it is easy in Play.ts file change rendering from RenderTexture to BitmapData: Slow.zip If anyone could help me to find, why RenderTexture is so slow, I would really appreciate it... The rendering part is minimal - just draw blue and green line for every line on screen. So, I think there is either something bad in Phaser/Pixi or I am using it all in bad way... Link to comment Share on other sites More sharing options...
Skeptron Posted June 25, 2015 Share Posted June 25, 2015 I'm not sure I understand everything of your problem, but it seems very inefficient to have such huge sprites with so few information. Your blue and green tiles could be 1 pixel high and it should still work as expected : and you would gain load speed and probably rendering speed as well. Link to comment Share on other sites More sharing options...
Tom Atom Posted June 25, 2015 Author Share Posted June 25, 2015 In target game, these sprites are textured, so I need this size... (two 512x512 does not seem too big for me). Anyway, it is always cropped and only 1 needed line is drawn from it. And, when using BitmapData it all runs OK... problem is when using RenderTexture. Maybe, I am getting closer to problem: Pixi WebGLRenderer is calling updateTexture after every single line I render... Now I need some way how to prevent it and update texture to which I render after all lines are drawn. Link to comment Share on other sites More sharing options...
Tom Atom Posted June 25, 2015 Author Share Posted June 25, 2015 Finally found solution! When rendering into RenderTexture with renderXY() there is lot of OpenGL settings in Pixi. Even if you use the same texture as target, these settings are repeatedly set for every single call to renderXY(). renderXY() renders one display object a time. So, if you want to save time, avoid repeated setups and benefit from batching, you have to envelope all your drawings into one call. Phaser.Group is also display object, so I created group which is not added into scene. Under this group I built pool of sprites. When I need to render full screen line by line, I then set sprites from this pool and in the end I send only one renderXY() call with group as parameter. Results:- iPad Air: speed increased from 750 milliseconds to 50 milliseconds,- Lumia 532: speed increased from 9250 milliseconds to 190 miliseconds! samme and DanielKlava 2 Link to comment Share on other sites More sharing options...
Recommended Posts