Rendering a texture-filled polygon

cocos2d for iPhone » Programming » cocos2d support (graphics engine)

Rendering a texture-filled polygon

(62 posts) (20 voices)

Started 1 year ago by asinesio
Latest reply from jhooks098

Tags:

« Previous 123 Next »

ehoffman
Member
@badawe So you want to cut a hole in your texture? And the poly is closed (ccDrawPoly(..., YES), right?

You can do this in a lot of different ways: blending, alphatest, stencil, ... Important is, all methods leave the original texture untouched, so you need to save all polys the user has drawn and always draw them as a "hole" one after each other. Or always render to a CCRenderTexture and use the result as new texture for your CCNode (I would prefer to always draw, not to use rendertexture).

If I understand correctly your code just draws the outline of the polygon, because ccDrawPoly uses -in your case closed=YES- GL_LINE_LOOP, but you need a filled poly.

Ok, for that you really need to triangulate the poly. The process is like that:

- at first draw your background texture
- triangulate your poly with the triangulator above, BUT use the C++ source directly!
there is an example above or look into the source of PRKit, initWithPoints

- NOW you need color for each vertice
```
ccColor4F *colors = malloc(sizeof(ccColor4F) * numberOfTriangleVertices);

for (int i=0; i<numberOfTriangleVertices; i++) {
   colors[i] = (ccColor4F){1.f, 0.f, 1.f, 1.f};
}
```
- disable GL_TEXTURE_2D (you only want colors)
- set glVertexPointer
- set glColorPointer
- draw
- enable GL_TEXTURE_2D to restore the default states
Posted 1 year ago #

badawe
Member

@ehoffman

Thanks for this, but i really don't understand how is the best way to do that!

Let me see if you can help me:

- at first draw your background texture

I can use my CustomClass like CCNode? Because in some cases, i have more than one CCSprite inside of then, so in my init method, i have something like that:

- (id)init
{
    self = [super init];
    if (self)
    {
        mainSprite = [CCSprite spriteWithFile:@"predio01.png"];
        [self addChild:mainSprite z:-1];
    }
    return self;
}

- triangulate your poly with the triangulator above, BUT use the C++ source directly!
there is an example above or look into the source of PRKit, initWithPoints

That is the hard part for me, i don't understand of how i can do that, what i must to do? I never work with something like that:
Add the triangulator.h and .cpp to my project.
How i must start that? I try simple add this on my init:

b2Shape* tempShape = bodyReference->GetFixtureList()->GetShape();
    if(tempShape->GetType() == 1)
    {
        b2PolygonShape *polyShape = (b2PolygonShape *)tempShape;
        //CGPoint vertices[polyShape->m_vertexCount];
        //int i = 0;
        Vector2dVector *inputPointsForTriangulation = new Vector2dVector;

        for (int i = 0; i < polyShape->m_vertexCount; i++)
        {
            inputPointsForTriangulation->push_back(Vector2d(polyShape->m_vertices[i].x*PTM_RATIO,polyShape->m_vertices[i].y*PTM_RATIO));
        }

        // Triangulate results
		Vector2dVector triangulatedPoints;
		CCLOG(@"Triangulating polygon...");
		Triangulate::Process(*inputPointsForTriangulation, triangulatedPoints);
		delete inputPointsForTriangulation;

		areaTrianglePointCount = triangulatedPoints.size();
		areaTrianglePoints = (CGPoint *) malloc(sizeof(CGPoint) * areaTrianglePointCount);
		textureCoordinates = (CGPoint *) malloc(sizeof(CGPoint) * areaTrianglePointCount);

		for (int j = 0; j < areaTrianglePointCount; j++) {
			areaTrianglePoints[j] = ccp(triangulatedPoints[j].GetX(), triangulatedPoints[j].GetY());
		}
    }

and in draw make that:

-(void)draw
{
    if(bSet)
    {
        // we have a pointer to vertex points so enable client state
        glBindTexture(GL_TEXTURE_2D, mainSprite.textureAtlas.texture.name);

        glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_DECAL);

        glVertexPointer(2, GL_FLOAT, 0, areaTrianglePoints);
        glTexCoordPointer(2, GL_FLOAT, 0, textureCoordinates);

        glDrawArrays(GL_TRIANGLES, 0, areaTrianglePointCount);
        glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE);

        //Restore texture matrix and switch back to modelview matrix
        glEnableClientState(GL_COLOR_ARRAY);

    }
}

