How to draw textures without outline?

[Johanovski]

Hi all!

I'm having a problem with my game. I want to draw a serie of textures as if it's a brush, so a new texture have to be drawn just after the last one. The problem is that the texture seems to draw with a thin outline, but is messes up all the effect. If the texture is, for example, a 32x32 colored square (so no transparency need to be processed) the brush effect draws without outline, but if the texture have some transparency OpenGL seems to draw an outline where the transparency begins up the last drawn texture. For example, and for better explain, if i have a texture wich is a full painted square --> [_] the effect is:

[________________]

But if the image have transparency zones within the square --> () the effect is:

(((((((((((((((((((((()

Hope this example help understanding what i mean, and hope someone can help me with this, I'm dealing with it since yesterday morning and I haven't found any clue!

Thanks!

[smasher]

Are you drawing these objects from farthest to nearest? Objects that have alpha have to be drawn in sorted order - the alpha doesn't affect the depth buffer, so drawing a near object with alpha will "obscure" the area behind the object regardless of the alpha value.

You must have blending turned on too - I use this:

    glEnable(GL_BLEND);
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

[Johanovski]

Hi there!

I'm working without zBuffer, in ortho projection, so I thought it doesn't matter... The objects seems to be drawn in "layers" (the first one is drawn lower than the second one) and the upper object shows that outline, but just in zones where another object was drawn lower (I mean, that ghost outline only seems to show as a kind of transparency identifier that OpenGL uses but it messes up the color).
Images are in red color with no tone variation, so I thought drawing one and then another will make no color variations so they seem to be just one form, but the line messes it up...
I'm using this OpenGL code:

************************************************** ***********
// Set up OpenGL projection matrix
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrthof(0, rect.size.width, 0, rect.size.height, -1, 1);
glMatrixMode(GL_MODELVIEW);

// Initialize OpenGL states
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
glEnable(GL_TEXTURE_2D);
glDisable(GL_DEPTH_TEST);
glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_BLEND_SRC);
glEnableClientState(GL_VERTEX_ARRAY);
glEnableClientState(GL_TEXTURE_COORD_ARRAY);
glClearColor(0.0f, 0.0f, 0.0f, 1.0f);

[EAGLContext setCurrentContext:context];

glBindFramebufferOES(GL_FRAMEBUFFER_OES, viewFramebuffer);
glViewport(0, 0, backingWidth, backingHeight);

// Clear screen
glClear(GL_COLOR_BUFFER_BIT);

// HERE BEGINS MY OWN CODE

// THIS DRAWS THE BACKGROUND
[background renderAtPoint:CGPointMake(160.0f, 240.0f) centerOfImage: YES];

for(taca *t in arrayTaques)
{
if ([t calMostrar]) {
[t draw];
}
}
(...)
************************************************** ***********

Where [t draw] is a message to the "taca" object, wich inherits from NSObject and have an "Image" property called "imatge". Calling the draw method results in the following code:

************************************************** ***********
[imatge renderAtPoint:CGPointMake(posX, posY) centerOfImage:YES];
************************************************** ***********

And "renderAtPoint" is nothing more than...

************************************************** ***********
- (void)renderAtPoint: (CGPoint)point centerOfImage: (BOOL)center {
// Use the textureOffset defined for X and Y along with the texture width and height to render the texture
CGPoint texOffsetPoint = CGPointMake(textureOffsetX, textureOffsetY);
[self renderSubImageAtPointoint offset:texOffsetPoint subImageWidth:imageWidth subImageHeight:imageHeight centerOfImage:center];
}


- (void)renderSubImageAtPoint: (CGPoint)point offset: (CGPoint)offsetPoint subImageWidth: (GLfloat)subImageWidth subImageHeight: (GLfloat)subImageHeight centerOfImage: (BOOL)center {

// Calculate the texture coordinates using the offset point from which to start the image and then using the width and height
// passed in
GLfloat textureCoordinates[] = {
texWidthRatio * subImageWidth + (texWidthRatio * offsetPoint.x), texHeightRatio * offsetPoint.y,
texWidthRatio * subImageWidth + (texWidthRatio * offsetPoint.x), texHeightRatio * subImageHeight + (texHeightRatio * offsetPoint.y),
texWidthRatio * offsetPoint.x, texHeightRatio * offsetPoint.y,
texWidthRatio * offsetPoint.x, texHeightRatio * subImageHeight + (texHeightRatio * offsetPoint.y)
};

// Calculate the width and the height of the quad using the current image scale and the width and height
// of the image we are going to render
GLfloat quadWidth = subImageWidth * scale;
GLfloat quadHeight = subImageHeight * scale;

// Define the vertices for each corner of the quad which is going to contain our image.
// We calculate the size of the quad to match the size of the subimage which has been defined.
// If center is true, then make sure the point provided is in the center of the image else it will be
// the bottom left hand corner of the image
GLfloat quadVertices[8];
if(center) {
quadVertices[0] = quadWidth / 2;
quadVertices[1] = quadHeight / 2;

quadVertices[2] = quadWidth / 2;
quadVertices[3] = -quadHeight / 2;

quadVertices[4] = -quadWidth / 2;
quadVertices[5] = quadHeight / 2;

quadVertices[6] = -quadWidth / 2;
quadVertices[7] = -quadHeight / 2;
} else {
quadVertices[0] = quadWidth;
quadVertices[1] = quadHeight;

quadVertices[2] = quadWidth;
quadVertices[3] = 0;

quadVertices[4] = 0;
quadVertices[5] = quadHeight;

quadVertices[6] = 0;
quadVertices[7] = 0;
}

// Now that we have defined the texture coordinates and the quad vertices we can render to the screen
// using them
[self renderAtoint texCoords:textureCoordinates quadVertices:quadVertices];
}


- (void)renderAt: (CGPoint)point texCoords: (GLfloat[])texCoords quadVertices: (GLfloat[])quadVertices {
// Save the current matrix to the stack
glPushMatrix();

// Move to where we want to draw the image
glTranslatef(point.x, point.y, 0.0f);

// Rotate around the Z axis by the angle define for this image
glRotatef(-rotation, 0.0f, 0.0f, 1.0f);

// Scale on X and Y axis
glScalef(scale, scale, 1.0f);

// Set the glColor to apply alpha to the image
glColor4f(colourFilter[0], colourFilter[1], colourFilter[2], colourFilter[3]);

// Set client states so that the Texture Coordinate Array will be used during rendering
glEnableClientState(GL_TEXTURE_COORD_ARRAY);

// Enable Texture_2D
glEnable(GL_TEXTURE_2D);

// Bind to the texture that is associated with this image
glBindTexture(GL_TEXTURE_2D, [texture name]);

// Set up the VertexPointer to point to the vertices we have defined
glVertexPointer(2, GL_FLOAT, 0, quadVertices);

// Set up the TexCoordPointer to point to the texture coordinates we want to use
glTexCoordPointer(2, GL_FLOAT, 0, texCoords);

// Enable blending as we want the transparent parts of the image to be transparent
glEnable(GL_BLEND);

// Draw the vertices to the screen
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

// Now we are done drawing disable blending
glDisable(GL_BLEND);

// Disable as necessary
glDisable(GL_TEXTURE_2D);
glDisableClientState(GL_TEXTURE_COORD_ARRAY);

// Restore the saved matrix from the stack
glPopMatrix();
}
************************************************** ************

These method are from the "Image" class.

Any idea please? I'm completely stuck with it and I can't go on with my game since I've solved this...

Thanks in advance!

[smasher]

Even with a z-buffer, objects that use alpha must be drawn back-to-front. Please try that and post a screenshot if it still isn't working.

[fiftysixty]

Have you tried using a different blend mode? I'm doing a drawing app, using brushes similar to what you're doing, and using glBlendFund(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA) didn't give me the result I wanted, but glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA) works better. I have been struggling a bit with these since I moved from using Core Graphics to Cocos2d, it would be nice to have a tutorial of sorts showing how the Core Graphics blend modes relate to OpenGL blend functions.

[Johanovski]

Hi all!

Finally I've found what's going wrong with my app! ^_^
The trouble is with drawings! Drawer made the illustrations with Photoshop, and it makes a kind of degradation with form outlines and this degradation is what makes OpenGL draw a kind of outline! So, if the image I'm using have a degraded zone in it's outline it won't work as a brush, but if I open the image and delete the degradation (so, for example, the draw is in full red) the brush works fine! Important! The drawing also must be power of 2 (4, 8, 16, 32, 64, etc) pixels. If not OpenGL does the same to fit the image in it's new size.

Thanks for all!

[fiftysixty]

I think what you're talking about is that the edges of the brush were softened with a bit of alpha. That combined with the glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA) then causes problems because it is not pure additive blending which would be desirable when using it to paint with a brush. When you have just solid colors, which is your case now, then the glBlendFunc reduces to simple replacement.