vertex shader. fragment shader. Mistakes I made. links to other resource and so on...

satya - Fri Aug 03 2012 16:50:56 GMT-0400 (Eastern Daylight Time)

OpenGL Texturing the 6 faces of a cube

OpenGL Texturing the 6 faces of a cube

Search for: OpenGL Texturing the 6 faces of a cube

satya - Wed Aug 15 2012 13:39:50 GMT-0400 (Eastern Daylight Time)

Here are my previous notes on textures for GL 1.1

Here are my previous notes on textures for GL 1.1

satya - Wed Aug 15 2012 13:40:42 GMT-0400 (Eastern Daylight Time)

2 textures 1 shader

2 textures 1 shader

This might answer using multiple textures. I haven't fully read it though how useful

satya - Wed Aug 15 2012 13:44:01 GMT-0400 (Eastern Daylight Time)

another nice example to read from learnopengles.com

another nice example to read from learnopengles.com

satya - Wed Aug 15 2012 17:36:50 GMT-0400 (Eastern Daylight Time)

It took me a couple of days to texture a cube with a bitmap

It was pulling teeth. But I have a much better understanding now. Hopefully I will document here some of the pain points.

satya - Wed Aug 15 2012 17:40:34 GMT-0400 (Eastern Daylight Time)

Start with the vertex shader


uniform mat4 uMVPMatrix;
attribute vec4 aPosition;
attribute vec2 aTextureCoordinate;

//out vec2 aTextureCoordinate: This doesn't work
//use varying instead
varying vec2 v_TextureCoordinate;

void main() 
{
   gl_Position = uMVPMatrix * aPosition;
   v_TextureCoordinate = aTextureCoordinate;
}

I have tried to use the "out" modifier on the texture coordinates that travel to the fragment shader. Compiler failed. Instead "varying" seem to work. It may be a question of GLSL version!!! When I know I will let you know.

satya - Wed Aug 15 2012 17:48:55 GMT-0400 (Eastern Daylight Time)

You can use the following link to discover errors

You can use the following link to discover errors

satya - Wed Aug 15 2012 17:52:13 GMT-0400 (Eastern Daylight Time)

fragment shader


precision mediump float; //Appears Mandatory for this version of GLSL 
varying vec2 v_TextureCoordinate;
uniform sampler2D s_2DtextureSampler;
void main() 
{
   gl_FragColor = texture2D(s_2DtextureSampler, v_TextureCoordinate);
}

The innocuous-unnecessary-looking precision line at the top is required for this fragment shader to compile.

Also pay attention to the name "sampler2D". I have misspelled it a few times.

Some books seem to use the function "texture" as opposed to "texture2D". Again it may just be a version dependent!!

satya - Wed Aug 15 2012 17:56:49 GMT-0400 (Eastern Daylight Time)

How does this work?


texture attribute of a vertex is passed to the aTextureAttribute
this is similar to the aVertexAttribute where position is passed
vertex shader simply passes it down through a varying variable
Same variable name is used in fragment shader
a special function called texture2D is used to sample the 
  texture pixel at the fragment.
sampler2D is a special structure in GLSL
sampler2D is initialized in the client to the texture unit

satya - Wed Aug 15 2012 17:59:57 GMT-0400 (Eastern Daylight Time)

How do I texture 6 faces of a cube with a single 2D texture?

Well, you load the single 2D texture first as a bitmap. And the coordinates will be between (0,0) to (1,1).

Each face of the cube will have 6 vertex coordinates making up 2 triangles. For each of the 6 vertices indicate how each of the vertex is mapped to one of 4 coordinates on the 2D texture above.

Just repeat this for each face.

satya - Wed Aug 15 2012 18:00:31 GMT-0400 (Eastern Daylight Time)

Here is a long example


//front-face: f1,f2,f3,f4
//starting top-right-anti-clockwise    
//f1(1,1) f2(-1,1) f3(-1,-1) f4(1,-1): z plane 0
    
