How to do this FadeOut Effect with openGL on iPhone?

Raphael · 07-29-2010, 07:15 AM

Hello,

I'm playing around with the GLPaint Example from Apple.
GLPaint

But I don't know how to create an effect which fades the already drawn stuff out. I created an example in Flash which shows the effect I'm looking for: Flash Example

In Flash I'm drawing a texture on a BitmapData and in every frame I'm adding a ColorTransform to the BitmapData which fades out the old drawn data.

I guess there must be a similar solution in openGL. Something with the renderBuffer or frameBuffer but I didn't find any solution.

Do you have an idea, tip, hint?

Thank you, Raphael

**Kalimba** · 07-29-2010, 11:05 AM

When you draw a texture in OpenGL, you can specify an alpha value for each vertex.

To accomplish what you're doing in that demo, I would maintain a list of ~20 "history state" nodes for the moving object. Each history state would consist of:

The location of the object
The lifetime of the object
The current alpha value of the object

In my app's update function, I would iterate these nodes, updating each node's current alpha and removing any expired nodes, based -- of course -- on how much time has elapsed since the last update.

In my app's draw function, I would again iterate the node list (drawing from oldest to newest), drawing the object at the location specified in the node, applying each node's current alpha value to the vertices being drawn.

wahness · 07-29-2010, 03:27 PM

Quote:

Originally Posted by Kalimba

When you draw a texture in OpenGL, you can specify an alpha value for each vertex.

To accomplish what you're doing in that demo, I would maintain a list of ~20 "history state" nodes for the moving object. Each history state would consist of:

The location of the object
The lifetime of the object
The current alpha value of the object

In my app's update function, I would iterate these nodes, updating each node's current alpha and removing any expired nodes, based -- of course -- on how much time has elapsed since the last update.

In my app's draw function, I would again iterate the node list (drawing from oldest to newest), drawing the object at the location specified in the node, applying each node's current alpha value to the vertices being drawn.

just remember to set your blend mode appropriately.

Raphael · 07-29-2010, 04:59 PM

Hey, thank you for your answers.

That would definately be a solution for my problem. But isnt there a way to just draw the current position of my object and keep the old already drawn positions in the buffer and fade it out in every frame a bit more? That means not clearing the buffer in every frame.

This would be the approach people use in ActionScript 3, which I like because you don't need to store the old positions of an object and you dont need to draw them in every step..

But actually I don't know if this concept is realizable in OpenGL.

Cheers,
Raphael

wahness · 07-29-2010, 06:27 PM

Quote:

Originally Posted by Raphael

Hey, thank you for your answers.

That would definately be a solution for my problem. But isnt there a way to just draw the current position of my object and keep the old already drawn positions in the buffer and fade it out in every frame a bit more? That means not clearing the buffer in every frame.

This would be the approach people use in ActionScript 3, which I like because you don't need to store the old positions of an object and you dont need to draw them in every step..

But actually I don't know if this concept is realizable in OpenGL.

Cheers,
Raphael

in actionscript, you are changing the state of an object. the rendering engine for flash takes care of the actual rendering. since you don't have the flash renderer doing the work for you, you're writing your own rendering engine. if you don't tell the video chip to draw what you need drawn, in the next frame it will be gone.

getting unrealisticly technical about it, if you don't have other things to draw on the screen, you could just draw an overlay the color of your background with a low alpha value over the top of the previous frame instead of clearing the screen between frames and then draw the "head" of the trail you're leaving behind.

edit: i just thought of some other options which also fit the unrealistically technical category:

-a pixel shader post processing effect which darkens everything in the current context previous to the new element(s) being drawn
-running a filter over the entire image which does the same as the pixel shader mentioned above, but i'm not really sure if opengl es supports the same image processing effects as opengl...so maybe on the iphone it's not really a possibility

Raphael · 07-30-2010, 05:23 AM

Quote:

Originally Posted by wahness

getting unrealisticly technical about it, if you don't have other things to draw on the screen, you could just draw an overlay the color of your background with a low alpha value over the top of the previous frame instead of clearing the screen between frames and then draw the "head" of the trail you're leaving behind.

-a pixel shader post processing effect which darkens everything in the current context previous to the new element(s) being drawn

Thank you, that sounds pretty much like what I am looking for. I have an example of what kind of stuff I want to draw, it looks like this: http://staging.rwichmann.com/openglexample/example.jpg

So I guess the solution of saving old states and drawing them in every frame is too much processing overhead. Its more like keeping everything I've already drawn and like you said, applying a shade prior to draw new stuff or draw a color over all with low alpha.

My problem is now: How to write that in OpenGL ES? Do you have a code snippet or something like that I could experiment with?

Thank you,
Raphael

wahness · 07-31-2010, 02:50 AM

Quote:

Originally Posted by Raphael

Thank you, that sounds pretty much like what I am looking for. I have an example of what kind of stuff I want to draw, it looks like this: http://staging.rwichmann.com/openglexample/example.jpg

So I guess the solution of saving old states and drawing them in every frame is too much processing overhead. Its more like keeping everything I've already drawn and like you said, applying a shade prior to draw new stuff or draw a color over all with low alpha.

My problem is now: How to write that in OpenGL ES? Do you have a code snippet or something like that I could experiment with?

Thank you,
Raphael

try apple's opengl sample project to get you started. also look at jeff la marche's blog or do another search for opengl es help. this is gonna take a lot of learning and practicing.

Raphael · 07-31-2010, 03:09 AM

I already read Jeff La Marches posts about OpenGL and I am using Apples OpenGL sample project.

This is why I'm posting here. I have this specific question.

Does anybody else know how I can modify the GLPaint example so that my old drawn stuff is slowly fading out?

Thank you,
Raphael

Raphael · 07-31-2010, 05:02 AM

Ok, i figured it out by myself. I'm drawing a Rectangle above my already drawn stuff with an adequate blendmode. It looks like this:

PHP Code:


			
static GLfloat* vertexBufferShape = NULL;

if(vertexBufferShape == NULL) vertexBufferShape = malloc(4 * 2 * sizeof(GLfloat));



vertexBufferShape[0] = 0.0;

vertexBufferShape[1] = 1024.0;

vertexBufferShape[2] = 0.0;

vertexBufferShape[3] = 0.0;

vertexBufferShape[4] = 768.0;

vertexBufferShape[5] = 1024.0;

vertexBufferShape[6] = 768.0;

vertexBufferShape[7] = 0.0;    



glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

glColor4f(0.0, 0.0, 0.0, 0.01);



glVertexPointer(2, GL_FLOAT, 0, vertexBufferShape);

glDrawArrays(GL_TRIANGLE_STRIP, 0, 8);

I hope this is a good solution. If you pro guys know a better way to achieve this effect, please let me know.
For all others I hope this might help people looking for a similar solution.

Thanks,
Raphael