|
For the iPad app I am writing using OpenGL ES 2 I have a single quad - shaded using GLSL - that is dragged around the screen. Very basic. This works fine. But is rather boring. I want to increase the coolness a bit in the following way: when the user drags the quad it leaves a streak behind that fades over time. Continuous dragging would be a bit like a streaking comet across the night sky. What is the simplest way to implement this? Thanks. |
|||
|
|
|
If you want the quad itself to be "streaked" across the background, the simplest way is to just store N (say, 10) previous positions for the quad. Each frame, pop the first item from the front of the list. Each frame that the user is dragging the image, push a new position onto the end of the list. During rendering, simply render the quad a number of times for each item in the list. Start with a low opacity (say, 10%) and increase it by +10% for each step in the list. Render the real quad at full opacity. This is the effect you see in games like the 2D Castlevania titles. If you want the quad to blur the background that it's being dragged over, you should look into motion blur. Render the whole scene to a texture with an FBO. Store a vector representing movement, and scale it down each frame. Use the vector and the quad's current position to calculate a blur shape (take the four corner of the quad, add the vector, find the convex hull of the original 4 vertices and the resulting 4 vertices; you can also use some smarts with the vector's direction to simplify finding the convex hull considerably). Use the vector in a loop in your post-processing fragment shader to calculate the texels to sample from the source scene texture from the FBO when rendering the blur shape. Note that this approach won't look super great when the user makes sharp changes in the direction he's dragging in, unless you store multiple vectors and use a somewhat more complex series of blur shape calculations (you'd want to avoid overlapping regions). |
|||
|
|