I keep my mainSprite, and try to draw over CCNode but no succes, to be honest when I try it, he make a psychodelic box, and cut it in the right way, by my object keeps intacts =/

Sorry about this, but I'm really noob in this process =/

Posted 1 year ago #

ehoffman
Member

All I described needs to happen in your draw() method.

In your init you create the Triangulator object. That is used later in your draw method. draw should look somehow like that:

// Just pseudocode

-(void) draw
{
    // draw your CCSprite and all children, the background I meant
    // If you subclassed CCNode ... copy draw() from CCSprite and
    // replace the super call
    [super draw];

    glDisable(GL_TEXTURE_2D);

    // Now loop through all captured polygons, as I said
    // you need to save them in some way. Better would be
    // to save the triangles
    foreach (poly in polygons) {
        triangulator->reset();
        foreach (point in polygon_vertices)
            trianglator->addPoint(point);

        triangulator->process(triangles, count);

        glColorPointer(...); // one color for every triangle vertice
        glVertexPointer(...)

        glDrawArrays(GL_TRIANGLES, ...);
    }

    glEnable(GL_TEXTURE_2D);
}

Posted 1 year ago #

badawe
Member

How i suppose to create the Triangulator object?
I Create then in the .h file:
Triangulate *Triangulator;

and in .mm i suppose to do what?

And i still don't understand what i have to do in draw method.

here:

// draw your CCSprite and all children, the background I meant
// If you subclassed CCNode ... copy draw() from CCSprite and
// replace the super call
[super draw];

I must replace the super draw method of CCSprite?

NSAssert(!usesBatchNode_, @"If CCSprite is being rendered by CCSpriteBatchNode, CCSprite#draw SHOULD NOT be called");

	// Default GL states: GL_TEXTURE_2D, GL_VERTEX_ARRAY, GL_COLOR_ARRAY, GL_TEXTURE_COORD_ARRAY
	// Needed states: GL_TEXTURE_2D, GL_VERTEX_ARRAY, GL_COLOR_ARRAY, GL_TEXTURE_COORD_ARRAY
	// Unneeded states: -

	BOOL newBlend = blendFunc_.src != CC_BLEND_SRC || blendFunc_.dst != CC_BLEND_DST;
	if( newBlend )
		glBlendFunc( blendFunc_.src, blendFunc_.dst );

#define kQuadSize sizeof(quad_.bl)
	glBindTexture(GL_TEXTURE_2D, [texture_ name]);

	long offset = (long)&quad_;

	// vertex
	NSInteger diff = offsetof( ccV3F_C4B_T2F, vertices);
	glVertexPointer(3, GL_FLOAT, kQuadSize, (void*) (offset + diff) );

	// color
	diff = offsetof( ccV3F_C4B_T2F, colors);
	glColorPointer(4, GL_UNSIGNED_BYTE, kQuadSize, (void*)(offset + diff));

	// tex coords
	diff = offsetof( ccV3F_C4B_T2F, texCoords);
	glTexCoordPointer(2, GL_FLOAT, kQuadSize, (void*)(offset + diff));

	glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

	if( newBlend )
		glBlendFunc(CC_BLEND_SRC, CC_BLEND_DST);

#if CC_SPRITE_DEBUG_DRAW
	CGSize s = [self contentSize];
	CGPoint vertices[4]={
		ccp(0,0),ccp(s.width,0),
		ccp(s.width,s.height),ccp(0,s.height),
	};
	ccDrawPoly(vertices, 4, YES);
#endif // CC_TEXTURENODE_DEBUG_DRAW

?! But this give me much errors!

After i have my vertices and my sprite, i call this function to update the objects:

-(void)updateTriangulation
{
    b2Shape* tempShape = bodyReference->GetFixtureList()->GetShape();
    b2PolygonShape *polyShape = (b2PolygonShape *)tempShape;

    points = (CGPoint *) malloc(sizeof(CGPoint) * polyShape->m_vertexCount);

    Vector2dVector *inputPointsForTriangulation = new Vector2dVector;

    for (int i = 0; i < polyShape->m_vertexCount; i++)
    {
        points[i] = CGPointMake(polyShape->m_vertices[i].x*PTM_RATIO, polyShape->m_vertices[i].y*PTM_RATIO);
        inputPointsForTriangulation->push_back( Vector2d(points[i].x,points[i].y));
    }

    // Triangulate results
    Vector2dVector triangulatedPoints;
    CCLOG(@"Triangulating polygon...");
    Triangulate::Process(*inputPointsForTriangulation, triangulatedPoints);
    delete inputPointsForTriangulation;

    areaTrianglePointCount = triangulatedPoints.size();
    areaTrianglePoints = (CGPoint *) malloc(sizeof(CGPoint) * areaTrianglePointCount);
    textureCoordinates = (CGPoint *) malloc(sizeof(CGPoint) * areaTrianglePointCount);

    for (int j = 0; j < areaTrianglePointCount; j++) {
        areaTrianglePoints[j] = ccp(triangulatedPoints[j].GetX(), triangulatedPoints[j].GetY());
    }

    //self.texture = fillTexture;
}

But in the draw method you describe, what is the? poly in polygons? Is the value of areaTrianglePoints?
And i cant reset and process, becouse i cant initialize my Triangulation!

I feel realy dumb =/

Posted 1 year ago #

ehoffman
Member
Ok, step by step:

1. Add triangulate.h and triangulate.mm to your project
2. Include triangulate.h in your scene
3. Add Triangulator *triangulator to your interface
4. In init do: triangulator = new Triangulator();
5. In dealloc do: delete triangulator; triangulator = NULL;
6. [super draw]; actually draws your current CCSprite.

7. Use updateTriangulation to generate the triangles.

But you need ccVertex2F to draw them. You don't need texture-Coordinates if you just want to fill the polygon with a solid color. And also you don't need colorpointer... So do
```
int areaTrianglePointCount = triangulatedPoints.size();
    ccVertex2F *areaTrianglePoints = (CGPoint *) malloc(sizeof(CGPoint) * areaTrianglePointCount);

    for (int j = 0; j < areaTrianglePointCount; j++) {
        areaTrianglePoints[j] = (ccVertex2F){triangulatedPoints[j].GetX(), triangulatedPoints[j].GetY()};
    }
```
Now you have your vertices to draw. Do the followin in your draw method:
```
[super draw];

// Draw one polygon
glDisable(GL_TEXTURE_2D);
glDisableClientState(GL_TEXTURE_COORD_ARRAY);
glDisableClientState(GL_COLOR_ARRAY);

glColor4ub(255, 0, 255, 255);
glVertexPointer(GL_FLOAT, 0, &areaTrianglePoints);
glDrawArrays(GL_TRIANGLES, 0, areaTrianglePointCount);

glEnable(GL_TEXTURE_2D);
glEnableClientState(GL_TEXTURE_COORD_ARRAY);
glEnableClientState(GL_COLOR_ARRAY);
//End
```
This draws one polygon. You need to do that for all polygons, so for all poly in polygons.
Posted 1 year ago #
ehoffman
Member

And if I may say that: Some basics in C++/C will be good. You should have a look into a good OpenGL tutorial, too. What you try to do is not that basic functionality (btw. the triangulator looks very basic to me, to work for all polygons...).

Don't forget to free the malloc'ed arrays...

Posted 1 year ago #

badawe
Member

Thanks @ehoffman you really must thinking how dumb i must be. But i realy never work with that, and I'm really new to C/C++ Open GL, do some games with cocos2D, but never work with something like that.

By the way, don't work yet:
I create my ccVertex2F in my .h file:
ccVertex2F *areaTrianglePointsVertex

alloc it, and update in my .mm file on my function updateTriangulation;

areaTrianglePointsVertex = (ccVertex2F *) malloc(sizeof(ccVertex2F) * areaTrianglePointCount);

    for (int j = 0; j < areaTrianglePointCount; j++) {
        areaTrianglePoints[j] = ccp(triangulatedPoints[j].GetX(), triangulatedPoints[j].GetY());
        areaTrianglePointsVertex[j] = (ccVertex2F){triangulatedPoints[j].GetX(), triangulatedPoints[j].GetY()};
    }

