5 replies to this topic

[Ganoosh_]

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:

http://www.flashandmath.com/intermediate/ghost/
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

[Hodgman]

You can 'port' shader-style blurring to a fixed function pipeline with multitexture capabilities.

e.g. in a blur-shader, you usually sample several texels horizontally (and then vertically in a 2nd pass), sum them together and re-scale the result.
In a fixed-function renderer, you can bind the input texture to several stages of the multitexturing logic, hook up slightly different UV's to each stage, and set it to add all stages after multiplying them with a constant scale.

Once you grok the multitexturing logic of the FFP, you'll realize that a lot of "shader" effects can be implemented on it.

[Ganoosh_]

You can 'port' shader-style blurring to a fixed function pipeline with multitexture capabilities.

e.g. in a blur-shader, you usually sample several texels horizontally (and then vertically in a 2nd pass), sum them together and re-scale the result.
In a fixed-function renderer, you can bind the input texture to several stages of the multitexturing logic, hook up slightly different UV's to each stage, and set it to add all stages after multiplying them with a constant scale.

Once you grok the multitexturing logic of the FFP, you'll realize that a lot of "shader" effects can be implemented on it.

Thanks for the super quick reply!

I had no idea about multitexturing, I'm reading about it now, though it's sort of confusing me.
Is there a visual difference between multitexturing, and using blend functions? I'm guessing it's much faster and more efficient for texture level blending, but I'm trying to grasp the concept.
For example, say I have 2 textures, each the same size, and a sprite object wrapping each texture, each sprite pointing to the same vertices and texture coords (since same size). If I wanted to draw sprite2 at half transparency exactly on top of sprite1, I would draw sprite1 as normal, turn on alpha blending, set the alpha to 0.5, and then draw sprite2. I'd obviously be rendering the same geometry twice. So for an instance like this, multitexturing would basically allow me to achieve the same result by blending just the textures, and rendering the geometry once with one set of vertices and UV coords?

Edit:
So I started looking up texture units, and info about texture combiners, but I'm getting unexpected results. I copied the first sample from here, and proceded to draw my sprite with usual calls. However, everything else that was previously drawn is just gone, the second texture I point to in the 2nd texture unit has no effect, and despite glPushMatrix and glLoadIdentity, the previous calls from my camera class are still translating the geometry.

The code for the multitexture is as follows

glEnableClientState(GL_VERTEX_ARRAY);
    glEnableClientState(GL_TEXTURE_COORD_ARRAY);
    
... other stuff that used to work ....


glPushMatrix();
    glLoadIdentity();
    glActiveTexture(GL_TEXTURE0);
    glEnable(GL_TEXTURE_2D);
    glEnableClientState(GL_TEXTURE_COORD_ARRAY);
    glBindTexture(GL_TEXTURE_2D, t1->id());
    //Simply sample the texture
    glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_REPLACE); // i tried changing this to GL_COMBINE, same result
    glTexCoordPointer(2, GL_FLOAT, 0, &(s1->frameBounds));
    //------------------------
    glActiveTexture(GL_TEXTURE1);
    glEnable(GL_TEXTURE_2D);
    glEnableClientState(GL_TEXTURE_COORD_ARRAY);
    glBindTexture(GL_TEXTURE_2D, t2->id());
    glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_COMBINE);
    //Sample RGB, multiply by previous texunit result
    glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_RGB, GL_MODULATE);   //Modulate RGB with RGB
    glTexEnvi(GL_TEXTURE_ENV, GL_SRC0_RGB, GL_PREVIOUS);
    glTexEnvi(GL_TEXTURE_ENV, GL_SRC1_RGB, GL_TEXTURE);
    glTexEnvi(GL_TEXTURE_ENV, GL_OPERAND0_RGB, GL_SRC_COLOR);
    glTexEnvi(GL_TEXTURE_ENV, GL_OPERAND1_RGB, GL_SRC_COLOR);
    //Sample ALPHA, multiply by previous texunit result
    glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_ALPHA, GL_MODULATE);  //Modulate ALPHA with ALPHA
    glTexEnvi(GL_TEXTURE_ENV, GL_SRC0_ALPHA, GL_PREVIOUS);
    glTexEnvi(GL_TEXTURE_ENV, GL_SRC1_ALPHA, GL_TEXTURE);
    glTexEnvi(GL_TEXTURE_ENV, GL_OPERAND0_ALPHA, GL_SRC_ALPHA);
    glTexEnvi(GL_TEXTURE_ENV, GL_OPERAND1_ALPHA, GL_SRC_ALPHA);
    glTexCoordPointer(2, GL_FLOAT, 0, &(s2->frameBounds));
    glClientActiveTexture(GL_TEXTURE0);
    glTranslatef(3.0f, 3.0f, 0.0f);
    glVertexPointer(2, GL_FLOAT, 0, &(s1->vert()));
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
    
    glDisableClientState(GL_VERTEX_ARRAY);
    glDisableClientState(GL_TEXTURE_COORD_ARRAY);
    glPopMatrix();

