applying texture to Cube, different texture on each face of cube

Question

I'm trying to apply different texture on cube with shaders using samplerCube and textureCube.

But I'm not able to get texture drawn on faces of cube only single color is appearing.

Screenshots of output

Below is my shader code:

Vertex Shader

String strVShader = "attribute vec4 a_position;" +
            "uniform mat4 u_VPMatrix;" +
            "attribute vec3 a_normal;" +
            "varying vec3 v_normal;" +
            "void main()" +
            "{" +
                "gl_Position = u_VPMatrix * a_position;" +
                "v_normal = a_normal;" +
            "}";

Fragment Shader

String strFShader = "precision mediump float;" +
            "uniform samplerCube u_texId;" +
            "varying vec3 v_normal;" +
            "void main()" +
            "{" +
                "gl_FragColor = textureCube(u_texId, v_normal);" +
            "}";

Cube Definition

float[] cube = {
        2,2,2, -2,2,2, -2,-2,2, 2,-2,2, //0-1-2-3 front
        2,2,2, 2,-2,2,  2,-2,-2, 2,2,-2,//0-3-4-5 right
        2,-2,-2, -2,-2,-2, -2,2,-2, 2,2,-2,//4-7-6-5 back
        -2,2,2, -2,2,-2, -2,-2,-2, -2,-2,2,//1-6-7-2 left
        2,2,2, 2,2,-2, -2,2,-2, -2,2,2, //top
        2,-2,2, -2,-2,2, -2,-2,-2, 2,-2,-2,//bottom
    };

short[] indeces = {0,1,2, 0,2,3,
            4,5,6, 4,6,7,
            8,9,10, 8,10,11,
            12,13,14, 12,14,15,
            16,17,18, 16,18,19,
            20,21,22, 20,22,23,
            };




float[] normals = {
                  0, 0, 1,   0, 0, 1,   0, 0, 1,   0, 0, 1,     //front
                   1, 0, 0,   1, 0, 0,   1, 0, 0,   1, 0, 0,     // right
                   0, 0,-1,   0, 0,-1,   0, 0,-1,   0, 0,-1,     //back
                   -1, 0, 0,  -1, 0, 0,  -1, 0, 0,  -1, 0, 0,     // left
                   0, 1, 0,   0, 1, 0,   0, 1, 0,   0, 1, 0,     //  top                  
                   0,-1, 0,   0,-1, 0,   0,-1, 0,   0,-1, 0,     // bottom

     }; 

OnDrawFrame

public void onDrawFrame(GL10 arg0) {
        GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GLES20.GL_DEPTH_BUFFER_BIT);
        GLES20.glUseProgram(iProgId);
        cubeBuffer.position(0);
        GLES20.glVertexAttribPointer(iPosition, 3, GLES20.GL_FLOAT, false, 0, cubeBuffer);
        GLES20.glEnableVertexAttribArray(iPosition);

        GLES20.glVertexAttribPointer(iNormal, 3, GLES20.GL_FLOAT, false, 0, normBuffer);
        GLES20.glEnableVertexAttribArray(iNormal);

        GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
        GLES20.glBindTexture(GLES20.GL_TEXTURE_CUBE_MAP, iTexId);
        GLES20.glUniform1i(iTexLoc, 0);

        Matrix.setIdentityM(m_fIdentity, 0);
        Matrix.rotateM(m_fIdentity, 0, -xAngle, 0, 1, 0);
        Matrix.rotateM(m_fIdentity, 0, -yAngle, 1, 0, 0);
        Matrix.multiplyMM(m_fVPMatrix, 0, m_fViewMatrix, 0, m_fIdentity, 0);
        Matrix.multiplyMM(m_fVPMatrix, 0, m_fProjMatrix, 0, m_fVPMatrix, 0);
        GLES20.glUniformMatrix4fv(iVPMatrix, 1, false, m_fVPMatrix, 0);

        GLES20.glDrawElements(GLES20.GL_TRIANGLES, 36, GLES20.GL_UNSIGNED_SHORT, indexBuffer);
    }

Creating Cube Map code

