Android OpenGL-ES unable to pass value from touch event

Question

What's wrong with my coding? When I drag the texture using my finger, the texture keep on blinking and move between other place and the pointer place.

Any guidance will be appreciated~

This is the coding:

public class Stage extends GLSurfaceView{

// Stage width and height
private float w, h;

// Screen width and height
private int screenWidth, screenHeight;

// Our native vertex buffer
private FloatBuffer vertexBuffer;

private Texture tex;

MyRenderer mRenderer;

@Override
public boolean onTouchEvent(MotionEvent event) {
    final int action = event.getAction() & MotionEvent.ACTION_MASK;
    float x, y;
    int pointerIndex;
    int pointerId;

    if (action == MotionEvent.ACTION_DOWN) {
        pointerId = event.getPointerId(0);
        x = event.getX();
        y = event.getY();
        pointerIndex = 0;
    } else {
        pointerIndex = event.getActionIndex();
        pointerId = event.getPointerId(pointerIndex);
        x = event.getX(pointerIndex);
        y = event.getY(pointerIndex);
    }
    mRenderer.setXY(x, y);
    Log.v("X: ", String.valueOf(x));
    Log.v("Y: ", String.valueOf(y));
    return true;
}

public Stage(Context context, AttributeSet attrs) {
    super(context, attrs);
    setEGLConfigChooser(8, 8, 8, 8, 0, 0);
    mRenderer = new MyRenderer();
    setRenderer(mRenderer);
    setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);
    float vertices[] = {
            -0.5f, -0.5f,  0.0f,  // 0. left-bottom
            0.5f, -0.5f,  0.0f,  // 1. right-bottom
            -0.5f,  0.5f,  0.0f,  // 2. left-top
            0.5f,  0.5f,  0.0f   // 3. right-top
    };

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

    tex = new Texture(R.drawable.kdk);

}

private class MyRenderer implements GLSurfaceView.Renderer {

    private Object lock = new Object();
    float xPos;
    float yPos;
    public void setXY(float x, float y) {
        synchronized (lock) {
            xPos = x;
            yPos = y;
        }
    }

    public final void onDrawFrame(GL10 gl) {

        gl.glClear(GLES10.GL_COLOR_BUFFER_BIT);
        tex.prepare(gl, GL10.GL_CLAMP_TO_EDGE);
        gl.glVertexPointer(3, GL10.GL_FLOAT, 0, vertexBuffer);
        synchronized (lock) {
            tex.draw(gl, xPos, yPos, tex.getWidth(), tex.getHeight(), 0);
        }

    }

    public final void onSurfaceChanged(GL10 gl, int width, int height) {
        gl.glClearColor(0, 0, 0, 0);

        if(width > height) {
            h = 600;
            w = width * h / height;
        } else {
            w = 600;
            h = height * w / width;
        }
        screenWidth = width;
        screenHeight = height;

        xPos = w/2;
        yPos = h/2;

        gl.glViewport(0, 0, screenWidth, screenHeight);
        gl.glMatrixMode(GL10.GL_PROJECTION);
        gl.glLoadIdentity();
        gl.glOrthof(0, w, h, 0, -1, 1);
        gl.glMatrixMode(GL10.GL_MODELVIEW);
        gl.glLoadIdentity();
    }

    public final void onSurfaceCreated(GL10 gl, EGLConfig config) {
        // Set up alpha blending
        gl.glEnable(GL10.GL_ALPHA_TEST);
        gl.glEnable(GL10.GL_BLEND);
        gl.glBlendFunc(GL10.GL_ONE, GL10.GL_ONE_MINUS_SRC_ALPHA);

        // We are in 2D. Why needs depth?
        gl.glDisable(GL10.GL_DEPTH_TEST);

        // Enable vertex arrays (we'll use them to draw primitives).
        gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);

        // Enable texture coordination arrays.
        gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);

        tex.load(getContext());
    }

}

}

Other classes coding:

How to apply drag drop and scale in Android OpenGL ES

Answer 1

Just a guess, one possible cause is that, as the updating of xPos and yPos by the UI thread is not synchronized with the render thread, some of the frames would be drawn with xPos updated but not yPos and at a wrong position. This is corrected in the next rendering cycle, causing some flickering.

You may need to use some means of synchronization to ensure that when onDrawFrame() is called, the state (xPos and yPos) is consistent.

Edit: There are many ways to do so, e.g. by using a lock. In the renderer-

private Object lock = new Object();

public void setXY(float x, float y) {
    synchronized (lock) {
        xPos = x;
        yPos = y;
    }
}

public final void onDrawFrame(GL10 gl) {
    gl.glClear(GLES10.GL_COLOR_BUFFER_BIT);
    tex.prepare(gl, GL10.GL_CLAMP_TO_EDGE);
    gl.glVertexPointer(3, GL10.GL_FLOAT, 0, vertexBuffer);
    synchronized (lock) {
        tex.draw(gl, xPos, yPos, tex.getWidth(), tex.getHeight(), 0);
    }
}

(you also need to modify the call under onTouchEvent() to setXY(x, y);)

Further Edit:

As you have used setRenderMode(GLSurfaceView.RENDERMODE_CONTINUOUSLY); you need to call requestRender(); after updating the position on the onTouchEvent handler as mentioned by Reto Koradi above:

mRenderer.setXY(x, y);
requestRender();

In this case the synchronization code may not be necessary since the rendering is only triggered by requestRender() after both x and y are updated, and most probably would not take place in parallel.

Answer 2

I would do it by queueing events (from the Touch listener) to the GLThread by calling queueEvent() of GLSurfaceView Pass the x, y parameters in the runnable posted alongwith.

Runnable mRunnable = new Runnable() {
    @Override
    public void run() {
        mRenderer.setXY(x, y);
    }
}

Assign x and y to global variables,

And replace

mRenderer.setXY(x, y);

with

queueEvent(mRunnable);

And then call requestRender() in order to request redrawing.

On the GLRenderer's side, set the x, y params to the ones received from the runnable. And use the values in onDraw() method.

And remove the synchronisation blocks, since everything is now happening in GL thread itself.