Edit 2
I finally figured it out , apparently glActiveTexture is only for glBegin/glEnd calls, which aren't available in iOS, glClientActiveTexture must always be used. glActiveTexture is needs for glEnable/glDisable on iOS, glClientActiveTexture is used for vertex pointers, etc like other glClient functions. I needed to call both glActiveTexture and glClientActiveTexture together, the reason changing it seemed to fix it was that before I wasn't setting GL_TEX_COORD_ARRAY on the second texture unit, but both calls are need for the desired result. Hope this helps anyone else that may be trying to understand this.

Now it's just time to learn how to use the combiners, thanks for pointing me in the right direction Hodgman

[Ganoosh_]

Still can't figure this out. I've only got 2 texture units to work with, some I'm using 2 render textures to render back and forth using the other as the source texture, offseting the UV of the 2nd texture unit more each pass. However adding the color/alpha is not working at all, the only way I can get close to the desired result is by applying some alpha (using 0.5) as a constant to the first texture unit, and using GL_MODULATE for both color and alpha on the 2nd. It basically just looks as if i had transparent copies of the image placed on top of each other but offset a little each time. However, there's no way to get a solid texture this way since I'm always multiplying the alpha by 0.5. Adding colors usually ends up in a a solid black or white. GL_ADD_SIGNED just looks like a mess. GL_MODULATE seems to be the only option for alpha, as otherwise parts that should be clear end up as some sort of gray.

I also cannot anywhere find the different between calling
glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE);

and

glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_RGB, GL_MODULATE);

I know COMBINE_RGB is the function that affects color, and alpha for alpha, but what does the overall TEXTURE_ENV_MODE do?

[Relfos]

Any reason you are avoiding ES 2.0?
Nowadays the largest percentage of iOS users have hardware that supports that (anything from gen 3 and up), and it will give you lots of extra flexitiblity.
Don't waste time with the textures registers, it is very limited in iOS since you only have 2 texture units available.
With ES 2.0 you'll have 8 (or possibly more) texture samplers to play, and implementing this stuff you want is almost trivial with shaders.

[Ganoosh_]

Any reason you are avoiding ES 2.0?
Nowadays the largest percentage of iOS users have hardware that supports that (anything from gen 3 and up), and it will give you lots of extra flexitiblity.
Don't waste time with the textures registers, it is very limited in iOS since you only have 2 texture units available.
With ES 2.0 you'll have 8 (or possibly more) texture samplers to play, and implementing this stuff you want is almost trivial with shaders.

Well, I'd like to get acquainted with ES1.1 before I jump into 2, I plan on moving to 2 next year and eventually into 3D as well. However the main reason is that although most users have new enough devices, I personally know a few that don't, my girlfriend being one of them (at least for my first iOS game I don't wanna disclude her from having a copy ), and I'm sure there's still a decent enough percentage of users to consider. Besides some effects like these, I wouldn't really be taking advantage of the power of ES2 right now, so I don't wanna disclude a bunch of users just to make a few small implementations easier. What I may end up doing is running a run-time check, and decide which methods to use based on hardware. From what I'm aware I'm still able to use 8 texture units on my device even with ES1.1, but the older devices are limited to 2.