如何正确地将纹理添加到我的openGL形状中？

Question

So, my problem is basically adding texture to my triangle or square through an image in my project. Although this seems like a basic question that I should be able to look up and execute, I am having a hard time processing all the necessary code needed to apply texture from the tutorials I have went through. I have copy and pasted code from a tutorial that did not compile because the creator of the tutorial left out code that was assumed to be already added. I worked out all the syntax errors to the best of my ability, making sure to properly add in the correct code that the tutorial left out. In the end, my app crashes from a logic error that I believe is in the texture code that I added. I could be missing a few lines of code, or I could have misused a few lines of code. Really, what I'm asking for is a bare minimal complete code(not snippets) that includes a simple addition of texture to a simple open gl shape(like a square), so that I may copy and paste this code into a new project and save it as a future reference. This would also help me identify my problem by comparing my code and the correct code.

But, I will post my code anyway in case it is easier for you to fix.

SurfaceView Code:

int mProgram;

 private final String vertexShaderCode =
            "attribute vec4 vPosition;" +"uniform mat4 uMVPMatrix;"+
            "attribute vec2 a_TexCoordinate;"+"varying vec2 v_TexCoordinate;"+
            "v_TexCoordinate = a_TexCoordinate;"+
            "void main() {" +
            "  gl_Position =uMVPMatrix*vPosition;" +
            "}";

        private final String fragmentShaderCode =
            "precision mediump float;" +
            "uniform vec4 vColor;" +"uniform sampler2D u_Texture;"+
            "varying vec2 v_TexCoordinate;"+"diffuse = diffuse + 0.3;"+
            "void main() {" +
            "gl_FragColor = (v_Color * diffuse * texture2D(u_Texture, v_TexCoordinate));" +
            "}";

class MyGLSurfaceView extends GLSurfaceView {

    private MyGLRenderer myRend;

    public MyGLSurfaceView(Context context){
        super(context);

        myRend=new MyGLRenderer();
        setEGLContextClientVersion(2);
        setRenderer(myRend);
        setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);
    }

    float mPreviousX;
    float mPreviousY;
    private final float TOUCH_SCALE_FACTOR = 180.0f / 320;
    @Override
    public boolean onTouchEvent(MotionEvent e) {
        // MotionEvent reports input details from the touch screen
        // and other input controls. In this case, you are only
        // interested in events where the touch position changed.

        float x = e.getX();
        float y = e.getY();

        switch (e.getAction()) {
            case MotionEvent.ACTION_MOVE:

                float dx = x - mPreviousX;
                float dy = y - mPreviousY;

                // reverse direction of rotation above the mid-line
                if (y > getHeight() / 2) {
                  dx = dx * 1 ;
                }

                // reverse direction of rotation to left of the mid-line
                if (x < getWidth() / 2) {
                  dy = dy * 1 ;
                }

                myRend.mAngle += (dx + dy) * TOUCH_SCALE_FACTOR;
                requestRender();
        }

        mPreviousX = x;
        mPreviousY = y;
        return true;
    } 
}

Renderer Code:

Triangle mTriangle;
cube mCube;
float [] mViewMatrix=new float[16];
float [] mMVPMatrix=new float[16];
float [] mProjectionMatrix=new float[16];
private float[] mRotationMatrix=new float[16];
int mTextureDataHandle;


public class MyGLRenderer implements GLSurfaceView.Renderer {

    public volatile float mAngle;
    Context context;

    public void onSurfaceCreated(GL10 gl, EGLConfig config) {
        GLES20.glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
        this.context=context;

        // Load the texture
        int mTextureDataHandle =loadTexture(context, R.drawable.ic_launcher);


        mTriangle = new Triangle();

        mCube=new cube();

    }

    public void onDrawFrame(GL10 gl) {
        GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);

        int mTextureUniformHandle = GLES20.glGetUniformLocation(mProgram, "u_Texture");
        int mTextureCoordinateHandle = GLES20.glGetAttribLocation(mProgram, "a_TexCoordinate");

        // Set the active texture unit to texture unit 0.
        GLES20.glActiveTexture(GLES20.GL_TEXTURE0);

