相机投影

Question

I'm building a toy 3d renderer and I have a not yet identified problem. I have a camera which points to a certain point in space. The camera has a frame and a given focal length. I want to project an arbitrary point on the camera's frame. The X and Y coordinates are treated separately, as usual. The image shows how I calculate the X. I use the cosine theorem for triangles: given the three triangle lengths I first find the angle, and then I get the X using the camera's focal length.

Image:

The same applies to the Y coordinate. To me it looks nice and clean, however the results are not as expected: I've set 8 points in space as a cube vertices, and I've set the camera to rotate around the origin. The cube deforms badly as the camera moves.

The critical method:

private void project(double[][] points3D, int[][] points2D) {

    double x;
    double y;
    double angle;
    double camToPoint2;
    double camToCenter2;
    double centerToPoint2;
    double[] camToCenter;
    double[] centerToPoint;

    for(int i = 0; i < points3D.length; i++) {

        // x's projection

        camToCenter = new double[] {center[0]-camera.position[0], center[2]-camera.position[2]};
        centerToPoint = new double[] {points3D[i][0]-center[0], points3D[i][2]-center[2]};

        camToCenter2 = camToCenter[0]*camToCenter[0] + camToCenter[1]*camToCenter[1];
        centerToPoint2 = centerToPoint[0]*centerToPoint[0] + centerToPoint[1]*centerToPoint[1];
        camToPoint2 = (points3D[i][0]-camera.position[0])*(points3D[i][0]-camera.position[0]) +
                        (points3D[i][2]-camera.position[2])*(points3D[i][2]-camera.position[2]);

        angle = Math.acos((camToCenter2 + camToPoint2 - centerToPoint2) /
                (2 * Math.sqrt(camToCenter2) * Math.sqrt(camToPoint2)));

        x = camera.focalLength * Math.tan(angle);
        // check if x lies to the left or right of the frame's center
        x = camToCenter[0]*centerToPoint[1] + camToCenter[1]*centerToPoint[0] < 0 ? -x : x;
        // reescale
        points2D[i][0] = (int) (screenW * (0.5 * camera.frame[0] + x) / camera.frame[0]);

        // y's projection

        camToCenter = new double[] {center[1]-camera.position[1], center[2]-camera.position[2]};
        centerToPoint = new double[] {points3D[i][1]-center[1], points3D[i][2]-center[2]};

        camToCenter2 = camToCenter[0]*camToCenter[0] + camToCenter[1]*camToCenter[1];
        centerToPoint2 = centerToPoint[0]*centerToPoint[0] + centerToPoint[1]*centerToPoint[1];
        camToPoint2 = (points3D[i][1]-camera.position[1])*(points3D[i][1]-camera.position[1]) +
                        (points3D[i][2]-camera.position[2])*(points3D[i][2]-camera.position[2]);

        angle = Math.acos((camToCenter2 + camToPoint2 - centerToPoint2) /
                (2 * Math.sqrt(camToCenter2) * Math.sqrt(camToPoint2)));

        y = camera.focalLength * Math.tan(angle);
        // check if y lies to the left or right of the frame's center
        y = camToCenter[0]*centerToPoint[1] + camToCenter[1]*centerToPoint[0] < 0 ? -y : y;
        // reescale
        points2D[i][1] = (int) (screenH * (0.5 * camera.frame[1] + y) / camera.frame[1]);
    }
}

The code is an exact translation of the explained above. The only additional operation is commented: a dot product is used to check whether the point to be projected lies on the left or the right side of the camera's frame center. This is discussed here Determining if one 2D vector is to the right or left of another . Any clues on where the mistake may be? Here I paste what is needed to test the code.

Main.java

import javax.swing.JFrame;

public class Main {

    public static void main(String[] args) {

        Universe universe = new Universe();

        JFrame frame = new JFrame("3D Projection");

        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.getContentPane().add(universe);
        frame.pack();
        frame.setLocationRelativeTo(null);
        frame.setResizable(false);
        frame.setVisible(true);

        universe.loop();
    }
}

Camera.java

public class Camera {

    // both measures in meters
    public final double focalLength = 50e-3;
    public final double[] frame = {36e-3, 24e-3};

    public double[] position;

