Jump to content

  • Log In with Google      Sign In   
  • Create Account

FREE SOFTWARE GIVEAWAY

We have 4 x Pro Licences (valued at $59 each) for 2d modular animation software Spriter to give away in this Thursday's GDNet Direct email newsletter.


Read more in this forum topic or make sure you're signed up (from the right-hand sidebar on the homepage) and read Thursday's newsletter to get in the running!


Why do i get stripes instead of a plain color? (in a defined area)


Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

  • You cannot reply to this topic
6 replies to this topic

#1 PaulCaben   Members   -  Reputation: 110

Like
0Likes
Like

Posted 01 July 2012 - 06:37 PM

Hi,

I'm just starting with OpenGL, I would like to fill an area with a plain color, but i always get "stripes" inside this area. Would someone know how to fill it with a simple plain color? I put some pictures attached to this post :

At first :

Capture d’écran 2012-07-02 à 02.18.16.png

After i click once (it calls genBackground again, the unwanted stripes appear :
Capture d’écran 2012-07-02 à 02.18.25.png

Same thing after another click :

Capture d’écran 2012-07-02 à 02.18.38.png



Here is the code :

Terrain is the area where to draw the plain color :

#import "Terrain.h"
#import "HelloWorldLayer.h"
@implementation Terrain
@synthesize textureImage = _textureImage;
- (ccColor4F)randomBrightColor {
	while (true) {
		float requiredBrightness = 192;
		ccColor4B randomColor =
		ccc4(arc4random() % 255,
			 arc4random() % 255,
			 arc4random() % 255,
			 255);
		if (randomColor.r > requiredBrightness ||
			randomColor.g > requiredBrightness ||
			randomColor.b > requiredBrightness) {
			return ccc4FFromccc4B(randomColor);
		}	  
	}
  
}
- (void)generateVertices {
  
	_hillVertices[_nHillVertices] = CGPointMake(0, 0);
	_hillTexCoords[_nHillVertices++] = CGPointMake(0, 0);
  
	_hillVertices[_nHillVertices] = CGPointMake(100, 50);
	_hillTexCoords[_nHillVertices++] = CGPointMake(100, 50);
  
	_hillVertices[_nHillVertices] = CGPointMake(150, 200);
	_hillTexCoords[_nHillVertices++] = CGPointMake(150, 200);
  
	_hillVertices[_nHillVertices] = CGPointMake(100, 300);
	_hillTexCoords[_nHillVertices++] = CGPointMake(100, 300);
}

- (id)init {
	if ((self = [super init])) {
		[self generateVertices];
	}
	return self;
}
- (void) draw {
	glBindTexture(GL_TEXTURE_2D, _textureImage.texture.name);
	glDisableClientState(GL_COLOR_ARRAY);
  
	glColor4f(1, 1, 1, 1);
	glVertexPointer(2, GL_FLOAT, 0, _hillVertices);
	glTexCoordPointer(2, GL_FLOAT, 0, _hillTexCoords);
	glDrawArrays(GL_TRIANGLE_STRIP, 0, (GLsizei)_nHillVertices);
  
}

and this is the "HelloWorldLayer", where i set the background and the textureImage color :

-(CCSprite *)spriteWithColor:(ccColor4F)bgColor textureSize:(float)textureSize {
  
	// 1: Create new CCRenderTexture
	CCRenderTexture *rt = [CCRenderTexture renderTextureWithWidth:textureSize height:textureSize];
  
	// 2: Call CCRenderTexture:begin
	[rt beginWithClear:bgColor.r g:bgColor.g b:bgColor.b a:bgColor.a];
  
	// 3: Draw into the texture
	glDisable(GL_TEXTURE_2D);
	glDisableClientState(GL_TEXTURE_COORD_ARRAY);
  
	float gradientAlpha = 0.7;  
	CGPoint vertices[4];
	ccColor4F colors[4];
	int nVertices = 0;
  
	vertices[nVertices] = CGPointMake(0, 0);
	colors[nVertices++] = (ccColor4F){0, 0, 0, 0 };
	vertices[nVertices] = CGPointMake(textureSize, 0);
	colors[nVertices++] = (ccColor4F){0, 0, 0, 0};
	vertices[nVertices] = CGPointMake(0, textureSize);
	colors[nVertices++] = (ccColor4F){0, 0, 0, gradientAlpha};
	vertices[nVertices] = CGPointMake(textureSize, textureSize);
	colors[nVertices++] = (ccColor4F){0, 0, 0, gradientAlpha};
  
	glVertexPointer(2, GL_FLOAT, 0, vertices);
	glColorPointer(4, GL_FLOAT, 0, colors);
	glDrawArrays(GL_TRIANGLE_STRIP, 0, (GLsizei)nVertices);
  
	glEnableClientState(GL_TEXTURE_COORD_ARRAY);
	glEnable(GL_TEXTURE_2D);
  
	CCSprite *noise = [CCSprite spriteWithFile:@"Noise.png"];
	[noise setBlendFunc:(ccBlendFunc){GL_DST_COLOR, GL_ZERO}];
	noise.position = ccp(textureSize/2, textureSize/2);
	[noise visit];
  
	// 4: Call CCRenderTexture:end
	[rt end];
  
	// 5: Create a new Sprite from the texture
	return [CCSprite spriteWithTexture:rt.sprite.texture];
  
}
- (void)genBackground {
  
	[_background removeFromParentAndCleanup:YES];
  
	ccColor4F bgColor = [self randomBrightColor];
	_background = [self spriteWithColor:bgColor textureSize:512];
  
	CGSize winSize = [CCDirector sharedDirector].winSize;
	_background.position = ccp(winSize.width/2, winSize.height/2);	  
	ccTexParams tp = {GL_LINEAR, GL_LINEAR, GL_REPEAT, GL_REPEAT};
	[_background.texture setTexParameters:&tp];
  
	[self addChild:_background];
  
	ccColor4F color3 = [self randomBrightColor];
	CCSprite *textureImage = [self spriteWithColor:color3 textureSize:512];
	//ccTexParams tp2 = {GL_LINEAR, GL_LINEAR, GL_REPEAT, GL_REPEAT};
	//[stripes.texture setTexParameters:&tp2];
	_terrain.textureImage = textureImage;
  
}

Thanks for your help

Sponsor:

#2 dpadam450   Members   -  Reputation: 949

Like
0Likes
Like

Posted 01 July 2012 - 08:49 PM

What is your algorithm and are you forded to do it that way? If I were you I would triangulate all the vertices and then call glColor3f() once and draw the triangles.

#3 PaulCaben   Members   -  Reputation: 110

Like
0Likes
Like

Posted 02 July 2012 - 12:07 AM

Thanks,
I would like to create a special wall, with different points in the x-axis (the red points), all connected to the y-axis (the green points). Is that what you mean by triangulate the vertices?

ques.png

I've tried to do this, but i have a problem (Edit)

I have a EXC_BAD_ACCESS in the draw method, next to "bind texture", i thought it might be because of the textCoord array, that may be looking for empty coordinates, but the texture is a 512pixels/or points (i'm not sure) square...

- (void)generatePath {
  
	int _nVertices = 0;
	_hillKeyPoints[_nVertices] = CGPointMake(44, 0); //_nVertices = 1
	_hillKeyPoints[++_nVertices] = CGPointMake(100, 75); //_nVertices = 2
	_hillKeyPoints[++_nVertices] = CGPointMake(50, 150); //_nVertices = 3
	_hillKeyPoints[++_nVertices] = CGPointMake(150, 225); //_nVertices = 4
}
-(void)generatePolygons{
  
	_nPolyVertices = 0;
	float x1 = 0;
	float y1 = 0;
	int keyPoints = 0;
  
	_fromKeyPointI = 0;
	_toKeyPointI = 4;
  
	for (int i=_fromKeyPointI; i<_toKeyPointI; i++){
	  
		//V0: at (0,0)
		_polyVertices[_nPolyVertices] = CGPointMake(x1, y1);
		_polyTexCoords[_nPolyVertices++] = CGPointMake(x1, y1);
	  
		//V1: to the first "point"
		_polyVertices[_nPolyVertices] = CGPointMake(_hillKeyPoints[keyPoints].x, _hillKeyPoints[keyPoints].y);
		_polyTexCoords[_nPolyVertices++] = CGPointMake(_hillKeyPoints[keyPoints].x, _hillKeyPoints[keyPoints].y);
	  
		//V2, same y as point n°2:
		_polyVertices[_nPolyVertices] = CGPointMake(0, _hillKeyPoints[keyPoints+1].y);
		_polyTexCoords[_nPolyVertices++] = CGPointMake(0, _hillKeyPoints[keyPoints+1].y);
	  
	  
	  
		//V3 = V1
		_polyVertices[_nPolyVertices] = _polyVertices[_nPolyVertices-2];
		_polyTexCoords[_nPolyVertices++] = _polyVertices[_nPolyVertices-2];
	  
		//V4 = V2
		_polyVertices[_nPolyVertices] = _polyVertices[_nPolyVertices-2];
		_polyTexCoords[_nPolyVertices++] = _polyVertices[_nPolyVertices-2];
	  
		//V5 = same x,y as point n°2
		keyPoints++;
		_polyVertices[_nPolyVertices] = CGPointMake(_hillKeyPoints[keyPoints].x, _hillKeyPoints[keyPoints].y);
		_polyTexCoords[_nPolyVertices++] = CGPointMake(_hillKeyPoints[keyPoints].x, _hillKeyPoints[keyPoints].y);
	  
		y1 = _polyVertices[_nPolyVertices].y;
		//CCLOG(@"y1 : %f", y1);
	}
  
	for(int i = 1; i < kMaxPolyVertices; ++i) {  
		//ccDrawLine(_polyVertices[i-1], _polyVertices[i]);
		CCLOG(@"_polyVertices[i-1].y : %f, _polyVertices[i].y : %f", _polyVertices[i-1].y, _polyVertices[i].y);
	}
}

- (id)init {
	if ((self = [super init])) {
		[self generatePath];
		[self generatePolygons];
	}
	return self;
}
- (void) draw {
  
	glBindTexture(GL_TEXTURE_2D, _textureImage.texture.name);//EXC_BAD_ACCESS
	glDisableClientState(GL_COLOR_ARRAY);
  
	glColor4f(1, 1, 1, 1);
	glVertexPointer(2, GL_FLOAT, 0, _polyVertices);
	glTexCoordPointer(2, GL_FLOAT, 0, _polyTexCoords);
	glDrawArrays(GL_TRIANGLES, 0, (GLsizei)_nPolyVertices);
  
}

If i comment the bind texture line and the textcoord line, it gives me something strange, that moves, for example :

Capture d’écran 2012-07-02 à 13.07.44.png

Capture d’écran 2012-07-02 à 13.07.48.png

Would you know something about this?

Thanks

Edited by PaulCaben, 02 July 2012 - 05:14 AM.


#4 Murdocki   Members   -  Reputation: 274

Like
1Likes
Like

Posted 02 July 2012 - 05:45 AM

looks like there's still some leftovers from rendering the background, you could check if you've disabled texturing and if vertex coloring is set up properly.
Not quite sure on that language you're using or immediate mode, but looks like the first image is correct and the others use some sort of texture.

#5 PaulCaben   Members   -  Reputation: 110

Like
0Likes
Like

Posted 02 July 2012 - 04:44 PM

Thanks, ok so it works!

I changed a bit the vertices, and added some glDisable... in the draw method.

Could you explain me a little bit about these snapshots :

With :

//glDisable(GL_TEXTURE_2D);
//glDisableClientState(GL_COLOR_ARRAY);
//glDisableClientState(GL_TEXTURE_COORD_ARRAY);
  
	glBindTexture(GL_TEXTURE_2D, _textureImage.texture.name);
  
	glColor4f(1, 1, 1, 1);
	glVertexPointer(2, GL_FLOAT, 0, _polyVertices);
	glTexCoordPointer(2, GL_FLOAT, 0, _polyTexCoords);
	glDrawArrays(GL_TRIANGLE_STRIP, 0, (GLsizei)_nPolyVertices);

Cnothing.png


Then with :

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

CdisableColor.png

And finally with :

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

The final image :

CdisableTexture.png

What are these COLOR_ARRAY and TEXTURE_COORD by default? And why the texture coord would create stripes on the image?

Thanks!

#6 Murdocki   Members   -  Reputation: 274

Like
1Likes
Like

Posted 03 July 2012 - 02:45 AM

i'm not quite sure why it would create the stripes but it's probably uninitialized memory or unintended texture access. Also i'm not quite sure at how the client states should work with immediate mode. I'm only using those calls when i'm using vertex buffers.

glEnableClientState enables usage of provided data. So for example if you want to use vertex colors you would enable GL_COLOR_ARRAY and then make a call to glColorPointer to provide the colors that should be used.

it looks like glColor is not used when drawing arrays, try enabling the color array and provide the colors. It may also be a good idea to look up either immediate mode rendering or vertex buffer objects, i suggest the latter. This may be a good page to give you an idea.

*edit: When you are uncertain what a specific opengl call does, try paste it into google, add xml as second search string and then hit the page from opengl.org. They're usually pretty good.

Edited by Murdocki, 03 July 2012 - 02:47 AM.


#7 PaulCaben   Members   -  Reputation: 110

Like
0Likes
Like

Posted 04 July 2012 - 08:34 PM

Okay thanks :)




Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.



PARTNERS