//back-face: b1,b2,b3,b4
//starting bottom-right-anti-clockwise    
//b1(1,-1) b2(1,1) b3(-1,1) b4(-1,-1) : z plane 1
    private float z = 2.0f;
    private final float[] mTriangleVerticesData = {
          //1. front-triangles
          //f1,f2,f3
          1,1,0,        -1,1,0,             -1,-1,0,
          
          //f3,f4,f1
          -1,-1,0,       1,-1,0,          1,1,0,          
          
          //2. back-triangles
          //b1,b2,b3
          1,-1,z,          1,1,z,          -1,1,z,
          //b3,b4,b1
          -1,1,z,          -1,-1,z,          1,-1,z,
          
          //3. right-triangles
          //b2,f1,f4
          1,1,z,          1,1,0,          1,-1,0,
          //b2,f4,b1
          1,1,z,         1,-1,0,         1,-1,z,
          
          //4. left-triangles
          //b3, f2, b4
          -1,1,z,          -1,1,0,          -1,-1,z,
          //b4 f2 f3
          -1,-1,z,          -1,1,0,          -1,-1,0,
          
          //5. top-triangles
          //b2, b3, f2
          1,1,z,         -1,1,z,            -1,1,0,
          //b2, f2, f1
          1,1,z,         -1,1,0,         1,1,0,
          
          //6. bottom-triangles
          //b1, b4, f3
          1,-1,z,      -1,-1,z,   -1,-1,0,
          //b1, f3, f4
          1,-1,z,      -1,-1,0,   1,-1,0
/*
 */          
            };

    //f1(1,1) f2(0,1) f3(0,0) f4(1,0) 
    //b1(1,0) b2(1,1) b3(0,1) b4(0,0)
    private final float[] mTextureData = {
          //1. front-triangles
          //f1,f2,f3
          1,0,         0,0,            0,1,
          //f3,f4,f1
          0,1, 1,1,1,0,                      
          
          //2. back-triangles
          //b1,b2,b3
          1,0,   1,1,   0,1,
          //b3,b4,b1
          0,1,   0,0,   1,0,
          
          //3. right-triangles
          //b2,f1,f4
          1,1,   0,1,   0,0,
          //b2,f4,b1
          1,1,   0,0,   1,0,
          
          //4. left-triangles
          //b3, f2, b4
          0,1,    1,1,    0,0,
          //b4 f2 f3
          0,0,    1,1,    1,0,
          
          //5. top-triangles
          //b2, b3, f2
          1,1,    0,1,    0,0,
          //b2, f2, f1
          1,1,    0,0,    1,0,
          
          //6. bottom-triangles
          //b1, b4, f3
          1,1,   0,1,   0,0,
          //b1, f3, f4
          1,1,   0,0,   1,0
          /*          
*/          
            };

satya - Wed Aug 15 2012 18:02:26 GMT-0400 (Eastern Daylight Time)

Error 1280 wrong enumeration error

I keep getting this error when I ran my program for a while. The culprit could be anywhere because a client may have called glEnable() for any number of things!!

satya - Wed Aug 15 2012 18:03:53 GMT-0400 (Eastern Daylight Time)

The culprit in my case is: GLES20.GL_TEXTURE_2D


//GLES20.glEnable(GLES20.GL_TEXTURE_2D);

satya - Wed Aug 15 2012 18:05:32 GMT-0400 (Eastern Daylight Time)

Then I saw my cube just randomly painted...

The figure was skewed and it was getting distorted. Not a clue what was going on. Took me in a number of directions. In the process I found out two ways of loading bitmaps. Turned out to be unrelated however but I will document here anyways.

satya - Wed Aug 15 2012 18:06:13 GMT-0400 (Eastern Daylight Time)

Approach 1


final BitmapFactory.Options options = new BitmapFactory.Options();
        options.inScaled = false;   // No pre-scaling
         
        // Read in the resource
        final Bitmap bitmap = BitmapFactory.decodeResource(
              MyApplication.m_appContext.getResources(), this.mImageResourceId, options);

satya - Wed Aug 15 2012 18:06:28 GMT-0400 (Eastern Daylight Time)

Approach 2


InputStream is = MyApplication.m_appContext.getResources()
                .openRawResource(this.mImageResourceId);
        Bitmap bitmap;
        try {
            bitmap = BitmapFactory.decodeStream(is);
        } finally {
            try {
                is.close();
            } catch(IOException e) {
                // Ignore.
            }
        }

satya - Wed Aug 15 2012 18:07:44 GMT-0400 (Eastern Daylight Time)

pay attention to the location of the resource

Apparently if the resource is not under the "raw" directory Android may try to scale the resource in approach 2. keep that in mind.

satya - Wed Aug 15 2012 18:09:35 GMT-0400 (Eastern Daylight Time)

Then I have started questioning what should happen where in the call backs

Then I have started questioning what should happen where in the call backs

satya - Wed Aug 15 2012 18:10:48 GMT-0400 (Eastern Daylight Time)

onSurfaceCreated


Create, compile, link your shader programs
Bind variables from the shader programs
Load texture
Set your eye

satya - Wed Aug 15 2012 18:11:42 GMT-0400 (Eastern Daylight Time)

onSurfaceChanged


Setup view port
Get your frustum/proj matrix

satya - Wed Aug 15 2012 18:13:28 GMT-0400 (Eastern Daylight Time)

onDrawFrame


clear your colors
use gl program
activate texture
translate/rotate/etc transforms
apply eye transformations
apply projection
setup vertex attributes through buffers
transfer buffers to the server
draw

satya - Wed Aug 15 2012 18:13:56 GMT-0400 (Eastern Daylight Time)

Even after all this textures were totally screwed up: weird shapes!!

Even after all this textures were totally screwed up: weird shapes!!

satya - Wed Aug 15 2012 18:15:45 GMT-0400 (Eastern Daylight Time)

So i have changed texture coordinates intentionally to 15 from 1

No change!!! And there I was passing vertex buffers for texture buffers. So it didn't make a difference what i gave in the texture buffers.

I could but I can't blame OpenGL for all things!! Most things yes.

satya - Wed Aug 15 2012 18:16:52 GMT-0400 (Eastern Daylight Time)

I will post the entire source code soon ...here

I will post the entire source code soon ...here