    public Camera(double x, double y, double z) {

        position = new double[] {x, y, z};
    }
}

Universe.java

import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;

import javax.swing.JPanel;

public class Universe extends JPanel {

private int screenW;
private int screenH;
private int[][] points2D;

private double[] center;
private double[][] points3D;

private Camera camera;  

public Universe() {

    screenW = 864;
    screenH = 576;

    setPreferredSize(new Dimension(screenW, screenH));

    points2D = new int[8][2];

    center = new double[] {0, 0, 0};

    camera = new Camera(0, 0, 10);

    points3D = new double[][] {{1, 1, 1},
                                {1, 1, -1},
                                {1, -1, 1},
                                {1, -1, -1},
                                {-1, 1, 1},
                                {-1, 1, -1},
                                {-1, -1, 1},
                                {-1, -1, -1}};
}

public void paint(Graphics g) {

    g.setColor(new Color(0, 0, 0));
    g.fillRect(0, 0, screenW, screenH);

    g.setColor(new Color(255, 255, 255));
    g.drawLine(points2D[0][0], points2D[0][1], points2D[1][0], points2D[1][1]);
    g.drawLine(points2D[2][0], points2D[2][1], points2D[3][0], points2D[3][1]);
    g.drawLine(points2D[4][0], points2D[4][1], points2D[5][0], points2D[5][1]);
    g.drawLine(points2D[6][0], points2D[6][1], points2D[7][0], points2D[7][1]);
    g.drawLine(points2D[1][0], points2D[1][1], points2D[5][0], points2D[5][1]);
    g.drawLine(points2D[0][0], points2D[0][1], points2D[4][0], points2D[4][1]);
    g.drawLine(points2D[3][0], points2D[3][1], points2D[7][0], points2D[7][1]);
    g.drawLine(points2D[2][0], points2D[2][1], points2D[6][0], points2D[6][1]);
    g.drawLine(points2D[0][0], points2D[0][1], points2D[2][0], points2D[2][1]);
    g.drawLine(points2D[1][0], points2D[1][1], points2D[3][0], points2D[3][1]);
    g.drawLine(points2D[5][0], points2D[5][1], points2D[7][0], points2D[7][1]);
    g.drawLine(points2D[4][0], points2D[4][1], points2D[6][0], points2D[6][1]);
}

public void loop() {

    double t = 0;
    double dt = 0.02;

    while(true) {

        try {
            Thread.sleep(50);
        } catch(InterruptedException ex) {
            Thread.currentThread().interrupt();
        }

        camera.position[0] = 10 * Math.sin(t % (2 * Math.PI));
        camera.position[2] = 10 * Math.cos(t % (2 * Math.PI));

        project(points3D, points2D);

        repaint();
        t += dt;
    }
}

private void project(double[][] points3D, int[][] points2D) {

    double x;
    double y;
    double angle;
    double camToPoint2;
    double camToCenter2;
    double centerToPoint2;
    double[] camToCenter;
    double[] centerToPoint;

    for(int i = 0; i < points3D.length; i++) {

        // x's projection

        camToCenter = new double[] {center[0]-camera.position[0], center[2]-camera.position[2]};
        centerToPoint = new double[] {points3D[i][0]-center[0], points3D[i][2]-center[2]};

        camToCenter2 = camToCenter[0]*camToCenter[0] + camToCenter[1]*camToCenter[1];
        centerToPoint2 = centerToPoint[0]*centerToPoint[0] + centerToPoint[1]*centerToPoint[1];
        camToPoint2 = (points3D[i][0]-camera.position[0])*(points3D[i][0]-camera.position[0]) +
                        (points3D[i][2]-camera.position[2])*(points3D[i][2]-camera.position[2]);

        angle = Math.acos((camToCenter2 + camToPoint2 - centerToPoint2) /
                (2 * Math.sqrt(camToCenter2) * Math.sqrt(camToPoint2)));

        System.out.print(angle * (360/(2*Math.PI)) + " ");

        x = camera.focalLength * Math.tan(angle);
        x = camToCenter[0]*centerToPoint[1] + camToCenter[1]*centerToPoint[0] < 0 ? -x : x;

        points2D[i][0] = (int) (screenW * (0.5 * camera.frame[0] + x) / camera.frame[0]);

        // y's projection

        camToCenter = new double[] {center[1]-camera.position[1], center[2]-camera.position[2]};
        centerToPoint = new double[] {points3D[i][1]-center[1], points3D[i][2]-center[2]};

        camToCenter2 = camToCenter[0]*camToCenter[0] + camToCenter[1]*camToCenter[1];
        centerToPoint2 = centerToPoint[0]*centerToPoint[0] + centerToPoint[1]*centerToPoint[1];
        camToPoint2 = (points3D[i][1]-camera.position[1])*(points3D[i][1]-camera.position[1]) +
                        (points3D[i][2]-camera.position[2])*(points3D[i][2]-camera.position[2]);

        angle = Math.acos((camToCenter2 + camToPoint2 - centerToPoint2) /
                (2 * Math.sqrt(camToCenter2) * Math.sqrt(camToPoint2)));

        System.out.println(angle * (360/(2*Math.PI)));

        y = camera.focalLength * Math.tan(angle);
        y = camToCenter[0]*centerToPoint[1] + camToCenter[1]*centerToPoint[0] < 0 ? -y : y;

        points2D[i][1] = (int) (screenH * (0.5 * camera.frame[1] + y) / camera.frame[1]);
    }

    System.out.println();
}
}