and in my draw method stand like that:

-(void)draw
{
    [super draw];
    if(bSet)
    {
        for(int i = 0; i < areaTrianglePointCount; i++)
        {
            // Draw one polygon
            glDisable(GL_TEXTURE_2D);
            glDisableClientState(GL_TEXTURE_COORD_ARRAY);
            glDisableClientState(GL_COLOR_ARRAY);

            glColor4ub(255, 0, 255, 255);
            glVertexPointer(2, GL_FLOAT,i,&areaTrianglePointsVertex);
            glDrawArrays(GL_TRIANGLES, i, areaTrianglePointCount);
            glEnable(GL_TEXTURE_2D);
            glEnableClientState(GL_TEXTURE_COORD_ARRAY);
            glEnableClientState(GL_COLOR_ARRAY);
        }
    }
}

My output its like that:

I Must change from:
glVertexPointer(GL_FLOAT, 0, &areaTrianglePoints);
To this:
glVertexPointer(2, GL_FLOAT,i,&areaTrianglePointsVertex);

Can be this I'm doing wrong?

Posted 1 year ago #

ehoffman
Member

I don't think anyone is dumb :) Maybe just a little bit lazy ;)

Ok, glVertexPointer was not correct. Try this:

-(void)draw
{
    [super draw];
    if(bSet)
    {
        // Draw one polygon
        glDisable(GL_TEXTURE_2D);
        glDisableClientState(GL_TEXTURE_COORD_ARRAY);
        glDisableClientState(GL_COLOR_ARRAY);

        glColor4ub(255, 0, 255, 255);
        glVertexPointer(2, GL_FLOAT, 0,&areaTrianglePointsVertex);
        glDrawArrays(GL_TRIANGLES, 0, areaTrianglePointCount);
        glEnable(GL_TEXTURE_2D);
        glEnableClientState(GL_TEXTURE_COORD_ARRAY);
        glEnableClientState(GL_COLOR_ARRAY);
    }
}

Without the for-loop over the triangle points and the third argument of glVertexPointer and glDrawArrays = 0.

And as I wrote, this only draws one polygon. And it's not modifying the texture, it's just drawing over the texture. You need to save all polygons from the user and then draw all of them in a loop (not draw the points of one polygon in a loop).

Posted 1 year ago #

badawe
Member

Ok, update! uahauh

But this code still don't showing anything!

but can you explain to me that:

You need to save all polygons from the user and then draw all of them in a loop (not draw the points of one polygon in a loop).?

I must save all polygons generated by triangualtion? and how i can draw them in a loop!?
Its important to said! I have all vertices, i can draw exactly what i want over my object! I can use that!? How?!

Posted 1 year ago #
asinesio
Member

Ok, so it looks like this thread has taken a life of its own. Wow! :)

@riq - glad to help out in any way, IMO cocos2d is one of the best libraries I've ever used.

@badawe - I am completely lost as to what your problem is with the PRKit code. I am not surprised if it doesn't work entirely well (it's not well tested yet and could have issues).

If anyone finds issues with the code I posted on github, please let me know so that I can fix it (or if you won't mind fixing it, that would be cool too. :) )

Posted 1 year ago #
badawe
Member

@asinesio Hey thanks!

Your class works like a charm! You just need a texture power of 2, and don't close the poly! But i still try to make work with Sprites, Like you have one Sprite and you can cut the head off. But I'm to noob to make something like that work =/

Posted 1 year ago #
asinesio
Member

@badawe That would be pretty sweet. There are others who have tried things with render-to-texture on this forum, you might want to poke around.

Here's a great post on the matter: http://www.cocos2d-iphone.org/forum/topic/9029

Glad you found a use for my code! :)

Posted 1 year ago #
badawe
Member

@asinesio Yeah i already see that topic, but still need do this with polygon! With complexy verices =/!

But i keep trying! Thanks for sharing your code! Realy!

Posted 1 year ago #
Olmeister
Member

