loading two textures on a GLSurfaceView one as background, one as foreground with alpha

Question

I've set up a GLSurfaceView and want to do this :

• load a texture as a background(make it fullscreen without stretching the image)

• load another texture with alpha, make it foreground. so the background picture is visible, like applying a fog effect or rain effect. (also fullscreen without stretching the image)

• and any info on how to load a texture properly and set it on GLSurfaceView is appreciated.

and I have tried this code to load a texture on my GLSurfaceView but didn't work for me :

import javax.microedition.khronos.opengles.GL10;

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.drawable.Drawable;
import android.opengl.GLUtils;

public class TextureHelper {
/**
 * Helper method to load a GL texture from a bitmap
 *
 * Note that the caller should "recycle" the bitmap
 *
 * @return the ID of the texture returned from glGenTextures()
 */
public static int loadGLTextureFromBitmap( Bitmap bitmap, GL10 gl ) {

    // Generate one texture pointer
    int[] textureIds = new int[1];
    gl.glGenTextures( 1, textureIds, 0 );

    // bind this texture
    gl.glBindTexture( GL10.GL_TEXTURE_2D, textureIds[0] );

    // Create Nearest Filtered Texture
    gl.glTexParameterf( GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER, GL10.GL_LINEAR );
    gl.glTexParameterf( GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAG_FILTER, GL10.GL_LINEAR );

    gl.glTexParameterf( GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_S, GL10.GL_REPEAT );
    gl.glTexParameterf( GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_T, GL10.GL_REPEAT );

    // Use the Android GLUtils to specify a two-dimensional texture image from our bitmap
    GLUtils.texImage2D( GL10.GL_TEXTURE_2D, 0, bitmap, 0 );

    return textureIds[0];
}

/**
 * Create a texture from a given resource
 * 
 * @param resourceID the ID of the resource to be loaded
 * @param scaleToPO2 determines whether the image should be scaled up to the next highest power
 * of two, or whether it should be "inset" into such an image. Having textures that are
 * dimensions of some power-of-two is critical for performance in opengl.
 *
 * @return the ID of the texture returned from glGenTextures()
 */
public static int loadGLTextureFromResource( int resourceID, Context context, boolean scaleToPO2 , GL10 gl ) {

    // pull in the resource
    Bitmap bitmap = null;
    Resources resources = context.getResources();

    Drawable image = resources.getDrawable( resourceID );
    float density = resources.getDisplayMetrics().density;

    int originalWidth = (int)(image.getIntrinsicWidth() / density);
    int originalHeight = (int)(image.getIntrinsicHeight() / density);

    int powWidth = getNextHighestPO2( originalWidth );
    int powHeight = getNextHighestPO2( originalHeight );

    if ( scaleToPO2 ) {
        image.setBounds( 0, 0, powWidth, powHeight );
    } else {
        image.setBounds( 0, 0, originalWidth, originalHeight );
    }

    // Create an empty, mutable bitmap
    bitmap = Bitmap.createBitmap( powWidth, powHeight, Bitmap.Config.ARGB_4444 );
    // get a canvas to paint over the bitmap
    Canvas canvas = new Canvas( bitmap );
    bitmap.eraseColor(0);

    image.draw( canvas ); // draw the image onto our bitmap

    int textureId = loadGLTextureFromBitmap( bitmap , gl );

    bitmap.recycle();

    return textureId;
}

/**
 * Calculates the next highest power of two for a given integer.
 *
 * @param n the number
 * @return a power of two equal to or higher than n
 */
public static int getNextHighestPO2( int n ) {
    n -= 1;
    n = n | (n >> 1);
    n = n | (n >> 2);
    n = n | (n >> 4);
    n = n | (n >> 8);
    n = n | (n >> 16);
    n = n | (n >> 32);
    return n + 1;
}
}

this is the onCreate code in my activity :

    private GLSurfaceView mGLView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    GLES20Renderer.context = this;

    requestWindowFeature(Window.FEATURE_NO_TITLE);
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
            WindowManager.LayoutParams.FLAG_FULLSCREEN);

    if (hasGLES20()) {
        mGLView = new GLSurfaceView(this);
        mGLView.setEGLContextClientVersion(2);
        mGLView.setPreserveEGLContextOnPause(true);
        mGLView.setRenderer(new GLES20Renderer());
    } else {
        mGLView = new GLSurfaceView(this);
        mGLView.setEGLContextClientVersion(1);
        mGLView.setPreserveEGLContextOnPause(true);
        mGLView.setRenderer(new GLES20Renderer());
    Log.i("S"," does not support open gl 2");
        // you gotta get a phone that supports Open GL 2.0
    }

    setContentView(mGLView);
}

and this is the code for the GLSurfaceView.Renderer :

    @Override
    public void onDrawFrame(boolean firstDraw) {
        int textureid = TextureHelper.loadGLTextureFromResource(R.drawable.ic_launcher, context, true, gl);
    }

    public void onSurfaceChanged(GL10 gl, int width, int height) {
    gl.glViewport(0, 0, width, height);
}

public void onSurfaceCreated(GL10 gl, EGLConfig config) {
    gl.glClearColor(0.0f, 0.4f, 0.4f, 1.0f);
}

and I think I missed out some code in on draw part maybe :( and I have no idea how to load the other texture with alpha enabled...

Answer 1

Sorry if I am wrong, but I suppose that you are beginner in OpenGL. So, I am going to try help you in your learning.

First, I recommend you using OpenGLES 2.0 only, because it is supported by Android 2.2 (API level 8) and higher. Read Android reference and Tutorial . Today, All android version is greater than API level 8.

For drawing anything with OpenGl ES 2.0, you have to use GLES20.glDrawArrays(..) or GLES20.glDrawElements(..). Read OpenGl ES 2.0 Reference . I didn't see you are call one of theses methods.

Answer your question: There is a lot of ways to control alpha of one image. The easy way is create your own Fragment Shader to do it. Read this great tutorial to learn the basics step of creating shaders.