        // Bind the texture to this unit.
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mTextureDataHandle);

        // Tell the texture uniform sampler to use this texture in the shader by binding to texture unit 0.
        GLES20.glUniform1i(mTextureUniformHandle, 0);

        float[] scratch = new float[16];
        //long time = SystemClock.uptimeMillis() % 4000L;
        //float mAngle = 0.090f * ((int) time);

        Matrix.setRotateM(mRotationMatrix, 0, mAngle, 0, 0, -1.0f);

        Matrix.setLookAtM(mViewMatrix, 0, 5, 0, -5, -1f, 0f, 0f, 0f, 1.0f, 0.0f);
        Matrix.multiplyMM(mMVPMatrix, 0, mProjectionMatrix, 0, mViewMatrix, 0);
        Matrix.multiplyMM(scratch, 0, mMVPMatrix, 0, mRotationMatrix, 0);
      //mCube.draw(scratch);


        Matrix.setLookAtM(mViewMatrix, 0, 0, 0, -3, 0f, 0f, 0f, 0f, 1.0f, 0.0f);
        Matrix.multiplyMM(mMVPMatrix, 0, mProjectionMatrix, 0, mViewMatrix, 0);
        mTriangle.draw(mMVPMatrix);

    }

    public void onSurfaceChanged(GL10 unused, int width, int height) {
        GLES20.glViewport(0, 0, width, height);

        float ratio = (float) width / height;
        Matrix.frustumM(mProjectionMatrix, 0, -ratio, ratio, -1, 1, 2, 10);
    }
}

public int loadTexture(final Context context, final int resourceId)
{
    final int[] textureHandle = new int[1];

    GLES20.glGenTextures(1, textureHandle, 0);

    if (textureHandle[0] != 0)
    {
        final BitmapFactory.Options options = new BitmapFactory.Options();
        options.inScaled = false;   // No pre-scaling

        // Read in the resource
        final Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), resourceId, options);

        // Bind to the texture in OpenGL
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureHandle[0]);

        // Set filtering
        GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_NEAREST);
        GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_NEAREST);

        // Load the bitmap into the bound texture.
        GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, bitmap, 0);

        // Recycle the bitmap, since its data has been loaded into OpenGL.
        bitmap.recycle();
    }

    if (textureHandle[0] == 0)
    {
        throw new RuntimeException("Error loading texture.");
    }

    return textureHandle[0];
}

Triangle Code:

public class Triangle {


    /** This will be used to pass in the texture. */
    private int mTextureUniformHandle;

    /** This will be used to pass in model texture coordinate information. */
    private int mTextureCoordinateHandle;

    /** Size of the texture coordinate data in elements. */
    private final int mTextureCoordinateDataSize = 2;

    /** This is a handle to our texture data. */
    private int mTextureDataHandle;

    private FloatBuffer vertexBuffer, colorBuff, textureBuff;
    static final int COORDS_PER_VERTEX = 3;
    float triangleCoords[] = {   // in counterclockwise order:
            0.0f,  0.622008459f, 0.0f, // top
            -0.5f, -0.311004243f, 0.0f, // bottom left
             0.5f, -0.311004243f, 0.0f  // bottom right
    };


    float color[] = { 0.63671875f, 0.76953125f, 0.22265625f, 1.0f};


    public Triangle() {

        final float[] triangleTextureCoordinateData ={
                0.0f,  -0.622008459f, 0.0f, // top
                -0.5f, 0.311004243f, 0.0f, // bottom left
                 0.5f, 0.311004243f, 0.0f  // bottom right
        };

        ByteBuffer bb = ByteBuffer.allocateDirect(
                triangleCoords.length * 4);
        bb.order(ByteOrder.nativeOrder());
        vertexBuffer = bb.asFloatBuffer();
        vertexBuffer.put(triangleCoords);
        vertexBuffer.position(0);

        ByteBuffer tb = ByteBuffer.allocateDirect(
                triangleTextureCoordinateData.length * 4);
        tb.order(ByteOrder.nativeOrder());
        textureBuff = tb.asFloatBuffer();
        textureBuff.put(triangleTextureCoordinateData);
        textureBuff.position(0);


        int vertexShader = loadShader(GLES20.GL_VERTEX_SHADER, vertexShaderCode);
        int fragmentShader = loadShader(GLES20.GL_FRAGMENT_SHADER, fragmentShaderCode);

        mProgram = GLES20.glCreateProgram();             // create empty OpenGL ES Program
        GLES20.glAttachShader(mProgram, vertexShader);   // add the vertex shader to program
        GLES20.glAttachShader(mProgram, fragmentShader); // add the fragment shader to program
        GLES20.glLinkProgram(mProgram);                  // creates OpenGL ES program executables
    }


