• ### Announcements

• #### Wondering what's new and changed at GameDev.net?06/20/17

Check out the latest Staff Blog update that talks about what's changed, what's new, and what's up with these "Pixels".
Followers 0

# OpenGL [ES 2.0] Texture rendering problem

## 3 posts in this topic

Hi everyone,

Recently I've been working on a page curl effect in Opengl ES 2.0 for embedded systems. I've been able to write the model and surface deformation algorithm properly, but I have problems with rendering it with a texture. I have attached three screenshots showing exactly the problem I get when rendering the curl at certain angles of the deformation cylinder (yes, the page is deformed around a cylinder). The problem is that if the angle of the cylinder is higher than PI / 2 the texture renders all perfectly, but if it's smaller I get some transparent stripes which you can see through and if you make the angle even smaller the whole bended surface seems to be transparent for the page behind.

I have checked if it's not a problem of the mathematical model (the surface crossing itself), but it's not. I have also disabled face culling and alpha blending in this case and I'm out of ideas what can be wrong. I would be very grateful if somebody gave me a hint where to start from.

The vertex shader I use is very simple:

uniform mat4 uPositionMatrix;
uniform mat4 uMV;

attribute vec4 aPosition;
attribute vec2 aTextureCoord;

varying vec4 vTextureCoord;

void main()
{
vTextureCoord = aTextureCoord;
gl_Position = uPositionMatrix * aPosition;
}


// Fragment shader program
precision highp float;

varying vec2 vTextureCoord;

uniform sampler2D sTexture;

void main (void)
{
gl_FragColor =  texture2D(sTexture, vTextureCoord);
}


I know I didn't give you a lot of details, but as I don't know where to start from I'll wait for any questions for more details.

[attachment=17955:Screen-20130920154606519612.jpg]

[attachment=17956:Screen-20130920154613617023.jpg]

[attachment=17957:Screen-20130920154618177095.jpg]

0

##### Share on other sites

Looks like z-fighting. The curling part of the page (on the cylinder, as you say) looks like it's actually partially intersecting the flat part of the page - make sure your depth buffer is properly setup.

2

##### Share on other sites

Looks like z-fighting. The curling part of the page (on the cylinder, as you say) looks like it's actually partially intersecting the flat part of the page - make sure your depth buffer is properly setup.

If I understand it properly z-fighting takes place whenever the z values of the vertices are very close, but in my case the weird thing is that they are very well separated. Please explain me this if I'm wrong.

As per the depth test I call:

glEnable(GL_DEPTH_TEST);
glDepthFunc(GL_LEQUAL);

The EGL initialization is as follows:

EGLint numConfigs = 1;
EGLint eglConfigList[] =
{ EGL_RED_SIZE, 8, EGL_GREEN_SIZE, 8, EGL_BLUE_SIZE, 8, EGL_ALPHA_SIZE, 0, EGL_DEPTH_SIZE, 8, EGL_SURFACE_TYPE,
EGL_WINDOW_BIT, EGL_RENDERABLE_TYPE, EGL_OPENGL_ES2_BIT, EGL_NONE } ;

EGLint eglContextList[] =
{ EGL_CONTEXT_CLIENT_VERSION, 2, EGL_NONE } ;

eglBindAPI(EGL_OPENGL_ES_API);
m_Display = eglGetDisplay((EGLNativeDisplayType)EGL_DEFAULT_DISPLAY);
if (m_Display == EGL_NO_DISPLAY)
return -1;

if (eglInitialize(m_Display, null, null) != EGL_TRUE)
return -1;

if (eglChooseConfig(m_Display, eglConfigList, &m_eglConfig, 1, &numConfigs) != EGL_TRUE)
return -1;

if ((m_eglSurface = eglCreateWindowSurface(m_Display, m_eglConfig, (EGLNativeWindowType)m_pForm, null)) == EGL_NO_SURFACE)
return -1;

if ((m_eglContext = eglCreateContext(m_Display, m_eglConfig, EGL_NO_CONTEXT, eglContextList)) == EGL_NO_CONTEXT)
return -1;

if (eglMakeCurrent(m_Display, m_eglSurface, m_eglSurface, m_eglContext) != EGL_TRUE)
return -1;

return 0;


Shouldn't this be enough?

0

##### Share on other sites

For posterity, I found the problem. It was in the frustum setup. I have set the near plane to 0.001f and far to 10000.0f which caused some rounding errors probably. Changing the near plane to 10.0f eliminated the  problem.

Thanks!

0

## Create an account

Register a new account

Followers 0

• ## Game Jobs

• ### Similar Content

• By Jon Alma
Some time ago I implemented a particle system using billboarding techniques to ensure that the particles are always facing the viewer.  These billboards are always centered on one 3d coordinate.
I would like to build on this and use billboarding as the basis for things like laser bolts and gunshots.  Here the difference is that instead of a single point particle I now have to draw a billboard between two points - the start and end of the laser bolt for example.  I appreciate that having two end points places limits on how much the billboard can be rotated to face the viewer, but I'm looking to code a best effort solution.  For the moment I am struggling to work out how to do this or find any tutorials / code examples that explain how to draw a billboard between two points ... can anyone help?
Thanks.
• By Sagaceil
It's always better to fight with a bro.
• By recp
Hi,
I'm working on new asset importer (https://github.com/recp/assetkit) based on COLLADA specs, the question is not about COLLADA directly
also I'm working on a new renderer to render (https://github.com/recp/libgk) imported document.
In the future I'll spend more time on this renderer of course, currently rendering imported (implemented parts) is enough for me
assetkit imports COLLADA document (it will support glTF too),
importing scene, geometries, effects/materials, 2d textures and rendering them seems working
GLSL profile provides shaders for effects so I don't need to wory about them just compile, link, group them before render

The problem occours in COMMON profile because I need to write shaders,
Actually I wrote them for basic matrials and another version for 2d texture
I would like to create multiple program but I am not sure how to split this this shader into smaller ones,

Basic material version (only colors):
Texture version:
https://gist.github.com/recp/b0368c74c35d9d6912f524624bfbf5a3
I used subroutines to bind materials, actually I liked it,
In scene graph every node can have different program, and it switches between them if parentNode->program != node->program
(I'll do scene graph optimizations e.g.  view frustum culling, grouping shaders... later)

I'm going to implement transparency but I'm considering to create separate shaders,
because default shader is going to be branching hell
I can't generate shader for every node because I don't know how many node can be exist, there is no limit.
I don't know how to write a good uber-shader for different cases:

Here material struct:
struct Material { ColorOrTexture emission; ColorOrTexture ambient; ColorOrTexture specular; ColorOrTexture reflective; ColorOrTexture transparent; ColorOrTexture diffuse; float shininess; float reflectivEyety; float transparency; float indexOfRefraction; }; ColorOrTexture could be color or 2d texture, if there would be single colorOrTex then I could split into two programs,
Also I'm going to implement transparency, I am not sure how many program that I needed

I'm considering to maintain a few default shaders for COMMON profile,
1-no-texture, 2-one of colorOrTexture contains texture, 3-........

What do you think the shaders I wrote, I would like to write them without branching if posible,
I hope I don't need to write 50+ or 100+ shaders, and 100+ default programs

PS: These default shaders should render any document, they are not specific, they are general purpose...