Flickering and upside down when running OpenGL ES on iOS

[Gauche]

Hi there,

I’m quite new to OpenGL ES and OpenGL in general, so I may be missing something obvious.

I have some C OpenGL ES code that is running on both Android and iOS. On Android everything looks perfect, but on iOS the same code exhibits two problems:

1. Everything is rendered upside down.
2. When rendering successive 2D textures, there is flickering that gets worse the more textures are rendered.

Here’s an example of me rendering “Hello!”:

Again, this looks perfect in Android.

I have simplified my code to the point where it just renders two textures in succession and it exhibits the same behavior. My render logic is based on this code (don’t have permission to link so please fill in the blanks - learnopengl(dot)com/code_viewer(dot)php?code=in-practice/text_rendering) and has these steps in it (I have removed error checking here to make things easier to read):

glActiveTexture(GL_TEXTURE0);

glGenVertexArrays(1, &VAO);
glGenBuffers(1, &VBO);
glBindVertexArray(VAO);
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(GLfloat) * 6 * 4, NULL, GL_DYNAMIC_DRAW);
glEnableVertexAttribArray(0);
glVertexAttribPointer(0, 4, GL_FLOAT, GL_FALSE, 4 * sizeof(GLfloat), 0);
glBindBuffer(GL_ARRAY_BUFFER, 0);
glBindVertexArray(0);

glEnable(GL_CULL_FACE);
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

glUseProgram(myProgramObject);

float projectionMatrix[16];
// hard-coded canvas size for now
matrixOrthographic(projectionMatrix, 0, 500, 0, 400);

GLint projectionLocation = glGetUniformLocation(myProgramObject, "projection"));
glUniformMatrix4fv(projectionLocation, 1, GL_FALSE, projectionMatrix);

GLint textColorLocation = glGetUniformLocation(myProgramObject, "textColor");
glUniform3f(textColorLocation, 0.9, 0.1, 0.4);
glBindVertexArray(VAO);

// Loop for each character
for (int i = 0; i < strlen(text); ++i) {
	Glyph* glyph = hashmap_get(glyphs, text[i]);
	GLfloat xpos = x + glyph->bearingX;
	GLfloat ypos = y - (glyph->sizeY - glyph->bearingY);

	GLfloat w = glyph->sizeX;
	GLfloat h = glyph->sizeY;
	GLfloat vertices[6][4] = {
		{ xpos,     ypos + h,   0.0, 0.0 },            
		{ xpos,     ypos,       0.0, 1.0 },
		{ xpos + w, ypos,       1.0, 1.0 },

		{ xpos,     ypos + h,   0.0, 0.0 },
		{ xpos + w, ypos,       1.0, 1.0 },
		{ xpos + w, ypos + h,   1.0, 0.0 }           
	};
	glBindTexture(GL_TEXTURE_2D, glyph->texture);
	glBindBuffer(GL_ARRAY_BUFFER, VBO);
	glBufferSubData(GL_ARRAY_BUFFER, 0, sizeof(vertices), vertices);
	glBindBuffer(GL_ARRAY_BUFFER, 0);
	glDrawArrays(GL_TRIANGLES, 0, 6);
	x += glyph->advance;
}

glBindVertexArray(0);
glBindTexture(GL_TEXTURE_2D, 0);
glDisable(GL_BLEND);

Can anyone spot anything I might be doing wrong to cause the flickering? And any thoughts what might be causing everything to be flipped vertically?