flamingdog Posted July 11, 2016 Share Posted July 11, 2016 Hi, im having difficulties with transparency mask on mobile devices (container.mask = some-transparent-png ). Actually, its almost impossible to use realtime masking on some devices due to poor performance. What is also strange, my application with transparency masking is running quite good at Honor 5x, but on Honor 7 with significantly better HW, its really bad (especially after upgrade to Android 6). Is there any way or workarounds to increase performance? Quake 3 is running on Honor 7 in browser, so i dont understand, why is transparency masking in simple application so big deal... Another problem is, alpha masking is not available at all with Canvas Renderer. Did anyone find a way, how to use alpha masking with Canvas Renderer? thanks Quote Link to comment Share on other sites More sharing options...
flamingdog Posted July 18, 2016 Author Share Posted July 18, 2016 Does anyone at least have an idea, how to do Alpha masking with Canvas renderer? It doesnt need to have a good performance, it would be enough just to apply some alpha mask to some sprite or texture and render it to another texture Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 18, 2016 Share Posted July 18, 2016 Why do you need maskin in the first place? Quote Link to comment Share on other sites More sharing options...
flamingdog Posted July 18, 2016 Author Share Posted July 18, 2016 well for many things, i think its quite important feature. But the most important for me now is exactly this (attached) - i need to set texture as a text "fill color" , i cannot use "bitmap font", because i have many different fonts and many different textures. But i need to apply texture also to different random shapes, not only to text, so if there is any way to set texture as a fill color for text, its not solution for all my problems Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 18, 2016 Share Posted July 18, 2016 How many masks are you using? I think the solution is to make your own shader and assign second texture to it, may be you'll have to extend PIXI.Sprite and PIXI.Text for that. You can look at https://github.com/pixijs/pixi-picture as a demo of pixi plugin. It uses second texture that it takes from below the sprite to make custom blending modes. I added your idea to my milestones. If you need it right now and you dont want to study how pixi works, lets talk about it in private. Quote Link to comment Share on other sites More sharing options...
flamingdog Posted July 20, 2016 Author Share Posted July 20, 2016 You can create own shader with Canvas renderer? If so, maybe i will try to look at it. But i found some performance improvements, which partially solved my problems, so i dont need it right now. Actually it was about overall poor performance of WebGL on mobile in comparison with Canvas renderer. Anyway, thank you for your effort! Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 20, 2016 Share Posted July 20, 2016 If you make good shader for it, WebGL will be 3-5 times faster than corresponding canvas implementation, that's my estimation. If you dont like performance of mobile browsers - try wrappers, crosswalk works just fine. If you want a browser - free 20GB of space, download google chrome sources, compile it, profile it, everything in your hands. > But i found some performance improvements Awesome. Now if only everyone could describe what exactly did they do so we can incorporate into PIXI. For example, I know that trick with drawImage which is much faster in chrome for <image> than for <canvas>. So what did you do to make this particular case faster? I already has ideas for webgl implementation, but i dont know how to do it in canvas fallback Quote Link to comment Share on other sites More sharing options...
flamingdog Posted July 20, 2016 Author Share Posted July 20, 2016 It wasnt any special hack you could use, it was optimizing the application at some places. Primarily reducing some graphics, which wasnt critically important, and sudenly it went from 1 FPS to 20 FPS... I thought it was problem of transparency masking, because with Canvas renderer, everything was working perfectly smooth and the masking was the only thing, what was not working with Canvas renderer (unfortunately the masking is critical for me). But i didnt have the problematic device in my hands, so I couldn't try it. Then i got the device (honor 7) and found out, that it wasn't about the masking, it was just that everything is much slower there with WebGL, depending on how much textures I was working with simultaneously (not too much, just for example 10 images with resolution 490x390px, or is it too much?), even if they were visible=false, the app was getting drastically slower with more images loaded.. Which is also strange, that as i mentioned in first post, It was working perfectly on less powerfull device (Honor 5x, less memory, slower cpu), with same resolution. I also tried to benchmark these two devices on simple test http://www.belabel.com/mt.html - Honor 5x had about 60FPS and Honor 7 had even 70FPS, but it seems that with more loaded graphics, Honor 7 drastically slows down. Or maybe I am talking BS here, I didn't have enough time to play with the Honor 7, I just somehow managed to make it running. I hope i will know more soon Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 20, 2016 Share Posted July 20, 2016 So basically, the more memory you use, even if you dont draw these images, the slower application becomes? Unless you have a number of images with size 2048x2048, it shouldnt happen Quote Link to comment Share on other sites More sharing options...
flamingdog Posted July 20, 2016 Author Share Posted July 20, 2016 Yes, this is my actual guess. One more thing - I create the renderer with Resolution based on window.devicePixelRatio, in this case "3". So i guess, when i am working with textures created as RenderTexture(490,390), with this resolution, maybe it will behave like texture with resolution (490*3=1470, 390*3=1170) ? I am actually using lot of these textures, regularly creating them and destroying(true,true) them, but always there are maybe about 10 of them added to stage simultaneously (and most of them visible=false), all others i am destroying.. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 20, 2016 Share Posted July 20, 2016 Oh shit. Yeah, that will be slow in mobile browser We have problems even with resolution=2, and 3 is overkill. I think I can optimize it with webgl, but canvas2d wont be able to handle that, im sure. UPD. If you have some simple test that you want to be fast , can you please share it? I'll use it to show how much can we optimize webgl way Quote Link to comment Share on other sites More sharing options...
flamingdog Posted July 20, 2016 Author Share Posted July 20, 2016 Soo my only chance is to look for more optimalizations :-) But i still dont understand, why is CanvasRenderer so much faster. Maybe WebGL mobile is still in development and not working perfectly yet Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 20, 2016 Share Posted July 20, 2016 Your 'maybe" just made me angry again. WebGL is faster than canvas but you have to optimize it: if you use it that way it requires to send huge amount of data between CPU and GPU every frame, it will be slow. Did you come here for magical "do the stuff faster" button that works regardless of usecase? If no, please provide an example that i will be able to debug and make faster. If you do that, I can make a plugin that provides API for that case that is working much faster than Canvas. Quote Link to comment Share on other sites More sharing options...
flamingdog Posted July 20, 2016 Author Share Posted July 20, 2016 Sorry, I didn't mean to make anyone angry, its just misunderstanding. I understand, that WebGL have to be faster, I am just curious, why its slower in my case and why is device with little better CPU, GPU, bigger RAM, higher OS version, so much slower, than other and my guess was, that WebGL (especially on mobile devices) is quite a young technology and it can behave differently on different devices, but I see its not true if it makes you angry :-D .. I will try to prepare some minimal example as soon as I will have the problematic device. Anyway, I appreciate all your hard work, PIXI is definitely great. Quote Link to comment Share on other sites More sharing options...
colourclash Posted July 21, 2016 Share Posted July 21, 2016 I've had success using a webgl inspector to debug performance hickups, it also really demystifies what is happening on the gpu. There is a list of good ones here: http://www.realtimerendering.com/blog/webgl-debugging-and-profiling-tools/ Quote Link to comment Share on other sites More sharing options...
flamingdog Posted July 21, 2016 Author Share Posted July 21, 2016 Sounds good, I didn't have idea of somethink like this. I will give it a try, thanks Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.