webgl-3d-animation/src/million_letters/perspective_projection_3d_in_clip_space.js

Interactive 3D animation using WebGL showing a 2D predator prey ecology on a grid which is real-time mapped onto the surface of a 3D torus. node.js server side gives access to WAV format files which are rendered using Web Audio API

BOOK="
// https://stackoverflow.com/questions/28330642/3d-perspective-projection-coordinates-in-clip-space

#include <stdio.h>
#include <stdlib.h>
#include <math.h>

#define DEG2RAD 0.01745329f

void m3d_matrixMul(const float matrix1[], const float matrix2[], float destination[])
{
    int i, row, col;

    for (i = 15; i >= 0; i--)
    {
        row = i % 4;
        col = i / 4 * 4;
        destination[i] = matrix1[row] * matrix2[col] + matrix1[row + 4] * matrix2[col + 1] + matrix1[row + 8] * matrix2[col + 2] + matrix1[row + 12] * matrix2[col + 3];
    }
}

void m3d_matVecMul(const float matrix[], const float vector[], float destination[])
{
    float x = vector[0], y = vector[1], z = vector[2], w = vector[3];

    destination[0] = x * matrix[0] + y * matrix[4] + z * matrix[8] + w * matrix[12];
    destination[1] = x * matrix[1] + y * matrix[5] + z * matrix[9] + w * matrix[13];
    destination[2] = x * matrix[2] + y * matrix[6] + z * matrix[10] + w * matrix[14];
    destination[3] = x * matrix[3] + y * matrix[7] + z * matrix[11] + w * matrix[15];
}

void m3d_getFrustum(float left, float right, float bottom, float top, float near, float far, float matrix[])
{
    matrix[0] = 2.0f * near / (right - left);
    matrix[1] = 0.0f;
    matrix[2] = 0.0f;
    matrix[3] = 0.0f;
    matrix[4] = 0.0f;
    matrix[5] = 2.0f * near / (top - bottom);
    matrix[6] = 0.0f;
    matrix[7] = 0.0f;
    matrix[8] = (right + left) / (right - left);
    matrix[9] = (top + bottom) / (top - bottom);
    matrix[10] = -(far + near) / (far - near);
    matrix[11] = -1.0f;
    matrix[12] = 0.0f;
    matrix[13] = 0.0f;
    matrix[14] = -2.0f * far * near / (far - near);
    matrix[15] = 0.0f;
}

void m3d_getPerspective(float vfov, float aspect, float near, float far, float matrix[])
{
    float height = tanf(vfov * 0.5f * DEG2RAD) * near;
    float width = aspect * height;
    m3d_getFrustum(-width, width, -height, height, near, far, matrix);
}

void m3d_getIdentity(float matrix[])
{
    matrix[0] = 1.0f;
    matrix[1] = 0.0f;
    matrix[2] = 0.0f;
    matrix[3] = 0.0f;
    matrix[4] = 0.0f;
    matrix[5] = 1.0f;
    matrix[6] = 0.0f;
    matrix[7] = 0.0f;
    matrix[8] = 0.0f;
    matrix[9] = 0.0f;
    matrix[10] = 1.0f;
    matrix[11] = 0.0f;
    matrix[12] = 0.0f;
    matrix[13] = 0.0f;
    matrix[14] = 0.0f;
    matrix[15] = 1.0f;
}

void m3d_translate(float x, float y, float z, float matrix[])
{
    matrix[12] += x;
    matrix[13] += y;
    matrix[14] += z;
}

int main(void)
{
    float vertex[4] = {0.5f, 0.5f, 0.5f, 1.0f};
    float modelView[16];
    float projection[16];
    float mvp[16];
    char buffer[4];

    m3d_getIdentity(modelView);
    m3d_translate(0.0f, 0.0f, -2.0f, modelView);
    m3d_getPerspective(45.0f, 800.0f / 600.0f, -0.5f, -1000.0f, projection);
    m3d_matrixMul(projection, modelView, mvp);
    m3d_matVecMul(mvp, vertex, vertex);

    printf( Projected vertex: %f, %f, %f, %f\n , vertex[0], vertex[1], vertex[2], vertex[3]);
    printf( Press ENTER to quit. );
    fgets(buffer, 4, stdin);
    return EXIT_SUCCESS;
}
"