Polygons transparency - alpha-transparency

I need to bind texture on 2 crossed polygons and make them(polygons) invisible (with alpha=0). But textures are transparent with polygons.
Is is possible to make transparent only polygons without their textures?
By this way i bind textute
Gl.glEnable(Gl.GL_BLEND);
Gl.glEnable(Gl.GL_ALPHA_TEST);
Gl.glBlendFunc(Gl.GL_SRC_ALPHA, Gl.GL_ONE_MINUS_SRC_ALPHA);
Gl.glColor4d(255,255,255,0.1);
Gl.glBegin(Gl.GL_QUADS);
Gl.glTexCoord2f(1, 0); Gl.glVertex3d(2, 2, 3);
Gl.glTexCoord2f(0, 0); Gl.glVertex3d(4, 2, 3);
Gl.glTexCoord2f(0, 1); Gl.glVertex3d(4, 4, 3);
Gl.glTexCoord2f(1, 1); Gl.glVertex3d(2, 4, 3);
Gl.glEnd();
Image
I need smth like on the left part of the img.

I found the solution.
Load png!! image
GL.glBindTexture(GL.GL_TEXTURE_2D, this.texture[i]);
Gl.glTexEnvi(Gl.GL_TEXTURE_ENV, Gl.GL_TEXTURE_ENV_MODE, Gl.GL_REPLACE);
Gl.glAlphaFunc(Gl.GL_LESS, 0.2f);
GL.glTexParameteri(GL.GL_TEXTURE_2D, GL.GL_TEXTURE_MAG_FILTER, GL.GL_LINEAR);
GL.glTexParameteri(GL.GL_TEXTURE_2D, GL.GL_TEXTURE_MIN_FILTER, GL.GL_LINEAR);
GL.glTexImage2D(GL.GL_TEXTURE_2D, 0, (int)Gl.GL_RGBA, image[i].Width, image[i].Height, 0, GL.GL_RGBA, GL.GL_UNSIGNED_BYTE, bitmapdata.Scan0);
And drow object:
Gl.glClear(Gl.GL_COLOR_BUFFER_BIT | Gl.GL_DEPTH_BUFFER_BIT);
GL.glEnable(GL.GL_BLEND); // Enable Blending
GL.glDisable(GL.GL_DEPTH_TEST);
GL.glBlendFunc(Gl.GL_SRC_ALPHA, GL.GL_ONE_MINUS_SRC_ALPHA);
GL.glBindTexture(GL.GL_TEXTURE_2D, texture[0]);
Gl.glBegin(Gl.GL_QUADS);
Gl.glTexCoord2f(1, 0); Gl.glVertex3d(2, 2, 3);
Gl.glTexCoord2f(0, 0); Gl.glVertex3d(4, 2, 3);
Gl.glTexCoord2f(0, 1); Gl.glVertex3d(4, 6, 3);
Gl.glTexCoord2f(1, 1); Gl.glVertex3d(2, 6, 3);
Gl.glEnd();
And you will get your image without any background.

Related

Cairo only render to specific color component

I am using Cairo and would like to render one color component at a time. For example, if I render a set of blue rectangles and then render a set of red rectangles, I want where they overlap to be purple rather than red.
Using set_source_rgb(ctx, 0.0, 1.0, 0.0) doesn't work, because it will overwrite the other channels with zeros. Using transparency doesn't work either, as it equally effects all channels. I would like a way to only render to one channel.
Is that possible? Thank you.
Use CAIRO_OPERATOR_ADD instead of CAIRO_OPERATOR_OVER (the default):
#include <cairo.h>
int main() {
cairo_surface_t *s = cairo_image_surface_create(CAIRO_FORMAT_ARGB32, 20, 20);
cairo_t *cr = cairo_create(s);
cairo_set_operator(cr, CAIRO_OPERATOR_ADD);
/* Render blue */
cairo_set_source_rgb(cr, 0, 0, 1);
cairo_rectangle(cr, 0, 0, 15, 15);
cairo_fill(cr);
/* Render red */
cairo_set_source_rgb(cr, 1, 0, 0);
cairo_rectangle(cr, 5, 5, 15, 15);
cairo_fill(cr);
cairo_surface_write_to_png(s, "out.png");
cairo_destroy(cr);
cairo_surface_destroy(s);
return 0;
}