The next challenge is to get these repeating textured polygons to insert into a box2d body IMO.
If anyone could help me with this - I will love them long time ;)

Posted 1 year ago #
Olmeister
Member

Okay, im having a few problems with the PRKit library, I think the problem lays in the triangulation process. Im unsure if my polygon is incompatible with the triangulator, so i decided to post a few photographs:

Here is the polygon I am attempting to render. The black area is the area I want to have a repeating texture.

Here is the polygon triangulated and rendered, as you can see the triangles dont render properly, they look strange:

Does anyone know whats going on here.
The polygon vertices are defined in physics editor, i manually wrote down the coordinates and then inputted them into an array for the PRKit library...
Does anyone know whats up with this?

Thanks, Olmeister!

Posted 1 year ago #
Andreas Loew
Member

I guess that PRKit can only handle convex polygons. PhysicsEditor builds a bunch of convex polygons when you use a concave shape like that one. But that's just a guess....

Posted 1 year ago #
Olmeister
Member

Im almost certain that the triangulator method by Ratcliff that is inbuilt into the PRKit can work for either convex or concave polygons:

// ** THIS IS A CODE SNIPPET WHICH WILL EFFICIEINTLY TRIANGULATE ANY
// ** POLYGON/CONTOUR (without holes) AS A STATIC CLASS.

Would my polygon be one with holes? (See above image)
Here are the coordinates for the polygon: I defined them in a counter-clockwise fashion.
(0, 0) , (1927, 0) , (1927, 165) , (1881, 165) , (1840, 156) , (1612, 156) , (1538, 131.5) ,
(1470, 122.5) , (1358, 122.5) , (1332, 116.5) , (977, 121.5) , (920, 113.5) , (706, 110.5) , (659, 102.5) ,
(527, 105.5) , (488, 98.5) , (348, 97.5) , (309, 102.5) , (269, 92.5) , (202, 89) , (139, 86.5) ,
(98, 94.5) , (54, 93.5) , (34.5, 104) , (18.5, 152) , (16.5, 254) , (17.5, 281) , (24.5, 299) ,
(68, 320) , (184, 333) , (233, 351) , (280, 328) , (444, 340) , (627, 317) , (948, 327) ,
(1646, 285) , (1928, 321) , (1929, 412.5) , (0, 412.5)

Posted 1 year ago #
asinesio
Member

@Olmeister - Yes, the idea is that it can handle convex or concave polygons. It can't, however, function with polygons with holes. The triangulator is working properly.

Honestly, I think it's an issue with the resulting triangulated points and passing them to OpenGL. There must be some difference between how the triangulator is outputting vertices and how OpenGL expects them.

There must be a bug with the PRKit code & how it passes the vertices to OpenGL.

Anyone with some OpenGL experience willing to help? (I'm a relative noob, and I wrote PRKit, so that would explain the fact that it doesn't work in all cases.)

Posted 1 year ago #
asinesio
Member

I've spent some time and refactored the PRKit code. It still uses the same algorithm, but now:

- Supports pluggable triangulation algorithms (you just need to implement the PRTriangulator protocol)
- Added convenience accessors
- Beefed up demonstration layer & docs

This should allow all of you to experiment and/or implement your own triangulation algorithms it the default doesn't meet your needs.

Check it out: https://github.com/asinesio/cocos2d-PRKit

Posted 1 year ago #
ehoffman
Member

Nice. Thank you!

Posted 1 year ago #
badawe
Member

@asinesio this new demo work perfect!!

Thanks!

Posted 1 year ago #
Soulghai
Member

