• Advertisement
Sign in to follow this  

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

This topic is 2055 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts


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 :

[attachment=9738:Capture d’écran 2012-07-02 à 02.18.16.png]

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

Same thing after another click :

[attachment=9740: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,
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);

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

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);


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);
[_background.texture setTexParameters:&tp];

[self addChild:_background];

ccColor4F color3 = [self randomBrightColor];
CCSprite *textureImage = [self spriteWithColor:color3 textureSize:512];
//[stripes.texture setTexParameters:&tp2];
_terrain.textureImage = textureImage;


Thanks for your help

Share this post

Link to post
Share on other sites
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.

Share this post

Link to post
Share on other sites
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?


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

_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
_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);
CCLOG(@"_polyVertices[i-1].y : %f, _polyVertices.y : %f", _polyVertices[i-1].y, _polyVertices.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

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 :

[attachment=9749:Capture d’écran 2012-07-02 à 13.07.44.png]

[attachment=9750:Capture d’écran 2012-07-02 à 13.07.48.png]

Would you know something about this?

Thanks Edited by PaulCaben

Share this post

Link to post
Share on other sites
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.

Share this post

Link to post
Share on other sites
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 :


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);


Then with :



And finally with :


The final image :


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


Share this post

Link to post
Share on other sites

[font=arial, helvetica, sans-serif]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.[/font]

