title: Why does my perspective implementation fails in displaying my cube's faces?
body: <p>I wrote a program that takes in entry some points, expressed in 3D coordinates and that must be drawn in a 2D canvas. I use perspective projection, homogeneous coordinates and similar triangles to do that. However, my program does not work and I actually don't know why.</p>
  
  <p>I followed two tutorials. I really understood the geometrical definitions and properties I have read. However, my implementation fails... I will write references to these both courses little by little, to make your reading more confortable :).</p>
  
  <h1>Overview : geometrical reminders</h1>
  
  <p>The perspective projection is done following this workflow (cf. these 2 courses - I wrote pertinent links about the latter (HTML anchors) further down, in this post) :</p>
  
  <ol>
  <li><p>Definition of the points to draw, expressed according to the world's coordinates system ; Definition of the matrix of projection, which is a matrix of transformation that "converts" a point expressed according to the world coordinates system into a point expressed according to the camera's coordinates system (NB : I believe this matrix can be understood as being the 3D object "camera")</p></li>
  <li><p>Product of these points with this matrix (as defined in the adequat part, below, in this document) : the product of these world-expressed points results in the conversion of these points to the camera's coordinates system. Note that points and matrix are expressed in 4D (concept of homogenous coordinates).</p></li>
  <li><p>Use of similar triangles concept to project (only computing is done at this step) on the canvas the in-camera-expressed points (using their 4D coordinates). After this operation, the points are now expressed in 3D (the third coordinate is computed but not actually used on the canvas). The 4th coordinate is removed because not useful. Note that the 3rd coordinate won't be useful, except to handle z-fighting (though, I don't want to do that).</p></li>
  <li><p>Last step : rasterization, to actually draw the pixels on the canvas (other computing AND displaying are done at this step).</p></li>
  </ol>
  
  <h1>First, the problem</h1>
  
  <p>Well, I want to draw a cube but the perspective doesn't work. The projected points seem to be drawn withtout perspective.</p>
  
  <h2>What result I should expect for</h2>
  
  <p>The result I'm expecting is the cube displayed in "Image" part of this below PNG :</p>
  
  <p><a href="https://i.stack.imgur.com/X79Bx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X79Bx.png" alt="The result I&#39;m expecting is the cube displayed in &quot;Image&quot; part of this PNG"></a></p>
  
  <h2>What I'm outputting</h2>
  
  <p>The faces of my cube are odd, as if perspective wasn't well used.</p>
  
  <p><a href="https://i.stack.imgur.com/pHIyT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pHIyT.png" alt="The faces of my cube are odd, as if perspective wasn&#39;t well used."></a></p>
  
  <h2>I guess I know why I'm having this problem...</h2>
  
  <p><strong><em>I think my projection matrix (i.e. : the camera) doesn't have the good coefficients.</em></strong> I'm using a very simple projection matrix, without the concepts of fov, near and far clipping planes (as you can see belower). </p>
  
  <p>Indeed, to get the expected result (as previouslyt defined), the camera should be placed, if I'm not mistaken, at the <strong><em>center</em></strong> (on axes x and y) of the cube expressed according to the world coordinate system and at the <strong><em>center</em></strong> (on axes x and y) of <strong><em>the canvas, which is (I make this assumption) placed 1 z in front of the camera.</em></strong></p>
  
  <h1>The Scastie (snippet)</h1>
  
  <p>NB : since X11 is not activated on Scastie, the window I want to create won't be shown.</p>
  
  <p><a href="https://scastie.scala-lang.org/N95TE2nHTgSlqCxRHwYnxA" rel="nofollow noreferrer">https://scastie.scala-lang.org/N95TE2nHTgSlqCxRHwYnxA</a></p>
  
  <h1>Entries</h1>
  
  <p>Perhaps the problem is bound to the entries ? Well, I give you them.</p>
  
  <h2>Cube's points</h2>
  
  <p>Ref. : myself</p>
  
  <pre><code>val world_cube_points : Seq[Seq[Double]] = Seq(
    Seq(100, 300, -4, 1), // top left
    Seq(100, 300, -1, 1), // top left z+1
    Seq(100, 0, -4, 1), // bottom left
    Seq(100, 0, -1, 1), // bottom left z+1
    Seq(400, 300, -4, 1), // top right
    Seq(400, 300, -1, 1), // top right z+1
    Seq(400, 0, -4, 1), // bottom right
    Seq(400, 0, -1, 1) // bottom right z+1
  )
  </code></pre>
  
  <h2>Transformation (Projection) matrix</h2>
  
  <p>Ref. : <a href="https://www.scratchapixel.com/lessons/3d-basic-rendering/perspective-and-orthographic-projection-matrix/building-basic-perspective-projection-matrix" rel="nofollow noreferrer">https://www.scratchapixel.com/lessons/3d-basic-rendering/perspective-and-orthographic-projection-matrix/building-basic-perspective-projection-matrix</a> , End of the Part. "A Simple Perspective Matrix"</p>
  
  <p>Note that I'm using the simplest perspective projection matrix : I don't use concept of fov, near and far clipping planes.</p>
  
  <pre><code>new Matrix(Seq(
    Seq(1, 0, 0, 0),
    Seq(0, 1, 0, 0),
    Seq(0, 0, -1, 0),
    Seq(0, 0, -1, 0)
  ))
  </code></pre>
  
  <p>Consequence of this matrix : each point <code>P(x;y;z;w)</code> producted with this matrix will be : <code>P'(x;y;-z;-z)</code>.</p>
  
  <h1>Second, the first operation my program does : a simple product of a point with a matrix.</h1>
  
  <p>Ref. : <a href="https://github.com/ssloy/tinyrenderer/wiki/Lesson-4:-Perspective-projection#homogeneous-coordinates" rel="nofollow noreferrer">https://github.com/ssloy/tinyrenderer/wiki/Lesson-4:-Perspective-projection#homogeneous-coordinates</a></p>
  
  <pre><code>/**
    * Matrix in the shape of (use of homogeneous coordinates) :
    * c00 c01 c02 c03
    * c10 c11 c12 c13
    * c20 c21 c22 c23
    *   0   0   0   1
    *
    * @param content the content of the matrix
    */
  class Matrix(val content : Seq[Seq[Double]]) {
  
    /**
      * Computes the product between a point P(x ; y ; z) and the matrix.
      *
      * @param point a point P(x ; y ; z ; 1)
      * @return a new point P'(
      *         x * c00 + y * c10 + z * c20
      *         ;
      *         x * c01 + y * c11 + z * c21
      *         ;
      *         x * c02 + y * c12 + z * c22
      *         ;
      *         1
      *         )
      */
    def product(point : Seq[Double]) : Seq[Double] = {
      (0 to 3).map(
        i =&gt; content(i).zip(point).map(couple2 =&gt; couple2._1 * couple2._2).sum
      )
    }
  
  }
  </code></pre>
  
  <h1>Then, use of similar triangles</h1>
  
  <p>Ref. 1/2 : Part. "Of the Importance of Converting Points to Camera Space
  " of <a href="https://www.scratchapixel.com/lessons/3d-basic-rendering/computing-pixel-coordinates-of-3d-point/mathematics-computing-2d-coordinates-of-3d-points" rel="nofollow noreferrer">https://www.scratchapixel.com/lessons/3d-basic-rendering/computing-pixel-coordinates-of-3d-point/mathematics-computing-2d-coordinates-of-3d-points</a></p>
  
  <p>Ref. 2/2 : <a href="https://github.com/ssloy/tinyrenderer/wiki/Lesson-4:-Perspective-projection#time-to-work-in-full-3d" rel="nofollow noreferrer">https://github.com/ssloy/tinyrenderer/wiki/Lesson-4:-Perspective-projection#time-to-work-in-full-3d</a></p>
  
  <p>NB : at this step, the entries are points expressed according to the camera (i.e. : they are the result of the precedently defined product with the precedently defined matrix).</p>
  
  <pre><code>class Projector {
  
    /**
      * Computes the coordinates of the projection of the point P on the canvas.
      * The canvas is assumed to be 1 unit forward the camera.
      * The computation uses the definition of the similar triangles.
      *
      * @param points the point P we want to project on the canvas. Its coordinates must be expressed in the coordinates
      *          system of the camera before using this function.
      * @return the point P', projection of P.
      */
    def drawPointsOnCanvas(points : Seq[Seq[Double]]) : Seq[Seq[Double]] = {
      points.map(point =&gt; {
        point.map(coordinate =&gt; {
          coordinate / point(3)
        }).dropRight(1)
      })
  
    }
  
  }
  </code></pre>
  
  <h1>Finally, the drawing of the projected points, onto the canvas.</h1>
  
  <p>Ref. : Part. "From Screen Space to Raster Space" of <a href="https://www.scratchapixel.com/lessons/3d-basic-rendering/computing-pixel-coordinates-of-3d-point/mathematics-computing-2d-coordinates-of-3d-points" rel="nofollow noreferrer">https://www.scratchapixel.com/lessons/3d-basic-rendering/computing-pixel-coordinates-of-3d-point/mathematics-computing-2d-coordinates-of-3d-points</a></p>
  
  <pre><code>import java.awt.Graphics
  import javax.swing.JFrame
  
  /**
    * Assumed to be 1 unit forward the camera.
    * Contains the drawn points.
    */
  class Canvas(val drawn_points : Seq[Seq[Double]]) extends JFrame {
  
    val CANVAS_WIDTH = 820
    val CANVAS_HEIGHT = 820
    val IMAGE_WIDTH = 900
    val IMAGE_HEIGHT = 900
  
    def display = {
      setTitle("Perlin")
      setSize(IMAGE_WIDTH, IMAGE_HEIGHT)
      setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE)
      setVisible(true)
    }
  
    override def paint(graphics : Graphics): Unit = {
      super.paint(graphics)
      drawn_points.foreach(point =&gt; {
  
        if(!(Math.abs(point.head) &lt;= CANVAS_WIDTH / 2 || Math.abs(point(1)) &lt;= CANVAS_HEIGHT / 2)) {
          println("WARNING : the point (" + point.head + " ; " + point(1) + ") can't be drawn in this canvas.")
        } else {
          val normalized_drawn_point = Seq((point.head + (CANVAS_WIDTH / 2)) / CANVAS_WIDTH, (point(1) + (CANVAS_HEIGHT / 2)) / CANVAS_HEIGHT)
          graphics.fillRect((normalized_drawn_point.head * IMAGE_WIDTH).toInt, ((1 - normalized_drawn_point(1)) * IMAGE_HEIGHT).toInt, 5, 5)
  
          graphics.drawString(
            "P(" + (normalized_drawn_point.head * IMAGE_WIDTH).toInt + " ; "
            + ((1 - normalized_drawn_point(1)) * IMAGE_HEIGHT).toInt + ")",
            (normalized_drawn_point.head * IMAGE_WIDTH).toInt - 50, ((1 - normalized_drawn_point(1)) * IMAGE_HEIGHT).toInt - 10
          )
        }
      })
    }
  
  }
  </code></pre>
  
  <h1>Question</h1>
  
  <p>What's wrong with my program ? I understood the geometrical concepts explained by these both tutorials that I read carefully. I'm pretty sure my product works. I think either the rasterization, or the entries (the matrix) could be wrong...</p>