wayfinder Posted January 2, 2015 Share Posted January 2, 2015 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! Quote Link to comment Share on other sites More sharing options...
msha Posted January 3, 2015 Share Posted January 3, 2015 Try using PIXI.Graphics with BlurFilter. Quote Link to comment Share on other sites More sharing options...
wayfinder Posted January 3, 2015 Author Share Posted January 3, 2015 Is that possible to render to a texture before the whole view is rendered? I'm not sure how... Quote Link to comment Share on other sites More sharing options...
msha Posted January 3, 2015 Share Posted January 3, 2015 Yes, see this thread: http://www.html5gamedevs.com/topic/11347-batch-rendertexturerender/ Quote Link to comment Share on other sites More sharing options...
wayfinder Posted January 4, 2015 Author Share Posted January 4, 2015 Cool, thank you! Basic setup seems to work, now I'll need to test the speed... Quote Link to comment Share on other sites More sharing options...
wayfinder Posted January 4, 2015 Author Share Posted January 4, 2015 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? Quote Link to comment Share on other sites More sharing options...
msha Posted January 5, 2015 Share Posted January 5, 2015 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)? Quote Link to comment Share on other sites More sharing options...
wayfinder Posted January 5, 2015 Author Share Posted January 5, 2015 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) Quote Link to comment Share on other sites More sharing options...
wayfinder Posted January 6, 2015 Author Share Posted January 6, 2015 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. 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.