I’m trying to write a 3D “Engine” in JS and I’ve encountered some issues with rendering. I followed this wikipedia article and this other article on graphics pipelines on how to set up the model, view and projection matrices:

Note that I’m using two-dimensional arrays for vectors for now, so multiplying them with matrices is easier, which means that every value in a vector is an array; that’s annoying, but I’ll change that later on.

const near = 0.1, far = 100, fov = 90
const projection = [
    [1 / Math.tan(fov / 2) / aspectratio, 0,                     0,                      0],
    [0,                                   1 / Math.tan(fov / 2), 0,                      0],
    [0,                                   0,                     -(far+near)/(far-near), 0],
    [0,                                   0,                     -1,                     0]
]

let up = [[0], [1], [0], [1]] // universal up-vector
let camera = [[0], [0], [-4], [1]] // camera position
let cameraUp = [[0], [1], [0], [1]] // perpendicular up-vector for camera in case you're looking up
let target = [[0], [0], [0], [1]] // look-at, the point the camera is looking at
let direction = [[0], [0], [-1], [1]] // supposed to be the direction the camera is looking at
let zaxis = normal(minus(camera, target))
let xaxis = normal(cross(cameraUp, zaxis))
let yaxis = cross(zaxis, xaxis)
viewmatrix = [
    [xaxis[x], xaxis[y], xaxis[z], -dot(xaxis, camera)],
    [yaxis[x], yaxis[y], yaxis[z], -dot(yaxis, camera)],
    [zaxis[x], zaxis[y], zaxis[z], -dot(zaxis, camera)],
    [0,        0,        0,        1                  ]
]

let size = 1
let model = [
    [this.size, 0,         0,         this.position[x]],
    [0,         this.size, 0,         this.position[y]],
    [0,         0,         this.size, this.position[z]],
    [0,         0,         0,         1               ]
]

This is what I’m doing with these matrices:
use() takes in an array of vertices and multiplies the vertices with the matrix

let points = use(projection, use(viewmatrix, use(model, this.vertices)))

// delete points outside the frustum
let outside = []
points.forEach(v => {
   let planes = getFrustumPlanes(projection)
   for (let i = 0; i < planes.length; i++) {
       if (!vertexOutside(v, planes[i])) break
   }

   outside.push(v)
})
        
let divided = outside.map(v => [[v[x] / v[w]], [v[y] / v[w]], [v[z] / v[w]], [1]])
let transformed = divided.map(v => [[width / 2 * (v[x] + 1)], [height / 2 * (v[y] + 1)], [0.5 * v[z] + 0.5], [1]])

[1] For some reason I have to add (width / 2, height / 2) to all the vertices when drawing, even after applying the viewport-transform, otherwise the cube(s) aren’t in the middle of the screen, even if the cube’s position and center is (0, 0, 0) and the camera is looking down the z-axis.

Those pretty much work; when I load 9 cubes next to each other it looks like this:
9 1×1 cubes

[2] The weird thing is that I can see stuff that should be behind me, even though I’m determining whether a vertex is inside the camera frustum with this code:

function vertexOutside(vertex, plane) {
    // Calculate the signed distance from the vertex to the plane
    var distance = dot(vertex, plane.normal) - plane.distance;

    // If the distance is negative, the vertex is outside the frustum plane
    return distance < 0;
}

function getFrustumPlanes(projectionMatrix) {
    var planes = [];

    // Right plane
    planes[0] = {
        normal: [projectionMatrix[3][0] - projectionMatrix[0][0], projectionMatrix[3][1] - projectionMatrix[0][1], projectionMatrix[3][2] - projectionMatrix[0][2]],
        distance: projectionMatrix[3][3] - projectionMatrix[0][3]
    };

    // Left plane
    planes[1] = {
        normal: [projectionMatrix[3][0] + projectionMatrix[0][0], projectionMatrix[3][1] + projectionMatrix[0][1], projectionMatrix[3][2] + projectionMatrix[0][2]],
        distance: projectionMatrix[3][3] + projectionMatrix[0][3]
    };

    // Top plane
    planes[2] = {
        normal: [projectionMatrix[3][0] - projectionMatrix[1][0], projectionMatrix[3][1] - projectionMatrix[1][1], projectionMatrix[3][2] - projectionMatrix[1][2]],
        distance: projectionMatrix[3][3] - projectionMatrix[1][3]
    };

    // Bottom plane
    planes[3] = {
        normal: [projectionMatrix[3][0] + projectionMatrix[1][0], projectionMatrix[3][1] + projectionMatrix[1][1], projectionMatrix[3][2] + projectionMatrix[1][2]],
        distance: projectionMatrix[3][3] + projectionMatrix[1][3]
    };

    // Near plane
    planes[4] = {
        normal: [projectionMatrix[3][0] + projectionMatrix[2][0], projectionMatrix[3][1] + projectionMatrix[2][1], projectionMatrix[3][2] + projectionMatrix[2][2]],
        distance: projectionMatrix[3][3] + projectionMatrix[2][3]
    };

    // Far plane
    planes[5] = {
        normal: [projectionMatrix[3][0] - projectionMatrix[2][0], projectionMatrix[3][1] - projectionMatrix[2][1], projectionMatrix[3][2] - projectionMatrix[2][2]],
        distance: projectionMatrix[3][3] - projectionMatrix[2][3]
    };

    return planes;
}

[3] I’m trying to get the mouse-movement right such that I can look around with it. Right now I’m doing that like this:

 window.addEventListener('mousemove', e => {
        mouse.dx = e.x - mouse.x
        mouse.dy = e.y - mouse.y
        mouse.x = e.x
        mouse.y = e.y

        var sens = 0.2
        var rotX = mouse.dx * sens * 0.1
        var rotY = mouse.dy * sens * 0.1

        const rotYMat = [
            [1, 0,   0,    0],
            [0, Math.cos(rotY), -Math.sin(rotY), 0],
            [0, Math.sin(rotY), Math.cos(rotY),  0],
            [0, 0,   0,    1]
        ]
        
        const rotXMat = [
            [Math.cos(rotX),  0, Math.sin(rotX), 0],
            [0,    1, 0,   0],
            [-Math.sin(rotX), 0, Math.cos(rotX), 0],
            [0,    0, 0,   1]
        ]

        direction = mult(rotXMat, direction)
        direction = mult(rotYMat, direction)

        // this doesn't work yet
        // [1] How do I achieve targetting via mouse movement?
        target = add(camera, direction)
        //cameraUp = normal(cross(target, up))
    })

As you’ll see in the full code, this is super janky but I can’t think of any other way except rotating the direction.

Here’s the full code via pastebin.