Jump to content

Transparency mask performance


flamingdog
 Share

Recommended Posts

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

Link to comment
Share on other sites

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

fnt.png

file2.png

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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..

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...