Batching OpenGL sprites

i have been learning OpenGL and have been able to create a successful 2d drawing system using triangle strips. I wrote a particle generator to test batching the geometry and everything works well, i'm able to render 30k+ vertices at 60 fps on an iPhone 5. I use degenerative triangles to connect the particles and draw them at once. What i am trying to accomplish is batch rendering without using degenerative triangles as that would reduce the amount of data being sent to the GPU by 1/3 the amount which would be huge.
I am attempting to use glDrawElements with triangles to draw 2 sprites with the following code
//the vertices for the square (2d)
GLfloat square[] = {
50, 50, //bottom left
100, 50, //bottom right
50, 100, //top left
100, 100, //top right
150, 200, //bottom left
200, 150, //bottom right
150, 200, //top left
200, 200 //top right
};
//texture coords
GLfloat tex[] = {
0,0,
1,0,
0,1,
1,1,
0,0,
1,0,
0,1,
1,1
};
GLubyte indices[] =
{
0,2,3,
0,3,1,
0,2,3,
0,3,1
};
//actual drawing code
glBindBuffer(GL_ARRAY_BUFFER, 0);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);
glVertexAttribPointer(ATTRIB_VERTEX, 2, GL_FLOAT, GL_FALSE, 0, square);
glVertexAttribPointer(ATTRIB_TEX, 2, GL_FLOAT, GL_FALSE, 0, tex);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, image);
glDrawElements(GL_TRIANGLES, 12, GL_UNSIGNED_BYTE, indices);
This code draws the first image without issue, but the second image is distorted. I have been looking online but have been unable to figure out how to make this work correctly.
First of all, you're currently using the same indices for both quads, so the second image shouldn't even be visible at all.
Other than that your vertex data for the second quad is messed, you have the point (150, 200) two times, the first one should probably be (150, 150).

How to use vertex buffer objects (VBO) instead of calling glDrawArrays thousands of times in OpenGL ES 1.0 on iOS?

