Related
I am trying to draw a texture with transparency onto a background gradient, created by a vertex shader that interpolates colors between vertices. However, only the opaque parts of texture are being drawn.
I am using the blending function:
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
Rendering code:
struct vertex {
float position[3];
float color[4];
float texCoord[2];
};
typedef struct vertex vertex;
const vertex vertices[] = {
{{1, -1, 0}, {0, 167.0/255.0, 253.0/255.0, 1}, {1, 0}}, // BR (0)
{{1, 1, 0}, {0, 222.0/255.0, 1.0, 1}, {1, 1}}, // TR (1)
{{-1, 1, 0}, {0, 222.0/255.0, 1.0, 1}, {0, 1}}, // TL (2)
{{-1, -1, 0}, {0, 167.0/255.0, 253.0/255.0, 1}, {0, 0}}, // BL (3)
};
const GLubyte indicies[] = {
3, 2, 0, 1
};
-(void) render {
glViewport(0, 0, self.frame.size.width, self.frame.size.height);
glBindBuffer(GL_ARRAY_BUFFER, vertexBuffer);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, indexBuffer);
glVertexAttribPointer(positionSlot, 3, GL_FLOAT, GL_FALSE, sizeof(vertex), 0);
glVertexAttribPointer(colorSlot, 4, GL_FLOAT, GL_FALSE, sizeof(vertex), (GLvoid*)(sizeof(float)*3));
glVertexAttribPointer(textureCoordSlot, 2, GL_FLOAT, GL_FALSE, sizeof(vertex), (GLvoid*)(sizeof(float)*7));
glDrawElements(GL_TRIANGLE_STRIP, sizeof(indicies)/sizeof(indicies[0]), GL_UNSIGNED_BYTE, 0);
// Not sure if required for blending to work..
glBindBuffer(GL_ARRAY_BUFFER, vertexBuffer);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, indexBuffer);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, texture);
glUniform1i(textureUniform, 0);
glVertexAttribPointer(positionSlot, 3, GL_FLOAT, GL_FALSE, sizeof(vertex), 0);
glVertexAttribPointer(colorSlot, 4, GL_FLOAT, GL_FALSE, sizeof(vertex), (GLvoid*)(sizeof(float)*3));
glVertexAttribPointer(textureCoordSlot, 2, GL_FLOAT, GL_FALSE, sizeof(vertex), (GLvoid*)(sizeof(float)*7));
glDrawElements(GL_TRIANGLE_STRIP, sizeof(indicies)/sizeof(indicies[0]), GL_UNSIGNED_BYTE, 0);
[context presentRenderbuffer:GL_RENDERBUFFER];
}
I'm unsure whether I need to do two lots of drawing to the render buffer in order for the blend function to work, so currently I am drawing without the texture binded, then with it binded.
Fragment Shader:
varying lowp vec4 destinationColor;
varying lowp vec2 texCoordOut;
uniform sampler2D tex;
void main() {
lowp vec4 tex2D = texture2D(tex, texCoordOut);
gl_FragColor = vec4(tex2D.rgb+destinationColor.rgb, tex2D.a*destinationColor.a);
}
Vertex Shader:
attribute vec4 position;
attribute vec4 sourceColor;
varying vec4 destinationColor;
attribute vec2 texCoordIn;
varying vec2 texCoordOut;
void main() {
destinationColor = sourceColor;
gl_Position = position;
texCoordOut = texCoordIn;
}
Texture loading code:
-(GLuint) loadTextureFromImage:(UIImage*)image {
CGImageRef textureImage = image.CGImage;
size_t width = CGImageGetWidth(textureImage);
size_t height = CGImageGetHeight(textureImage);
GLubyte* spriteData = (GLubyte*) malloc(width*height*4);
CGColorSpaceRef cs = CGImageGetColorSpace(textureImage);
CGContextRef c = CGBitmapContextCreate(spriteData, width, height, 8, width*4, cs, kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
CGColorSpaceRelease(cs);
CGContextScaleCTM(c, 1, -1);
CGContextTranslateCTM(c, 0, -CGContextGetClipBoundingBox(c).size.height);
CGContextDrawImage(c, (CGRect){CGPointZero, {width, height}}, textureImage);
CGContextRelease(c);
GLuint glTex;
glGenTextures(1, &glTex);
glBindTexture(GL_TEXTURE_2D, glTex);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, (int)width, (int)height, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);
glBindTexture(GL_TEXTURE_2D, 0);
free(spriteData);
return glTex;
}
Any ideas what I am doing wrong?
The answer you gave yourself might suffice in your particular situation, but I don't think it is a very nice solution. You will probably run into many problems when you want to render more than two objects.
You draw the same object twice. First without a texture bound and then with the texture bound - with the blending done in the shader. But how would you do that with a third object?
I recommend using a different set of vertices for both objects. Something like this:
const vertex gradient_background[] = {
{{1, -1, 0}, {0, 167.0/255.0, 253.0/255.0, 1}, {1, 0}},
{{1, 1, 0}, {0, 222.0/255.0, 1.0, 1}, {1, 1}},
{{-1, 1, 0}, {0, 222.0/255.0, 1.0, 1}, {0, 1}},
{{-1, -1, 0}, {0, 167.0/255.0, 253.0/255.0, 1}, {0, 0}}
};
const vertex textured_object[] = {
{{1, -1, 0}, {0, 0, 0, 0}, {1, 0}},
{{1, 1, 0}, {0, 0, 0, 0}, {1, 1}},
{{-1, 1, 0}, {0, 0, 0, 0}, {0, 1}},
{{-1, -1, 0}, {0, 0, 0, 0}, {0, 0}}
};
And adjust your render function appropriately, also unbind texture to 0 after drawing.
-(void) render {
...
glVertexAttribPointer(positionSlot, 3, GL_FLOAT, GL_FALSE, sizeof(gradient_background), 0);
glVertexAttribPointer(colorSlot, 4, GL_FLOAT, GL_FALSE, sizeof(gradient_background), (GLvoid*)(sizeof(float)*3));
glVertexAttribPointer(textureCoordSlot, 2, GL_FLOAT, GL_FALSE, sizeof(gradient_background), (GLvoid*)(sizeof(float)*7));
glDrawElements(GL_TRIANGLE_STRIP, sizeof(indicies)/sizeof(indicies[0]), GL_UNSIGNED_BYTE, 0);
...
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, texture);
glUniform1i(textureUniform, 0);
glVertexAttribPointer(positionSlot, 3, GL_FLOAT, GL_FALSE, sizeof(textured_object), 0);
glVertexAttribPointer(colorSlot, 4, GL_FLOAT, GL_FALSE, sizeof(textured_object), (GLvoid*)(sizeof(float)*3));
glVertexAttribPointer(textureCoordSlot, 2, GL_FLOAT, GL_FALSE, sizeof(textured_object), (GLvoid*)(sizeof(float)*7));
glDrawElements(GL_TRIANGLE_STRIP, sizeof(indicies)/sizeof(indicies[0]), GL_UNSIGNED_BYTE, 0);
// Don't forget to unbind texture for next draw
glBindTexture(GL_TEXTURE_2D, 0);
...
}
Fragment shader
varying lowp vec4 destinationColor;
varying lowp vec2 texCoordOut;
uniform sampler2D tex;
void main() {
lowp vec4 tex2D = texture2D(tex, texCoordOut); // Returns (0, 0, 0, 1) when texture 0 is bound
gl_FragColor = destinationColor + tex2D;
}
Then use
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
Or any other blending function you wish.
Okay, well I feel silly. Attempting to use the blending function outside the fragment shader didn't do anything as the texture was already drawn. I just needed to use the equivalent inside the fragment shader:
varying lowp vec4 destinationColor;
varying lowp vec2 texCoordOut;
uniform sampler2D tex;
void main() {
lowp vec4 tex2D = texture2D(tex, texCoordOut);
lowp vec4 result = tex2D + vec4(1.0 - tex2D.a) * destinationColor;
gl_FragColor = result;
}
I'm working with openGL ES 2.0 and swift. I finally got to display the texture but it only one pixel is shown!
Can anyone help with this?
My simple vertex shader:
attribute vec2 TexCoordIn;
varying vec2 TexCoordOut;
void main(void) {
gl_Position = Position;
TexCoordOut = TexCoordIn;
}
And fragment shader:
varying lowp vec2 TexCoordOut;
uniform sampler2D Texture;
void main(void) {
gl_FragColor = texture2D(Texture, TexCoordOut);
}
My view controller:
// My Vertex, Vertices and Indices
struct Vertex {
var Position: (CFloat, CFloat, CFloat)
var Color: (CFloat, CFloat, CFloat, CFloat)
var TexCoord: (CFloat, CFloat)
}
var Vertices = [
Vertex(Position: (1, -1, 0) , Color: (1, 0, 0, 1), TexCoord: (1, 0)),
Vertex(Position: (1, 1, 0) , Color: (0, 1, 0, 1), TexCoord: (1, 1)),
Vertex(Position: (-1, 1, 0) , Color: (0, 0, 1, 1), TexCoord: (0, 1)),
Vertex(Position: (-1, -1, 0), Color: (0, 0, 0, 1), TexCoord: (0, 0))
]
var Indices: [GLubyte] = [
0, 1, 2,
2, 3, 0
]
func compileShaders() {
var vertexShader: GLuint = self.compileShader("Vertex", shaderType: GLenum(GL_VERTEX_SHADER))
var fragmentShader: GLuint = self.compileShader("Fragment", shaderType: GLenum(GL_FRAGMENT_SHADER))
var programHandle: GLuint = glCreateProgram()
glAttachShader(programHandle, vertexShader)
glAttachShader(programHandle, fragmentShader)
glLinkProgram(programHandle)
glUseProgram(programHandle)
glEnableVertexAttribArray(self.positionSlot)
glEnableVertexAttribArray(self.colorSlot)
texCoordSlot = GLuint(glGetAttribLocation(programHandle, "TexCoordIn"))
glEnableVertexAttribArray(texCoordSlot)
let pointer = UnsafePointer<Int>(bitPattern: sizeof(Float) * 7)
glVertexAttribPointer(texCoordSlot, 2, GLenum(GL_FLOAT), GLboolean(UInt8(GL_FALSE)), GLsizei(sizeof(Vertex)), pointer)
textureUniform = GLuint(glGetUniformLocation(programHandle, "Texture"))
}
func setupVBOs() {
glGenVertexArraysOES(1, &VAO);
glBindVertexArrayOES(VAO);
glGenBuffers(1, &vertexBuffer)
glBindBuffer(GLenum(GL_ARRAY_BUFFER), vertexBuffer)
glBufferData(GLenum(GL_ARRAY_BUFFER), Vertices.size(), Vertices, GLenum(GL_STATIC_DRAW))
glEnableVertexAttribArray(positionSlot)
glVertexAttribPointer(positionSlot, 3, GLenum(GL_FLOAT), GLboolean(UInt8(GL_FALSE)), GLsizei(sizeof(Vertex)), nil)
glGenBuffers(1, &indexBuffer)
glBindBuffer(GLenum(GL_ELEMENT_ARRAY_BUFFER), indexBuffer)
glBufferData(GLenum(GL_ELEMENT_ARRAY_BUFFER), Indices.size(), Indices, GLenum(GL_STATIC_DRAW))
glBindBuffer(GLenum(GL_ARRAY_BUFFER), 0)
glBindVertexArrayOES(0)
}
func render() {
glBindVertexArrayOES(VAO);
glActiveTexture(GLenum(GL_TEXTURE0))
glBindTexture(GLenum(GL_TEXTURE_2D), floorTexture)
glUniform1i(GLint(textureUniform), GLint(0))
glDrawElements(GLenum(GL_TRIANGLES), GLsizei(Indices.count), GLenum(GL_UNSIGNED_BYTE), nil)
glContext!.presentRenderbuffer(Int(GL_RENDERBUFFER))
glBindVertexArrayOES(0)
}
The foundation I learned in the great Ray Wenderlich Tutorial. But I could not make it to work in swift.
Basically what I want to do is generate my vertex coordinates programmatically instead of storing it in a statically predefined array. Unfortunately I am not able to convert a very simple example to a dynamic array.
Everything works fine if I stick to static arrays:
typedef struct {
GLfloat Position[3];
GLfloat Color[4];
GLfloat TexCoord[2];
float Normal[3];
} Vertex;
Vertex sphereVertices[] = {
{{1, -1, 1}, {1, 0, 0, 1}, {1, 0}, {0, 0, 1}},
{{1, 1, 1}, {0, 1, 0, 1}, {1, 1}, {0, 0, 1}},
{{-1, 1, 1}, {0, 0, 1, 1}, {0, 1}, {0, 0, 1}},
{{-1, -1, 1}, {0, 0, 0, 1}, {0, 0}, {0, 0, 1}}
};
GLubyte sphereIndices [] = {
0, 1, 2,
2, 3, 0
};
...
glGenBuffers(1, &sphereIndexBuffer);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, sphereIndexBuffer);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(sphereIndices), sphereIndices, GL_STATIC_DRAW);
glEnableVertexAttribArray(GLKVertexAttribPosition);
glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(Vertex), (const GLvoid *) offsetof(Vertex, Position));
...
glDrawElements(GL_TRIANGLES, 6 * sizeof(GLubyte), GL_UNSIGNED_BYTE, 0);
As soon as I switch my indices to a dynamic array only the first triangle shows up.
GLubyte *sphereIndices;
+(void)initialize {
sphereIndices = malloc(6 * sizeof(GLubyte));
sphereIndices[0] = 0;
sphereIndices[1] = 1;
sphereIndices[2] = 2;
sphereIndices[3] = 2;
sphereIndices[4] = 3;
sphereIndices[5] = 0;
}
Probably this has something to do with pointers. Does anybody know what I am doing wrong?
Thanks!
I was able to solve the problem myself. As I already expected the problem had to do with my missing understanding of pointers.
As far as I found out, there is no way to get the size of a dynamic array. Because of that sizeof(sphereIndices) always returns 4 which is the size of the pointer not the size of the data. That's why glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(sphereIndices), sphereIndices, GL_STATIC_DRAW) only sends 4 indices to openGL instead of 6.
I fixed the problem by introducing an additional variable to keep track of the number of indices.
I am learning opengl es 2.0.
I am trying to apply ortho projection in opengl es 2.0
I draw a sqaure but I actually don't get square shape on the screen.
And I am not sure which part I am missing.
Thank you for your help!
There are some methods in setupRenderingEnv that I did not post. but those methods are for setting up the frames and it works fine.
and m_program is created fine.
Again, thank you for your help.
// my vertex shader
attribute vec4 Position;
attribute vec4 SourceColor;
uniform mat4 Projection;
varying vec4 DestinationColor;
void main(void)
{
DestinationColor = SourceColor;
gl_Position = Projection * Position;
}
// my drawing file
typedef struct
{
float Position[3];
float Color[4];
}Vertex;
const Vertex Vertices[] =
{
{{100, -100, 0}, {1, 0, 0, 1}},
{{100, 100, 0}, {0, 1, 0, 1}},
{{-100, 100, 0}, {0, 0, 1, 1}},
{{-100, -100, 0}, {0, 0, 0, 1}}
};
const GLubyte Indices[] =
{
0, 1, 2,
2, 3, 0
};
- (void)setupRenderingEnv
{
[super setupRenderingEnv];
[self setupVertexBufferObjects];
[self setupRunLoop];
[self applyOrthoWithX:self.frame.size.width andY:self.frame.size.height];
glViewport(0, 0, self.frame.size.width, self.frame.size.height);
}
//-- used for applying ortho in opengl es 2.0
- (void)applyOrthoWithX:(float)maxX andY:(float)maxY
{
float a = 1.0f / maxX;
float b = 1.0f / maxY;
float ortho[16] =
{
a, 0, 0, 0,
0, b, 0, 0,
0, 0, -1, 0,
0, 0, 0, 1
};
GLint projectionUniform = glGetUniformLocation(super.m_programHandle, "Projection");
glUniformMatrix4fv(projectionUniform, 1, 0, &ortho[0]);
}
//-- overriding drawCandle. it render image, draw candle
- (void)drawCandle
{
glClearColor(0, 104.0/255, 55.0/255, 1.0);
glClear(GL_COLOR_BUFFER_BIT);
GLuint positionSlot = glGetAttribLocation(super.m_programHandle, "Position");
GLuint colorSlot = glGetAttribLocation(super.m_programHandle, "SourceColor");
glEnableVertexAttribArray(positionSlot);
glEnableVertexAttribArray(colorSlot);
glVertexAttribPointer(positionSlot, 3, GL_FLOAT, GL_FALSE,
sizeof(Vertex), 0);
glVertexAttribPointer(colorSlot, 4, GL_FLOAT, GL_FALSE,
sizeof(Vertex), (GLvoid *)(sizeof(float) * 3));
glDrawElements(GL_TRIANGLES, sizeof(Indices)/sizeof(Indices[0]), GL_UNSIGNED_BYTE, 0);
glDisableVertexAttribArray(positionSlot);
glDisableVertexAttribArray(colorSlot);
[super drawCandle];
}
What shape is your viewport? If it's not square then that's the problem. The matrix you're creating - scaling by inverse width and inverse height - is going to make the width always be 1 unit wide and the height 1 unit tall. If the width and height aren't the same number of pixels, then squares won't draw square. You need to account for the aspect ratio of your viewport. Off the top of my head, I think it would be something more like this:
float ortho [ 16 ] = {
a / b, 0, 0, 0,
0, b, 0, 0,
0, 0, -1, 0,
0, 0, 0, 1
};
(I might have a/b inverted - can't remember)
Im trying to add two objects, which is created from one part, but since i need to color each part i have seperated them. I have tried to render one part which works, but i have afterwards tried to render both which renders nothing.
glGenVertexArraysOES(1, &_boxVAO);
glBindVertexArrayOES(_boxVAO);
int sizeOfFaces = myMesh_m.faces.size() * sizeof(ObjMeshFace);
glGenBuffers(1, &_boxBuffer);
glBindBuffer(GL_ARRAY_BUFFER, _boxBuffer);
glBufferData(GL_ARRAY_BUFFER, sizeOfFaces, &(myMesh_m.faces[0]), GL_STATIC_DRAW);
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, sizeof(ObjMeshVertex), 0);
glVertexAttribPointer(2, 3, GL_FLOAT, GL_FALSE, sizeof(ObjMeshVertex), (void*)(sizeof(Vector3f) + sizeof(Vector2f)));
glEnableVertexAttribArray(0);
glEnableVertexAttribArray(2);
sizeOfFaces = myMesh_p.faces.size() * sizeof(ObjMeshFace);
glGenBuffers(1, &_boxBuffer_sec);
glBindBuffer(GL_ARRAY_BUFFER, _boxBuffer_sec);
glBufferData(GL_ARRAY_BUFFER, sizeOfFaces, &(myMesh_p.faces[0]), GL_STATIC_DRAW);
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, sizeof(ObjMeshVertex), 0);
glVertexAttribPointer(2, 3, GL_FLOAT, GL_FALSE, sizeof(ObjMeshVertex), (void*)(sizeof(Vector3f) + sizeof(Vector2f)));
glEnableVertexAttribArray(0);
glEnableVertexAttribArray(2);
glBindVertexArrayOES(0);
Draw:
glBindVertexArrayOES( _boxVAO);
glUniform2fv(uniforms[UNIFORM_NORMAL_MATRIX], 1, color);
glUniformMatrix4fv(uniforms[UNIFORM_MODELVIEWPROJECTION_MATRIX], 1, GL_FALSE, _modelViewProjectionMatrix.m);
glDrawArrays(GL_TRIANGLES, 0, pointerSize_m*3);
Shader.vsh
attribute vec4 position;
attribute vec3 normal;
varying lowp vec4 colorVarying;
uniform mat4 modelViewProjectionMatrix;
uniform mat3 normalMatrix;
void main()
{
vec3 eyeNormal = normalize(normalMatrix * normal);
vec3 lightPosition = vec3(1.0, 1.0, 1.0);
vec4 diffuseColor = vec4(1, 0.4, 1.0, 1.0);
float nDotVP = max(0.0, dot(eyeNormal, normalize(lightPosition)));
colorVarying = diffuseColor * nDotVP;
gl_Position = modelViewProjectionMatrix * position;
}
Shader.fsh
//varying lowp vec4 colorVarying;
uniform lowp vec4 color;
void main()
{
// gl_FragColor = colorVarying;
gl_FragColor = color;
}
Why does this fail? Furthermore how do i color each object?
This goes on the draw method. The color declaration should be outside the drawing method unless you have a variable that changes. (Like I have this inside the drawing loop because I would have "x" instead of 200)
GLfloat color[4];
color[0] = 200/255.0;
color[1] = 0.0/255.0;
color[2] = 0.0/255.0;
color[3] = 255.0/255.0;
GLfloat colorOther[4];
color[0] = 50/255.0;
color[1] = 0.0/255.0;
color[2] = 0.0/255.0;
color[3] = 255.0/255.0;
glUseProgram(_programBorder);
glBindVertexArrayOES(_vaoBorder);
glUniform2fv(uniforms[UNIFORM_COLOR_BORDER], 1, color);
glUniformMatrix4fv(uniforms[UNIFORM_MODELVIEWPROJECTION_MATRIX_BORDER], 1, GL_FALSE, _modelViewProjectionMatrix.m);
glDrawElements(GL_TRIANGLES, 24, GL_UNSIGNED_SHORT, 0);
//Modify the model projection matrix to change the position of the object
glUniform2fv(uniforms[UNIFORM_COLOR_BORDER], 1, colorOther);
glUniformMatrix4fv(uniforms[UNIFORM_MODELVIEWPROJECTION_MATRIX_BORDER], 1, GL_FALSE, _modelViewProjectionMatrix.m);
glDrawElements(GL_TRIANGLES, 24, GL_UNSIGNED_SHORT, 0);
The fragment shader has to have the uniform like this:
uniform lowp vec4 color;
void main()
{
gl_FragColor = color;
}
And dont forget to link this uniform properly on your program creation methods.
I know this is a little late to add to the mix, but I was just looking at the answer and it didn't work for me - I had a black square, however I changed
glUniform2fv(uniforms[UNIFORM_COLOR_BORDER], 1, color);
to
glUniform4fv(uniforms[UNIFORM_COLOR_BORDER], 1, color);
And it works now. Should this be 4, as there are 4 values in a colour or is my code messed up elsewhere that this works? :P