Hi guys.
I have same problem like Olmeister.
(I'm use cocos2d-PRKit by asinesio)

Posted 1 year ago #
jptsetung
Member
What is the purpose of these lines in the draw method of the PRKit ?
```
glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_DECAL);
...
glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE);
```
I'm trying to adapt the code of the PRKit with a draw method using GL_TRIANGLE_STRIP to draw a strip with a repeated texture. So far it doesn't work. Is GL_REPEAT compatible with GL_TRIANGLE_STRIP or should I use GL_TRIANGLES instead ?
Posted 1 year ago #
ehoffman
Member

When you use PRKit, you should use GL_TRIANGLES to draw. The triangulation method gives you triangles, no triangle strip. GL_REPEAT is compatible with GL_TRIANGLE_STRIP, but to get texture coordinates right is not easy -> does'nt matter if you use GL_TRIANGLES or ...STRIP.

To the code: The first one changes texture color mapping to GL_DECAL, the second one back to GL_MODULATE -> which is the default.

What is the difference:

GL_DECAL ignores the primary color and just shows the texel.

GL_MODULE multiplies primary color and texel and shows the result.

(the second hit if you search for GL_DECAL GL_MODULATE on google).

So, GL_DECAL just draws the texture color. GL_MODULATE mixes the color you set by glColor4X (or glColorPointer) with the texture color.

Posted 1 year ago #
goki
Member

Hey

first of all, big thanks to asinesio for creating PRKit, great work, it saved me a lot of time!

However I encountered some sort of bug with blending the PRFilledPolygon
after downloading sample project and only adding background image it looks like that:

to me it seems like only 1st triangle for each PRFilledPolygon has proper blending mode and rest of them is bugged

I managed to solve this matter (for my needs) by calling glDisable(GL_BLEND) at the beggining of draw and the enabling it at the end, but I believe it's just quick fix and won't work for those who need blending

I'm Open GL noob and I have no idea about it, that's why I'm reporting it here, maybe some of you have knowledge how to fix it:)

once again great work asinesio! big thanks!

Posted 12 months ago #
MikeSz
Member

Bump :)

I have exactly the same problem as shown in the above post

The solution with disable/enable GL_BLEND works well for the prototyping, but not sure what will happen later :)

Other than that - wonderful code :)

Posted 9 months ago #

Jonlo
Member

Will it be possible to achieve this but having a Circle as a polygon??? i have tried to get it modifying the draw method with this code:

-(void) draw {

    int r =100;
    CGPoint center = CGPointMake(240, 160);
    int segs =45;
    int a =1;
    int additionalSegment = 1;

    const float coef = 2.0f * (float)M_PI/segs;

    float *vertices = malloc( sizeof(float)*2*(segs+2));
    if( ! vertices )
        return;

    memset( vertices,0, sizeof(float)*2*(segs+2));

    for(int i=0;i<=segs;i++)
    {
        float rads = i*coef;
        float j = r * cosf(rads + a) + center.x;
        float k = r * sinf(rads + a) + center.y;

        vertices[i*2] = j;
        vertices[i*2+1] =k;
    }
    vertices[(segs+1)*2] = center.x;
    vertices[(segs+1)*2+1] = center.y;

    glDisable(GL_TEXTURE_2D);
    glDisableClientState(GL_TEXTURE_COORD_ARRAY);
    glDisableClientState(GL_COLOR_ARRAY);

    glVertexPointer(2, GL_FLOAT, 0, vertices);
    glDrawArrays(GL_TRIANGLE_FAN, 0, segs+additionalSegment);

    // restore default state
    glEnableClientState(GL_COLOR_ARRAY);
    glEnableClientState(GL_TEXTURE_COORD_ARRAY);
    glEnable(GL_TEXTURE_2D);    

    free( vertices );   

}

but I'm just getting a circle with no texture, thanks!

Posted 9 months ago #

maulik13
Member

Thanks for sharing this code. This is very useful.

One thing I found out is that Ratcliff algorithm will fail to give correct result if you have identical points in your contour, otherwise it works great.

Posted 9 months ago #
Diego R.
Member

The code is working nicely in iOS (when enabling/disabling GL_BLEND as described before). For some reason, when I try to use it with the mac port of cocos, it is not drawing anything. What is the iOS specific part here?

*** Edited *** Found the issue. In case, anybody runs into the same problem: Make sure that in Mac you use ccVertex2F and not just cgpoint arrays when drawing using arrays in openGL

Posted 8 months ago #
calin
Member

@asinesio Very nice, thanks for taking the time to resurrect the code and posting it publicly.

Is it possible to have smooth edges for such a polygon? If yes, what would be the best solution to achieve this?

Thanks!

Posted 4 months ago #

RSS feed for this topic

« Previous 123 Next »

Reply »

You must log in to post.