OpenGL ES 2.0 Renderer Errors

Help with integrating libRocket into your engine and game

OpenGL ES 2.0 Renderer Errors

Postby halsafar on Thu Mar 08, 2012 5:14 am

I will post it when I am done. I could not find a Renderer written for OpenGL ES 2.0 that anyone was sharing. It is being tested on Android and IOS.

So far this is what we are getting:
http://i.imgur.com/DkxIZ.png

This is loading the demo assets from the Samples. It appears fonts are broken as no text appears. The window title is also broken.

Any advice? It is hard to debug this without diving deep into the libRocket source.
halsafar
 
Posts: 9
Joined: Thu Mar 08, 2012 3:20 am

Re: OpenGL ES 2.0 Renderer Errors

Postby halsafar on Fri Mar 09, 2012 3:25 am

Solved. The main problem was invalid blending states and not normalizing the colors as they went to the GPU:

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

glVertexAttribPointer(shader->getAttribHandle("a_color"), 4, GL_UNSIGNED_BYTE, GL_TRUE, sizeof(Rocket::Core::Vertex), &vertices[0].colour);


I will post the code and shaders used once I clean it up a bit.
halsafar
 
Posts: 9
Joined: Thu Mar 08, 2012 3:20 am

Re: OpenGL ES 2.0 Renderer Errors

Postby halsafar on Sat Mar 10, 2012 6:37 am

I will not post all the setup code required. It is beyond the scope. Just the shaders used and the RenderGeometry function. Nothing else in the ShellRenderInterfaceOpenGL needs to change. The following works on IOS and Android.

Vertex Shader:
Code: Select all
///
/// MENU VERTEX SHADER
///
attribute vec2 a_position;
attribute vec2 a_texCoord;
attribute vec4 a_color;
varying vec2 v_texCoord;
varying vec4 v_color;
uniform mat4 u_mvp;

void main()
{
   gl_Position = u_mvp * vec4(a_position, 0.0, 1.0);
   v_texCoord = a_texCoord;
   v_color = a_color;
}



Fragment Shader:
Code: Select all
///
/// MENU SHADER
///
precision mediump float;
varying vec2 v_texCoord;
varying vec4 v_color;
uniform sampler2D s_texture;
uniform float u_alpha;

void main()
{
   gl_FragColor = texture2D( s_texture, v_texCoord ) * v_color;
}



Render interface RenderGeometry function:
Code: Select all
// Called by Rocket when it wants to render geometry that it does not wish to optimise.
void RocketRenderInterfaceGLES2::RenderGeometry(Rocket::Core::Vertex* vertices, int ROCKET_UNUSED(num_vertices), int* indices, int num_indices, const Rocket::Core::TextureHandle texture, const Rocket::Core::Vector2f& translation)
{
   // set required blend states
   glEnable(GL_BLEND);
   glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

   // adjust viewport
   glViewport(0, 0, _width, _height);
   Shader *shader = ResourceManager::get<Shader>(_shaderKey);
   shader->bind();

   // translate geometry
   _world.setIdentity();
   _world.translate(Eigen::Vector3f(translation.x, translation.y, 0));

   // Set the sampler texture unit to 0
   glActiveTexture(GL_TEXTURE0);
   glUniform1i(shader->getUniformHandle("s_texture"), 0);

   // pass the mvp matrix to the shader
   glUniformMatrix4fv(shader->getUniformHandle("u_mvp"), 1, false, (_orthoMatrix * _world).data());

   // bind the attribute location for vertices and color
    glVertexAttribPointer(shader->getAttribHandle("a_position"), 2, GL_FLOAT, GL_FALSE, sizeof(Rocket::Core::Vertex), &vertices[0].position);
    glVertexAttribPointer(shader->getAttribHandle("a_color"), 4, GL_UNSIGNED_BYTE, GL_TRUE, sizeof(Rocket::Core::Vertex), &vertices[0].colour);
    glEnableVertexAttribArray(shader->getAttribHandle("a_position"));
    glEnableVertexAttribArray(shader->getAttribHandle("a_color"));

   if (!texture)
   {
      glDisable(GL_TEXTURE_2D);
      glDisableVertexAttribArray(shader->getAttribHandle("a_texCoord"));
   }
   else
   {
      // enable texture2d
      glEnable(GL_TEXTURE_2D);
      glBindTexture(GL_TEXTURE_2D, (GLuint) texture);

      // bind texture coordinates to attribute
       glVertexAttribPointer(shader->getAttribHandle("a_texCoord"), 2, GL_FLOAT, GL_FALSE, sizeof(Rocket::Core::Vertex), &vertices[0].tex_coord);
       glEnableVertexAttribArray(shader->getAttribHandle("a_texCoord"));
   }

   // convert indices to short, mobile platforms don't support 32 bit indices
   short newIndicies[num_indices];
   for (int i = 0; i < num_indices; i++)
   {
      newIndicies[i] = indices[i];
   }

   glDrawElements(GL_TRIANGLES, num_indices, GL_UNSIGNED_SHORT, newIndicies);

   // pulldown rendering states
   glDisable(GL_BLEND);
}



