tp1_projection_3D.js

const canvas = document.querySelector('canvas#drawing');
const ctx = canvas.getContext('2d');

/**
 * Positions des sommets du cube
 * Cube centré sur 0,0,0 de hauteur, largeur, profondeur de 1
 */
const positions = [
    -0.5, -0.5, -0.5, 0.5, -0.5, -0.5,
    0.5, 0.5, -0.5, -0.5, 0.5, -0.5,
    -0.5, -0.5, 0.5, 0.5, -0.5, 0.5,
    0.5, 0.5, 0.5, -0.5, 0.5, 0.5
];

const indices = [
    0, 1, 2, 0, 2, 3,  // devant
    4, 5, 6, 4, 6, 7,  // derrière
    0, 1, 5, 0, 5, 4,  // dessous
    2, 3, 7, 2, 7, 6,  // dessus
    0, 3, 7, 0, 7, 4,  // gauche
    1, 2, 6, 1, 6, 5   // droite
];


function matXVect(mat, v) {
    let result = [];
    for (let i = 0; i < mat.length; i++) {
        let sum = 0;
        for (let j = 0; j < v.length; j++) {
            sum += mat[i][j] * v[j];
        }
        result.push(sum);
    }
    return result;
}

function transformerVecteurParMatrice(matrice, vecteur) {
    return matXVect(matrice, vecteur);
}

const worldMat = [
    [0.5, 0.5, -0.7071067690849304, 0],
    [-0.8535534143447876, 0.1464466154575348, -0.5, 0],
    [-0.1464466154575348, 0.8535534143447876, 0.5, 0],
    [0, 0, 0, 1]
];

const viewMat = [
    [-0.7071067690849304, -0.5, -0.5, 0],
    [0, 0.7071067690849304, -0.7071067690849304, 0],
    [0.7071067690849304, -0.5, -0.5, 0],
    [0, 0, 0, 1]
];

const projMat = [
    [2.237522602081299, 0, 0, 0],
    [0, 2.365222454071045, 0, 0],
    [0, 0, 1.0002000331878662, 1],
    [0, 0, -2.000200033187866, 0]
];

/**
 * Transformer les coordonnées des triangles
 */
function transformerCoordonneesTriangle(idx, pos, worldMat, viewMat, projMat) {
    const triangles = [];
    for (let i = 0; i < idx.length; i += 3) {
        const sommet1 = [pos[idx[i] * 3], pos[idx[i] * 3 + 1], pos[idx[i] * 3 + 2], 1];
        const sommet2 = [pos[idx[i + 1] * 3], pos[idx[i + 1] * 3 + 1], pos[idx[i + 1] * 3 + 2], 1];
        const sommet3 = [pos[idx[i + 2] * 3], pos[idx[i + 2] * 3 + 1], pos[idx[i + 2] * 3 + 2], 1];