        public int loadShader(int type, String shaderCode){

            // create a vertex shader type (GLES20.GL_VERTEX_SHADER)
            // or a fragment shader type (GLES20.GL_FRAGMENT_SHADER)
            int shader = GLES20.glCreateShader(type);

            // add the source code to the shader and compile it
            GLES20.glShaderSource(shader, shaderCode);
            GLES20.glCompileShader(shader);

            return shader;
        }

        static final int vertexStride = COORDS_PER_VERTEX * 4;
        static final int vertexCount = 3;

        public void draw(float [] mvpMatrix) {
            GLES20.glUseProgram(mProgram);
            int mPositionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition");
            GLES20.glEnableVertexAttribArray(mPositionHandle);
            GLES20.glVertexAttribPointer(mPositionHandle, COORDS_PER_VERTEX,
                                         GLES20.GL_FLOAT, false,
                                         vertexStride, vertexBuffer);
            int mColorHandle = GLES20.glGetUniformLocation(mProgram, "vColor");
            GLES20.glUniform4fv(mColorHandle, 1, color, 0);
           int mTriangleTextureCoordinates=GLES20.glGetUniformLocation(mProgram, "v_TexCoordinate");
            GLES20.glVertexAttribPointer(mTextureCoordinateHandle, mTextureCoordinateDataSize, GLES20.GL_FLOAT, false, 
                                        0, mTriangleTextureCoordinates);
            int mMVPMatrixHandle = GLES20.glGetUniformLocation(mProgram, "uMVPMatrix");
            GLES20.glUniformMatrix4fv(mMVPMatrixHandle, 1, false, mvpMatrix, 0);
            GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vertexCount);
            GLES20.glDisableVertexAttribArray(mPositionHandle);
        }


}

PS: The LogCat points to this line of code from the loadTexture method saying NullPointerException:

  final Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), resourceId, options);

I believe it has to do with the context but I'm not sure.

Answer 1

Primarily, you should add error checking to your code if it does not work as expected. Use glGetError() to check for general errors, glGetShaderiv() and glGetProgramiv() to check for success/error and logs after you compile and link shader programs.

Skimming through your code, here are a few things that jump out:

Your vertex shader would not compile. Executable statements must be within functions, so v_TexCoordinate = a_TexCoordinate; should be within the main() function:

void main() {
    v_TexCoordinate = a_TexCoordinate;
    gl_Position = uMVPMatrix*vPosition;
}

The fragment shader has worse problems. Again, diffuse is assigned outside the main function. It is also undeclared, and the value is used within an expression before it was assigned a value.

In onSurfaceCreated() , when you assign this.context=context , I believe that both of these refer to the member variable, so that assignment does nothing, and context will still be null. If you need the context in the renderer, you will have to bass it from the view into the renderer before starting it.

In onDrawFrame() , you should clear the depth buffer as well as the color buffer. GLSurfaceView chooses a configuration with a depth buffer unless you request otherwise:

GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GLES20.GL_DEPTH_BUFFER_BIT);

triangleTextureCoordinateData contains 3 components per vertex, while it should have only 2.

You're calling glGetUniformLocation() instead of glGetAttribLocation() for v_TexCoordinate . That should actually be a_TexCoordinate anyway, since that's your attribute variable, while v_TexCoordinate is a varying variable.

I'm going to post this since I already finished typing. But in hindsight, this is really not a good question for SO. In the future, please ask questions about specific problems, and don't just post code with countless issues.