Jump to content

  • Log In with Google      Sign In   
  • Create Account


Member Since 27 Feb 2005
Offline Last Active Nov 18 2012 01:12 PM

Topics I've Started

2D geometry outline shader

11 October 2012 - 05:13 PM


I want to create a shader to outline 2D geometry. I'm using OpenGL ES2.0. I don't want to use a convolution filter, as the outline is not dependent on the texture, and it is too slow (I tried rendering the textured geometry to another texture, and then drawing that with the convolution shader). I've also tried doing 2 passes, the first being single colorded overscaled geometry to represent an oultine, and then normal drawing on top, but this results in different thicknesses or unaligned outlines. I've looking into how silhouette's in cel-shading are done but they are all calculated using normals and lights, which I don't use at all.

I'm using Box2D for physics, and have "destructable" objects with multiple fixtures. At any point an object can be broken down (fixtures deleted), and I want to the outline to follow the new outter counter.
I'm doing the drawing with a vertex buffer that matches the vertices of the fixtures, preset texture coordinates, and indices to draw triangles. When a fixture is removed, it's associated indices in the index buffer are set to 0, so no triangles are drawn there anymore.
The following image shows what this looks like for one object when it is fully intact.
The red points are the vertex positions (texturing isn't shown), the black lines are the fixtures, and the blue lines show the seperation of how the triangles are drawn. The gray outline is what I would like the outline to look like in any case.

Posted Image

This image shows the same object with a few fixtures removed.
Posted Image

Is this possible to do this in a vertex shader (or in combination with other simple methods)? Any help would be appreciated.

Thanks Posted Image

Motion blur and ghosting in OpenGL ES1.1

10 December 2011 - 10:29 PM

Hello,I've recently jumped over to iOS, using OpenGL ES1.1, for 2D games, after mainly using flash for the past few years. My engine in flash included ghosting effect very similar to the exmaples on this page:

I used bitmap blitting overall, and could simply draw everything I wanted to be "ghosted" to an offscreen bitmap buffer, apply flash's built in blur and color filters, and then render this buffer to the screen. By not clearing the offscreen buffer, and changing the filter paramters, many blur/glow like effects and ghost trails could be achieved.

I want to implement the same deal using OpenGL ES1.1, but I have no pixel shader access, nor an accumulation buffer, and of course no simple filters that will do the blurring for me. From what I've read online, it seems I'll have to keep an extra texture for each texture I want to have blurred/glowed at some interval. Applying a dynamic blur per frame would probably be too slow, and the blur/glow amount wouldn't change very often for a single sprite anyway. The upside to this is that if I just want to have a specific sprite glow without any trails, I just point to a different texture in memory (assuming it was already created).

I figure I can achieve the motion trails by simulating an accumulation buffer, and fading it out over time. If I just use a render texture the size of the screen, draw the blurred/glowed objects, apply some alpha blending, and avoid clearing it each frame, I would get the same effect. Then I just draw that whole texture to the renderbuffer. I'm curious about the performance of this, but the only way to find out is to go for it.

What I'm most confused about is how to achieve the initial glow/blur on a texture. I've read that drawing an object ontto a scaled down texture, then using that texture with the same vertices would do it. However when I do this, it just looks like a blown up image with cheap interpolation; not what I was looking for. I know how to blur an image pixel-by-pixel or using a shader, but I don't have that option. How can I quickly blur/glow a texture using core OpenGL, as quickly as possible?

And if you have a better idea for an accumulation-style buffer, post away!

Thanks in advance :)

New Facebook game: Space Climb

05 January 2011 - 06:31 PM

I just released my first Facebook App. A small flash arcade style game called Space Climb. If you have Facebook, check it out! Don't forget to post your highscores and challenge your friends!

Check it out here: http://apps.facebook.com/spaceclimb/

As well, I'm looking for feedback from the gamedev community. Problems or suggestions, please post up!

The controls are very sensitive and take a bit of getting used to. I made it this way to increase difficulty and add more pep to the game, however some people think it would be better and more attractive if they were less sensitive.
Also, I've had some suggestions of adding checkpoints, so you don't have to start over everytime you die, but I feel that may defeat the purpose of the game.
What do you guys think?

Thanks for looking!

Warping spread effect

08 February 2010 - 07:05 AM

Ok I'm gonna post pictures because it will be a lot easier to explain. This will be done on a bitmap. Basically I have a bitmap for the background, and anytime an object moves, it will create an effect that spreads the pixels of the background away from it, leaving a sort of trail. How would I go about doing this? And it needs to be fast since it will be done on multiple objects per frame. Pictures are below. Thanks in advance Here is what it would look like normally http://i80.photobucket.com/albums/j178/Ganoosh1/test.png Here is what i would look like after the object passes by http://i80.photobucket.com/albums/j178/Ganoosh1/test2.png

[web] Fading a bitmap in AS3?

02 February 2010 - 05:46 AM

Pretty much what it says. I'm using all bitmaps with a double buffer, and copyPixels to a BitmapData object everyframe for drawing: for speed, and simplicity of code. All's working well, but I can't figure out how to copy a bitmap to the buffer at a lowered alpha or similar effect. Basically I have another BitmapData for a dynamic background image. I want to draw trails and other effects onto it with a sort of "burn-in" effect (they're going to stay there and build up over time). So basically for example, say, a bullet, every frame it would copy it's bitmap at it's location, lower it's alpha and color down, and copy it to the bg image. But I can't figure out how to change the color and alpha. The only examples I could find were to make a Bitmap from the BitmapData, add it to a movie clip, apply the filters and such to the clip, then redraw the bitmap from the movie clip and THEN copy it to the bg/buffer/etc. This seems like way too much code and overhead for such a simple effect, and is probably slow as hell by incorporating the movieclip, and almost defeats the purpose of using bitmaps. There HAS to be another way. Any help? Thanks in advance.