public int CreateCubeTexture()
    {
            ByteBuffer fcbuffer = null;

            int[] cubeTex = new int[1];

            GLES20.glGenTextures(1, cubeTex, 0);
            GLES20.glBindTexture(GLES20.GL_TEXTURE_CUBE_MAP,cubeTex[0]);
            GLES20.glTexParameteri(GLES20.GL_TEXTURE_CUBE_MAP, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_NEAREST);
            GLES20.glTexParameteri(GLES20.GL_TEXTURE_CUBE_MAP, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_NEAREST);
            GLES20.glTexParameteri(GLES20.GL_TEXTURE_CUBE_MAP, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE);
            GLES20.glTexParameteri(GLES20.GL_TEXTURE_CUBE_MAP, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_CLAMP_TO_EDGE);
            Bitmap img = null;
            img = BitmapFactory.decodeResource(curView.getResources(), R.raw.brick1);
            fcbuffer = ByteBuffer.allocateDirect(img.getHeight() * img.getWidth() * 4);

            img.copyPixelsToBuffer(fcbuffer);
            fcbuffer.position(0);
            Log.d("alpha",""+img.hasAlpha());
            GLES20.glTexImage2D(GLES20.GL_TEXTURE_CUBE_MAP_POSITIVE_X, 0, GLES20.GL_RGBA, img.getWidth(),img.getHeight() , 0,GLES20.GL_RGBA ,GLES20.GL_UNSIGNED_BYTE, fcbuffer);
            fcbuffer = null;
            img.recycle();

            img = BitmapFactory.decodeResource(curView.getResources(), R.raw.brick2);
            fcbuffer = ByteBuffer.allocateDirect(img.getHeight() * img.getWidth() * 4);
            img.copyPixelsToBuffer(fcbuffer);
            fcbuffer.position(0);
            GLES20.glTexImage2D(GLES20.GL_TEXTURE_CUBE_MAP_NEGATIVE_X, 0, GLES20.GL_RGBA, img.getWidth(),img.getHeight(), 0,GLES20.GL_RGBA ,GLES20.GL_UNSIGNED_BYTE, fcbuffer);
            fcbuffer = null;
            img.recycle();

            img = BitmapFactory.decodeResource(curView.getResources(), R.raw.brick3);
            fcbuffer = ByteBuffer.allocateDirect(img.getHeight() * img.getWidth() * 4);
            img.copyPixelsToBuffer(fcbuffer);
            fcbuffer.position(0);
            GLES20.glTexImage2D(GLES20.GL_TEXTURE_CUBE_MAP_POSITIVE_Y, 0, GLES20.GL_RGBA, img.getWidth(),img.getHeight(), 0,GLES20.GL_RGBA ,GLES20.GL_UNSIGNED_BYTE, fcbuffer);
            fcbuffer = null;
            img.recycle();


            img = BitmapFactory.decodeResource(curView.getResources(), R.raw.brick4);
            fcbuffer = ByteBuffer.allocateDirect(img.getHeight() * img.getWidth() * 4);
            img.copyPixelsToBuffer(fcbuffer);
            fcbuffer.position(0);
            GLES20.glTexImage2D(GLES20.GL_TEXTURE_CUBE_MAP_NEGATIVE_Y, 0, GLES20.GL_RGBA, img.getWidth(),img.getHeight(), 0,GLES20.GL_RGBA ,GLES20.GL_UNSIGNED_BYTE, fcbuffer);
            fcbuffer = null;
            img.recycle();

            img = BitmapFactory.decodeResource(curView.getResources(), R.raw.brick5);
            fcbuffer = ByteBuffer.allocateDirect(img.getHeight() * img.getWidth() * 4);
            img.copyPixelsToBuffer(fcbuffer);
            fcbuffer.position(0);
            GLES20.glTexImage2D(GLES20.GL_TEXTURE_CUBE_MAP_POSITIVE_Z, 0, GLES20.GL_RGBA,img.getWidth(),img.getHeight(), 0,GLES20.GL_RGBA ,GLES20.GL_UNSIGNED_BYTE, fcbuffer);
            fcbuffer = null;
            img.recycle();

            img = BitmapFactory.decodeResource(curView.getResources(), R.raw.brick6);
            fcbuffer = ByteBuffer.allocateDirect(img.getHeight() * img.getWidth() * 4);
            img.copyPixelsToBuffer(fcbuffer);
            fcbuffer.position(0);
            GLES20.glTexImage2D(GLES20.GL_TEXTURE_CUBE_MAP_NEGATIVE_Z, 0, GLES20.GL_RGBA, img.getWidth(),img.getHeight(), 0,GLES20.GL_RGBA ,GLES20.GL_UNSIGNED_BYTE, fcbuffer);
            fcbuffer = null;
            img.recycle();

            GLES20.glGenerateMipmap(GLES20.GL_TEXTURE_CUBE_MAP);

            return cubeTex[0];
    }

I'm not able to understand where I'm making mistake.

If you want see full code.

Solution:

Used same cube drawing co-ordinates for texture co-ordinates

Thanx all

CODE Link

Answer 1

although the question is now solved, i would like to offer an explanation for why using a different coordinates actually helped (because that is missing above).

When i first implemented cube-mapping, i had this same error, because of misconception of how cube maps worked. Cube-map is internally a set of 6 2D textures, arranged on a six faces of a cube. From a mathematical point of view, it defines a lookup function, where argument is 3D direction and output is RGBA color.

This is important, because in the example above, the argument to the lookup was normal. Normal is a direction, which is correct. But the normal is also constant across the entire face of the cube (except when smooth shading style normals are calculated, which was not the case). If the normal (input to the lookup) is constant, that means of course the output (color) must be constant as well. My misconception in this was that i assumed that OpenGL would somehow take into account both position and direction, but that is unfortunately not the case.

Interersting thing in this particular case is, one can either use cubeMap(position) or cubeMap(position + direction), and will get quite similar result. It is because of another important property of cube maps, and that is the input direction is first normalized (changed length to 1, without changing it's direction) before reading color out of the texture. This was used on older graphics cards to calculate fast vector normalization, using a special cube map texture (because calculating square root in shader was slower than texture lookup).

One last thought about cubes - cube-map is not the correct way of assigning different texture to each face of a cube. It works for a simple cases, but it would be hard to make it practical, e.g. in a game, because I) the number of combinations of different textures on one cube would probably require unnecessarily lot of textures and II) because this way, texture repeat can not be used.