(OpenGL ES) Objects away from view centre are stretched

Question

So I have generated a sphere in OpenGL ES (specifically, OpenGL ES 2.0, in Java, for Android). When this sphere is placed at the same position as the centre used for my view matrix, it's fine, but when off centre the sphere is pretty badly warped (see below).

Why is this happening, and how do I stop it?

That's the same sphere. The one in the upper right is just translated in x and y (not z).

Some snippets of the code from my implementation of GLSurfaceView.renderer,

public void onSurfaceCreated(GL10 unused, EGLConfig config) {
    GLES20.glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
    GLES20.glEnable(GLES20.GL_CULL_FACE);
    GLES20.glEnable(GLES20.GL_DEPTH_TEST);

    // Both centred on (0,0,0), of radius 1.0.
    outerSphere = new Sphere();
    centreSphere = new Sphere();
}

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

    ratio = (float) width / height;

    final float left = -ratio;
    final float right = ratio;
    final float bottom = -1.0f;
    final float top = 1.0f;
    final float near = 1.0f;
    final float far = 100.0f;

    Matrix.frustumM(projMatrix, 0, left, right, bottom, top, near, far);
}

public void onDrawFrame(GL10 unused) {
    GLES20.glClear(GLES20.GL_DEPTH_BUFFER_BIT | GLES20.GL_COLOR_BUFFER_BIT);

    float eyeX = 0.0f;
    float eyeY = 0.0f;
    float eyeZ = 10.0f;

    final float lookX = 0.0f;
    final float lookY = 0.0f;
    final float lookZ = 0.0f;

    final float upX = 0.0f;
    final float upY = 1.0f;
    final float upZ = 0.0f;

    Matrix.setLookAtM(viewMatrix, 0, eyeX, eyeY, eyeZ, lookX, lookY, lookZ,
                      upX, upY, upZ);

    // Set identity matrix as input for translations.
    Matrix.setIdentityM(outerModelMatrix, 0);

    // Translate outer sphere by 5 in x and y.
    Matrix.translateM(outerModelMatrix, 0, 5.0f, 5.0f, 0.0f);

    // MVP matrix = Projection * View * Model.
    Matrix.multiplyMM(centreMVPMatrix, 0, viewMatrix, 0, centreModelMatrix, 0);
    Matrix.multiplyMM(centreMVPMatrix, 0, projectionMatrix, 0, centreMVPMatrix, 0);
    Matrix.multiplyMM(outerMVPMatrix, 0, viewMatrix, 0, outerModelMatrix, 0);
    Matrix.multiplyMM(outerMVPMatrix, 0, projectionMatrix, 0, outerMVPMatrix, 0);

    outerSphere.draw(outerMVPMatrix);
    centreSphere.draw(outerMVPMatrix);

}

And my shaders are simply,

private final static String vertexShaderCode =
    "uniform mat4 u_MVPMatrix;" +
    "attribute vec4 a_Position;" +
    "uniform vec4 u_Color;" +
    "void main() {" +
    "    gl_Position = u_MVPMatrix * a_Position;" +
    "}";
private final static String fragmentShaderCode = 
    "precision mediump float;" +
    "uniform vec4 u_Color;" +
    "void main() {" +
    "    gl_FragColor = u_Color;" +
    "}";

I've left out almost all code from the Sphere class, and other things that I don't think are necessary(?), but if they are needed I'll put them up.

Answer 1

Welcome to the world of perspective distortion!

A little more detail: your Field-Of-View is too narrow, you'll have to shape the frustum so that it's a bit larger.