Jump to content

most performant way to draw a blurred polygon?


wayfinder
 Share

Recommended Posts

Hi there!

 

I find myself having to paint a bunch (a big bunch!) of blurred polygons onto a single render target. The way I have been doing that is straight on a BitmapData's 2d context, by painting the polygon with moveTo/lineTo/fill with a huge offset and setting up a drop shadow with the appropriate amount of blur and the right negative offset to put it in the right place. This works correctly and looks quite beautiful, but the fill function is taking up too much CPU.

 

I'm wondering what the fastest way is to do what I want. I need the render target finished by the time the scene graph is rendered. WebGL or canvas, either is fine as long as it's performant!

 

Can you help?

 

 

edit: might have to add that I'm using Phaser!

Link to comment
Share on other sites

Unfortunately, I celebrated too early. It looks as if the BlurFilter is really quite slow when I apply it to a normal object in the scene graph already, and when I draw a sprite with a BlurFilter on it to a renderTexture, it simply doesn't show up at all :(

 

I'm slowly running out of ideas what to try now. Anyone: can you help?

Link to comment
Share on other sites

Can you provide a jsfiddle?

Conjecture: maybe the BlurFilter is slow when applied to a large number of sprites, what if you render the unblurred sprites and apply the blur to the RenderTexture itself(=the sprite containing it)?

Link to comment
Share on other sites

The problem is, I cannot reproduce this behaviour in a simpler setup. I made the simplest example possible and it worked - transported the exact same, identical code with identical assets into my game and it didn't work. I tried altering a few of the pixi and phaser examples that used renderTextures so that the objects there would be filtered - and it worked! I copied and pasted that into my game and it broke. Seriously at a loss here.

 

And your idea is good, but I need different blur strengths applied to different objects on the same renderTexture :(

 

edit: as for the speed of the blur filter, that seems to have been a quirk? this morning after I booted up my computer, performance seems to have normalized so at least that concern is gone (yay)

Link to comment
Share on other sites

I wrote a test to compare the relative speeds of bitmapData and renderTexture lightmaps - a few thousand sprites bring either to their knees but bitmapData seems to perform about twice as well as renderTexture. So I will probably end up going with cached sprites generated via shadowblur. I'm fairly sure there's a better way, but I can't find it. 

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