Zoom in/out in OpenGL ES

Question

I want to learn how to perform zooming in and zooming out. This is a simple example of a 2D triangle that rotates. Could you tell me how can I add zoom in and zoom out functionality to this simple example?

Should I use gl.glScalef? How?

public class GLrenderer implements Renderer {
    public GLqueue tri;
    private float angle = 0;

    public GLrenderer() {
        tri = new GLqueue();
    }

    @Override
    public void onSurfaceCreated(GL10 gl, EGLConfig eglConfig) {
        // TODO Auto-generated method stub
        gl.glDisable(GL10.GL_DITHER);
        gl.glHint(GL10.GL_PERSPECTIVE_CORRECTION_HINT, GL10.GL_FASTEST);
        gl.glClearColor(.0f, .0f, .0f, 0f);
        gl.glClearDepthf(1f);
    }

    @Override
    public void onDrawFrame(GL10 gl) {
        // TODO Auto-generated method stub
        gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_COLOR_BUFFER_BIT);
        gl.glMatrixMode(GL10.GL_MODELVIEW);
        gl.glLoadIdentity();
        gl.glTranslatef(0, 0, -10);
        gl.glPushMatrix();
        gl.glRotatef(angle, 0, 0, 1);
        tri.draw(gl);
        gl.glPopMatrix();
        angle++;
    }

    @Override
    public void onSurfaceChanged(GL10 gl, int width, int height) {
        // TODO Auto-generated method stub
        gl.glViewport(0, 0, width, height);
        float ratio = (float) width / height;
        gl.glMatrixMode(GL10.GL_PROJECTION);
        gl.glLoadIdentity();
        gl.glFrustumf(-ratio, ratio, -1, 1, 1, 25);
    }
}

This is my activity class, and onTouch event is added to that. What should I add so that when I touch the screen the zoom works?

GLSurfaceView OurSurface;

@Override
protected void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
    OurSurface = new GLSurfaceView(this);
    OurSurface.setRenderer(new GLrenderer());
    setContentView(OurSurface);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
    int action = event.getAction();
    switch (action) {
        case (MotionEvent.ACTION_DOWN): // Touch screen pressed
            break;
        case (MotionEvent.ACTION_UP): // Touch screen touch ended
            break;
        case (MotionEvent.ACTION_MOVE): // Contact has moved across screen
            break;
        case (MotionEvent.ACTION_CANCEL): // Touch event cancelled
            break;
    }
    return super.onTouchEvent(event);
}

@Override
protected void onPause() {
    // TODO Auto-generated method stub
    super.onPause();
    OurSurface.onPause();
}

@Override
protected void onResume() {
    // TODO Auto-generated method stub
    super.onResume();
    OurSurface.onResume();
}

@Override
public boolean onTouch(View v, MotionEvent event) {
    // TODO Auto-generated method stub
    return false;
}

Answer 1

Technically the correct way to implement camera zoom is to modify the parameters to your perspective projection:

float zoom = 1.5;
// ....
gl.glFrustumf(-ratio/zoom, ratio/zoom, -1/zoom, 1/zoom, 1, 25);

or

gl.glFrustumf(-ratio, ratio, -1, 1, zoom, 25);

or

gl.glFrustumf(-ratio, ratio, -1, 1, zoom, 25*zoom);

depending on which works better for your application.

If you want the zoom to change mid-app then you would also have to move these lines:

float ratio = (float) width / height;
gl.glMatrixMode(GL10.GL_PROJECTION);
gl.glLoadIdentity();
gl.glFrustumf(-ratio, ratio, -1, 1, zoom, 25);

into your draw routine, so that they are called on every frame.