[font=arial, helvetica, sans-serif]glEnableClientState enables usage of provided data. So for example if you want to use vertex colors you would enable [color=#000000]GL_COLOR_ARRAY and then make a call to glColorPointer to provide the colors that should be used.[/font]

[color=#000000][font=arial, helvetica, sans-serif]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.[/font]

[color=#000000][font=arial, helvetica, sans-serif]*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.[/font] Edited by Murdocki

Share this post

Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
  • Advertisement
  • Popular Tags

  • Advertisement
  • Popular Now

  • Similar Content

    • By LifeArtist
      Good Evening,
      I want to make a 2D game which involves displaying some debug information. Especially for collision, enemy sights and so on ...
      First of I was thinking about all those shapes which I need will need for debugging purposes: circles, rectangles, lines, polygons.
      I am really stucked right now because of the fundamental question:
      Where do I store my vertices positions for each line (object)? Currently I am not using a model matrix because I am using orthographic projection and set the final position within the VBO. That means that if I add a new line I would have to expand the "points" array and re-upload (recall glBufferData) it every time. The other method would be to use a model matrix and a fixed vbo for a line but it would be also messy to exactly create a line from (0,0) to (100,20) calculating the rotation and scale to make it fit.
      If I proceed with option 1 "updating the array each frame" I was thinking of having 4 draw calls every frame for the lines vao, polygons vao and so on. 
      In addition to that I am planning to use some sort of ECS based architecture. So the other question would be:
      Should I treat those debug objects as entities/components?
      For me it would make sense to treat them as entities but that's creates a new issue with the previous array approach because it would have for example a transform and render component. A special render component for debug objects (no texture etc) ... For me the transform component is also just a matrix but how would I then define a line?
      Treating them as components would'nt be a good idea in my eyes because then I would always need an entity. Well entity is just an id !? So maybe its a component?
    • By QQemka
      Hello. I am coding a small thingy in my spare time. All i want to achieve is to load a heightmap (as the lowest possible walking terrain), some static meshes (elements of the environment) and a dynamic character (meaning i can move, collide with heightmap/static meshes and hold a varying item in a hand ). Got a bunch of questions, or rather problems i can't find solution to myself. Nearly all are deal with graphics/gpu, not the coding part. My c++ is on high enough level.
      Let's go:
      Heightmap - i obviously want it to be textured, size is hardcoded to 256x256 squares. I can't have one huge texture stretched over entire terrain cause every pixel would be enormous. Thats why i decided to use 2 specified textures. First will be a tileset consisting of 16 square tiles (u v range from 0 to 0.25 for first tile and so on) and second a 256x256 buffer with 0-15 value representing index of the tile from tileset for every heigtmap square. Problem is, how do i blend the edges nicely and make some computationally cheap changes so its not obvious there are only 16 tiles? Is it possible to generate such terrain with some existing program?
      Collisions - i want to use bounding sphere and aabb. But should i store them for a model or entity instance? Meaning i have 20 same trees spawned using the same tree model, but every entity got its own transformation (position, scale etc). Storing collision component per instance grats faster access + is precalculated and transformed (takes additional memory, but who cares?), so i stick with this, right? What should i do if object is dynamically rotated? The aabb is no longer aligned and calculating per vertex min/max everytime object rotates/scales is pretty expensive, right?
      Drawing aabb - problem similar to above (storing aabb data per instance or model). This time in my opinion per model is enough since every instance also does not have own vertex buffer but uses the shared one (so 20 trees share reference to one tree model). So rendering aabb is about taking the model's aabb, transforming with instance matrix and voila. What about aabb vertex buffer (this is more of a cosmetic question, just curious, bumped onto it in time of writing this). Is it better to make it as 8 points and index buffer (12 lines), or only 2 vertices with min/max x/y/z and having the shaders dynamically generate 6 other vertices and draw the box? Or maybe there should be just ONE 1x1x1 cube box template moved/scaled per entity?
      What if one model got a diffuse texture and a normal map, and other has only diffuse? Should i pass some bool flag to shader with that info, or just assume that my game supports only diffuse maps without fancy stuff?
      There were several more but i forgot/solved them at time of writing
      Thanks in advance
    • By RenanRR
      Hi All,
      I'm reading the tutorials from learnOpengl site (nice site) and I'm having a question on the camera (https://learnopengl.com/Getting-started/Camera).
      I always saw the camera being manipulated with the lookat, but in tutorial I saw the camera being changed through the MVP arrays, which do not seem to be camera, but rather the scene that changes:
      Vertex Shader:
      #version 330 core layout (location = 0) in vec3 aPos; layout (location = 1) in vec2 aTexCoord; out vec2 TexCoord; uniform mat4 model; uniform mat4 view; uniform mat4 projection; void main() { gl_Position = projection * view * model * vec4(aPos, 1.0f); TexCoord = vec2(aTexCoord.x, aTexCoord.y); } then, the matrix manipulated:
      ..... glm::mat4 projection = glm::perspective(glm::radians(fov), (float)SCR_WIDTH / (float)SCR_HEIGHT, 0.1f, 100.0f); ourShader.setMat4("projection", projection); .... glm::mat4 view = glm::lookAt(cameraPos, cameraPos + cameraFront, cameraUp); ourShader.setMat4("view", view); .... model = glm::rotate(model, glm::radians(angle), glm::vec3(1.0f, 0.3f, 0.5f)); ourShader.setMat4("model", model);  
      So, some doubts:
      - Why use it like that?
      - Is it okay to manipulate the camera that way?
      -in this way, are not the vertex's positions that changes instead of the camera?
      - I need to pass MVP to all shaders of object in my scenes ?
      What it seems, is that the camera stands still and the scenery that changes...
      it's right?
      Thank you
    • By dpadam450
      Sampling a floating point texture where the alpha channel holds 4-bytes of packed data into the float. I don't know how to cast the raw memory to treat it as an integer so I can perform bit-shifting operations.

      int rgbValue = int(textureSample.w);//4 bytes of data packed as color
      // algorithm might not be correct and endianness might need switching.
      vec3 extractedData = vec3(  rgbValue & 0xFF000000,  (rgbValue << 8) & 0xFF000000, (rgbValue << 16) & 0xFF000000);
      extractedData /= 255.0f;
    • By Devashish Khandelwal
      While writing a simple renderer using OpenGL, I faced an issue with the glGetUniformLocation function. For some reason, the location is coming to be -1.
      Anyone has any idea .. what should I do?
  • Advertisement