Answer 1

I believe that your problem is that you've neglected to model camera pose. Picture a cube floating in a room somewhere. Got it? Now in your mind, draw a Cartesian coordinate system, rigidly attached to the cube, with the x- and z-axes in the horizontal plane, and the y-axis pointing toward the ceiling. Since the camera is the thing which is moving around in your example code, you may equally well choose to visualize the cube's coordinate system as being rigidly attached to the room if you would prefer.

Now, picture the camera moving around, looking at the cube from different angles. Imagine a separate Cartesian coordinate system rigidly attached to that as well. It has an x-axis that points out the right side of the camera, a y-axis that points out the top, and a z-axis that points out the back (ie, toward your face as you are looking through the viewfinder). As you walk around the cube holding the camera, it has to rotate about the y-axis in order to keep facing the cube. Assuming you hold the camera upright, the camera's y-axis will always remain parallel with the cube's y-axis, but the relationship between the two x- and z-axes will change over time.

This relationship, between the three axes of two Cartesian coordinate frames, may be thought of as the camera's "orientation" or "pose", and you are not currently modeling it. In order to model the pose, you need a 3X3 matrix. If you don't know much about the mathematics of coordinate frame rotations, I'd recommend that you study up here and here and here .

I've added the pose model as a 3X3 rotation matrix in your Camera class, and updated the Universe class to be able to take advantage of it. The Main class remains unchanged. The new Camera class is here:

public class Camera {

    // both measures in meters
    public final double focalLength = 50e-3;
    public final double[] frame = {36e-3, 24e-3};

    public double[] position;
    // The rotation vector gives the unit vector directions, in the coordinate
    // frame of the object, of each of the axes of the camera's coordinate
    // frames
    public double[][] rotation;

    public Camera(double[] pos, double[][] rot) {

        position = pos;
        rotation = rot;
    }
}

and the new Universe class is here:

import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;

import javax.swing.JPanel;