For a simulation we've created a OpenGL1.1 view with a grid of 32 x 48 rectangles.
We're drawing this grid every time the CADisplayLink calls our draw function, and the vertex positions never change. The only thing that changes from frame to frame is the color of a vertex.
This is a simplified example of how we do it:
- (void)drawFrame {
// draw grid
for (int i = 0; i < numRectangles; i++) {
// ... calculate CGPoint values for vertices ...
GLshort vertices[ ] = {
bottomLeft.x, bottomLeft.y,
bottomRight.x, bottomRight.y,
topLeft.x, topLeft.y,
topRight.x, topRight.y
};
glVertexPointer(2, GL_SHORT, 0, vertices);
glColor4f(r, g, b, 1);
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
}
}
The OpenGL instrument recommended using Vertex Buffer Objects (VBO) for better performance.
Is there an example of how to set up a very basic, simple usage of Vertex Buffer Objects in a case where the vertices don't change from frame to frame?
Apple is providing an example over here, under the section Use Vertex Buffer Objects to Manage Copying Vertex Data, but it's incomplete.
GLuint vertexBuffer;
GLuint indexBuffer;
void CreateVertexBuffers()
{
glGenBuffers(1, &vertexBuffer);
glBindBuffer(GL_ARRAY_BUFFER, vertexBuffer);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
glGenBuffers(1, &indexBuffer);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, indexBuffer);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
}
It doesn't show how to really create the data. The previous listing (which is supposed to be a "bad example") contains these two lines:
const vertexStruct vertices[] = {...};
const GLubyte indices[] = {...};
So these two arrays or structs have to be passed into:
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
and
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
?
Is this the "Interleaved (array of structs)" format preferred by iOS, according to Apple under the Use Interleaved Vertex Data section?
You're not supposed to draw single primitives using glDrawArrays, but large batches. So far you're using only regular vertex arrays, not vertex buffer objects.
The idea is, to put the geometry off all rectangles into one single VBO (a VBO is essentially a vertex array stored "in" OpenGL, rather your process). Changing single vertices is possible by using glBufferSubData.
Vertex color can be put into a vertex array, and hence into a VBO as well.
Update
Say you have some hexagon:
GLfloat vertices[2][] = {
{0, 0}, // 0
{1, 0}, // 1
{0.5, 0.866}, // 2
{-0.5, 0.866}, // 3
{-1, 0}, // 4
{0.5, -0.866}, // 5
{-0.5, -0.866}, // 6
};
and you want to draw only part of the triangles, say the triangles consisting of vertices [0,1,2], [0,3,4] and [0,5,6], then you'd create the following index array
GLushort indices[] = {
0, 1, 2,
0, 3, 4,
0, 5, 6
};
And use that as the indices for glDrawElements.
Update 2
One thing that many computer graphics and OpenGL newbies get wrong is, that a vertex is not merely a position, but a combination of vertex attributes. Which attributes make a vertex is a design choice made by the programmer. But the commonly used vertex attributes are
position
normal
texture coordinates
vertex color
Until OpenGL-3 core the position attribute was mandatory. Since OpenGL-3 core, which made shaders mandatory, vertex attributes are just arbitrary input data into shaders, and as long as a vertex shader manages to deliver the *gl_Position* output, OpenGL is happy.
The important thing is, that two vertices are identical only then, if all the attributes are the same. If they differ in just one attribute, they're not the same vertex. Now let's take our previous example of the hexagon. We're now making the triangles red, green and blue and were going to add two triangles, to extend the red and green ones into kind of diamond shapes:
// x, y, red, green, blue
GLfloat vertices[5][] = {
// red
{0, 0, 1, 0, 0}, // 0
{1, 0, 1, 0, 0}, // 1
{0.5, 0.866, 1, 0, 0}, // 2
{1, 1, 1, 0, 0}, // 3
// green
{0, 0, 0, 1, 0}, // 4
{-0.5, 0.866, 0, 1, 0}, // 5
{-1, 0, 0, 1, 0}, // 6
{-1, 1, 0, 1, 0}, // 7
// blue
{0, 0, 0, 0, 1}, // 8
{0.5, -0.866, 0, 0, 1}, // 9
{-0.5, -0.866, 0, 0, 1}, // 10
};
The triangles we now want to draw are
GLushort indices[] = {
// the two red triangles
0, 1, 2,
3, 2, 1,
// the two green triangles
4, 5, 6,
5, 7, 6,
// the blue triangle
8, 9, 10
};
Now we need to tell OpenGL about the structure of our vertex array. This is where the stride parameter of the gl…Pointer functions enters the picture. If nonzero, the stride tells OpenGL the distance (in bytes) between the start of each vertex in the array. By passing the data pointer with the right offset this makes OpenGL access the right things. In our case a vertex consists of
2 position elements of GLfloat with offset 0
3 color elements of GLfloat with offset 2*sizeof(GLfloat)
and each vertex is sizeof(GLfloat)*5 bytes apart.
We'll let the C compiler do the offset calculations for us, by simply dereferencing the right array elements and taking the address of it:
glVertexPointer(2, GL_FLOAT, sizeof(GLfloat)*5, &vertices[0][0]);
glColorPointer(3, GL_FLOAT, sizeof(GLfloat)*5, &vertices[0][2]);
The rest is just glDrawElements(GL_TRIANGLES, 5, GL_UNSIGNED_SHORT, indices).
Note that we're not using VBOs at this point, but client side vertex arrays only. VBOs build upon vertex arrays. So I strongly suggest you first get a strong grip of vertex arrays, before going to tackle VBOs. They quite easy to use actually, but there are a few conceptional pitfalls, like tricking the compiler to pass a number for a pointer parameter.