The following code will need some explanation as a few pieces are missing. The ResourceManager::get<Shader> is just a way to get a fully loaded OpenGL shader class. The bind() method simply does the gl binding of that shader. This is a big piece of code unrelated to the scope of this post. Simply put the above shader programs just need to be loaded into OpenGL and binded.
Code: Select all
   Shader *shader = ResourceManager::get<Shader>(_shaderKey);
   shader->bind();


This code is working with a matrix class (Eigen to be specific). It just translates the world matrix you would sent to the shader. The _orthoMatrix seen here is an orthogonal projection matrix. It should be calculated outside this code.
Code: Select all
   // translate geometry
   _world.setIdentity();
   _world.translate(Eigen::Vector3f(translation.x, translation.y, 0));

  glUniformMatrix4fv(shader->getUniformHandle("u_mvp"), 1, false, (_orthoMatrix * _world).data());
 



Hope this helps someone. Other than the two snippets I had to elaborate on this is pretty well cut and paste code.
halsafar
 
Posts: 9
Joined: Thu Mar 08, 2012 3:20 am

Re: OpenGL ES 2.0 Renderer Errors

Postby yaxinhoo on Sun Jan 20, 2013 5:52 am

can you create a github repository.
yaxinhoo
 
Posts: 47
Joined: Sat Sep 18, 2010 4:52 am

Re: OpenGL ES 2.0 Renderer Errors

Postby gabomdq on Mon Jan 21, 2013 11:43 am

This is my SDL2 / OpenGL ES2 renderer, it works ok on Android and it has some glitches on iOS, but it works... https://bitbucket.org/gabomdq/ignifuga/src/57d414073b2dfd160bb0fcc292f8f5f3cf537a18/src/backends/sdl/RocketGlueGLES2.cpp?at=default

It includes the shaders you need to make it work, and you can remove the SDL2 stuff if you don't need it.
gabomdq
 
Posts: 3
Joined: Wed Aug 29, 2012 12:07 pm

Re: OpenGL ES 2.0 Renderer Errors

Postby yaxinhoo on Mon Mar 11, 2013 4:35 am

thanks
yaxinhoo
 
Posts: 47
Joined: Sat Sep 18, 2010 4:52 am

Re: OpenGL ES 2.0 Renderer Errors

Postby zyzof on Thu Jul 10, 2014 8:34 pm

Just a note to anyone else using this post as a reference when setting up GLES with librocket:

If you're following halsafar's shader code, you'll also need to account for non-textured fragments, otherwise solid color sections such as areas of "background-color" will fail to show up. This can be done either by passing a uniform "useTexture" boolean through to the shader, then using

Code: Select all
if (u_useTexture) {
 gl_FragColor = texture2D( s_texture, v_texCoord ) * v_color;
} else {
 gl_FragColor = v_color;
}


or by compiling 2 separate shader programs like in gabomdq's bitbucket repo.

Hopefully this saves someone some time in the future.
zyzof
 
Posts: 1
Joined: Thu Jul 10, 2014 8:26 pm

Re: OpenGL ES 2.0 Renderer Errors

Postby AFineTapestry on Sat Jul 12, 2014 5:49 pm

Thanks for posting your solution. I'm sure people will find it helpful in the future.
AFineTapestry
Rocket Engineer
Rocket Engineer
 
Posts: 11
Joined: Fri Jun 13, 2014 8:55 am


Return to Engine Integration


cron