public class Universe extends JPanel {

private int screenW;
private int screenH;
private int[][] points2D;

private double[] center;
private double[][] points3D;

private Camera camera;  

public Universe() {

    screenW = 864;
    screenH = 576;

    setPreferredSize(new Dimension(screenW, screenH));

    points2D = new int[8][2];

    center = new double[] {0, 0, 0};

    // Initialize the camera object with "placeholder" values, just to
    // reserve space in memory for two suitably sized arrays
    double[] initpos = new double[] {0, 0, 10};
    double[][] initrot = new double[][] {{1, 0, 0}, {0, 1, 0}, {0, 0, 1}};
    camera = new Camera(initpos, initrot);

    points3D = new double[][] {{1, 1, 1},
                                {1, 1, -1},
                                {1, -1, 1},
                                {1, -1, -1},
                                {-1, 1, 1},
                                {-1, 1, -1},
                                {-1, -1, 1},
                                {-1, -1, -1}};
}

public void paint(Graphics g) {

    g.setColor(new Color(0, 0, 0));
    g.fillRect(0, 0, screenW, screenH);

    g.setColor(new Color(255, 255, 255));
    g.drawLine(points2D[0][0], points2D[0][1], points2D[1][0], points2D[1][1]);
    g.drawLine(points2D[2][0], points2D[2][1], points2D[3][0], points2D[3][1]);
    g.drawLine(points2D[4][0], points2D[4][1], points2D[5][0], points2D[5][1]);
    g.drawLine(points2D[6][0], points2D[6][1], points2D[7][0], points2D[7][1]);
    g.drawLine(points2D[1][0], points2D[1][1], points2D[5][0], points2D[5][1]);
    g.drawLine(points2D[0][0], points2D[0][1], points2D[4][0], points2D[4][1]);
    g.drawLine(points2D[3][0], points2D[3][1], points2D[7][0], points2D[7][1]);
    g.drawLine(points2D[2][0], points2D[2][1], points2D[6][0], points2D[6][1]);
    g.drawLine(points2D[0][0], points2D[0][1], points2D[2][0], points2D[2][1]);
    g.drawLine(points2D[1][0], points2D[1][1], points2D[3][0], points2D[3][1]);
    g.drawLine(points2D[5][0], points2D[5][1], points2D[7][0], points2D[7][1]);
    g.drawLine(points2D[4][0], points2D[4][1], points2D[6][0], points2D[6][1]);
}

public void loop() {

    double t = 0;
    double dt = 0.02;

    while(true) {

        try {
            Thread.sleep(50);
        } catch(InterruptedException ex) {
            Thread.currentThread().interrupt();
        }

        camera.position[0] =  10 * Math.sin(t % (2 * Math.PI));
        camera.position[1] =   0;
        camera.position[2] =  10 * Math.cos(t % (2 * Math.PI));

        // The x unit vector of the camera plane coordinate frame, expressed
        // in the cube's coordinate frame
        camera.rotation[0][0] = Math.cos(t % (2 * Math.PI));
        camera.rotation[0][1] = 0;
        camera.rotation[0][2] = -Math.sin(t % (2 * Math.PI));
        // The y unit vector of the camera plane coordinate frame, expressed
        // in the cube's coordinate frame
        camera.rotation[1][0] = 0; 
        camera.rotation[1][1] = 1;
        camera.rotation[1][2] = 0;
        // Ditto, z unit vector
        camera.rotation[2][0] = Math.sin(t % (2 * Math.PI));
        camera.rotation[2][1] = 0;
        camera.rotation[2][2] = Math.cos(t % (2 * Math.PI));

        project(points3D, points2D);

        repaint();
        t += dt;
    }
}

private void project(double[][] points3D, int[][] points2D) {;

    for(int i = 0; i < points3D.length; i++) {

        double[] camToPoint = new double[3];
        double[] rotPoint   = new double[3];

        // You may visualize this operation as "shifting" the vertices of the
        // cube to some new translational offset within an unrotated camera
        // coordinate frame.
        for(int j = 0; j < 3; j++) {
            camToPoint[j]  = points3D[i][j] - camera.position[j];
        }

        // Picture this operation as "rotating" the camera by the correct
        // amount so that it will always be facing the cube, no matter what
        // the current absolute position of the camera is within the cube's
        // coordinate frame.  If you don't do this, then the cube will pan
        // across your view and back around behind the camera much like the
        // sun rotating through the sky over the course of one complete day/
        // night cycle.
        rotPoint = new double[] {0, 0, 0};
        for(int j = 0; j< 3; j++) {
            for(int k = 0; k < 3; k++) {
                rotPoint[j] += camera.rotation[j][k] * camToPoint[k];
            }
        }

        // Project the cube onto the camera plane.
        points2D[i][0] = (int) (screenW * (0.5 * camera.frame[0] +
                            camera.focalLength * rotPoint[0] /
                            rotPoint[2]) / camera.frame[0]);
        points2D[i][1] = (int) (screenH * (0.5 * camera.frame[1] +
                            camera.focalLength * rotPoint[1] /
                            rotPoint[2]) / camera.frame[1]);
    }
}
}