How to batch render sprites in OpenGL ES (iPhone)

I have a game that renders a bunch of sprites (several hundred), almost all of which are using the same texture. Currently, I'm calling glDrawArrays(...) for each one, which I recently discovered was very inefficient. After doing some research, I've learned that I need to put all my vertices for every sprite into one big vertex buffer, and call glDrawArrays(...) just once using that. However, when I do so it only draws the first sprite, and the other 200 are blank.
blueSpriteVertices[blueBatchNum * 4] = Vertex3DMake(xloc, yloc, zloc);
blueSpriteVertices[blueBatchNum * 4 + 1] = Vertex3DMake(xloc + size, yloc, zloc);
blueSpriteVertices[blueBatchNum * 4 + 2] = Vertex3DMake(xloc, yloc + size, zloc);
blueSpriteVertices[blueBatchNum * 4 + 3] = Vertex3DMake(xloc + size, yloc + size, zloc);
blueBatchNum++;
//^^This block of code^^ is called iteratively, adding data for various sprites
//(around 200) to the vertex array. "xloc", "yloc", etc. are private members of
//this sprite class
//Draw the whole batch
glEnableClientState(GL_VERTEX_ARRAY);
glEnable(GL_TEXTURE_2D);
glEnableClientState(GL_TEXTURE_COORD_ARRAY);
glColor4f(1, 1, 1, 1);
//This code is actually in the Texture2D class implementation, hence "_name"
//and "coordinates"
glBindTexture(GL_TEXTURE_2D, _name);
glVertexPointer(3, GL_FLOAT, 0, blueSpriteVertices);
glTexCoordPointer(2, GL_FLOAT, 0, coordinates);
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
glDisableClientState(GL_TEXTURE_COORD_ARRAY);
glDisable(GL_TEXTURE_2D);
glDisableClientState(GL_VERTEX_ARRAY);
I finally solved this problem by using GL_TRIANGLES instead of GL_TRIANGLE_STRIP, and handled the triangle strips manually. By doing so I was able to eliminate all the "strips" that it was interpreting in between my sprites. Works like a charm now, and the batching definitely improved my game's performance astronomically.
Using (GL_TRIANGLES instead of GL_TRIANGLE_STRIP works for me (on Android)
glDrawElements(GL_TRIANGLES, 6 * mSpriteCounter, GL_UNSIGNED_SHORT, (char*) NULL);
The glDrawArrays() last parameter should contain the number of vertices (in your case you have only 4). Also you must have the same number of texture coordinates to match the drawn vertices!

OpenGL to OpenGL-ES - glRectf()

I am trying to learn OpenGL on the iPhone using the "Super Bible" but am having trouble porting from OpenGLto OpenGL ES. My understanding is that the glRectf() function is not available in the latter. What is the substitute approach? Any relevant conceptual information would be appreciated as well.
The substitute approach is to draw a triangle strip:
GLfloat texture[] =
{
0, 0,
0, 1,
1, 0,
1, 1
};
GLfloat model[] =
{
0, 0, // lower left
0, h, // upper left
w, 0, // lower right
w, h // upper right
};
glEnableClientState(GL_VERTEX_ARRAY);
glEnableClientState(GL_TEXTURE_COORD_ARRAY);
glVertexPointer(2, GL_FLOAT, 0, model);
glTexCoordPointer(2, GL_FLOAT, 0, texture);
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
This draws a textured rectangle with width w and height h.
Rather than doing a rect, you just do two triangles.
This is really irrelevant though since GL-ES on the iPhone does not support immediate mode. You need to define all your vertices in an array and use one of the vertex array rendering functions to draw them rather than using the immediate mode functions.