rendertest.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MatRenderer Test</title>
    <link rel="icon" type="image/png" href="icon.png">
    <style>
        body {
            margin: 0;
            background-color: #111;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        canvas {
            border: 1px solid #555;
            background-color: #000;
        }
    </style>
</head>
<body>

    <canvas id="webgl2" width="800" height="600"></canvas>

        <script type="module">
        import * as MatR from './lib/MatRender.js';
        
        // Use commas instead of plus signs to view the full objects in the console
        console.log("Correctly Loaded WebGL!:", MatR.gl);
        console.log("Correctly Loaded MatR!:", MatR);
        
        window.onload = function() {
            const myGradient = MatR.color.grad({pos: {max: 1.0, min: -1.0}}, [
                {pos: -1.0, color: MatR.color.convert({from: "RGB", to: "HEX"}, 0, 0, 0)},
                {pos: 1.0, color: MatR.color.convert({from: "RGB", to: "HEX"}, 255, 255, 255)}
            ]);

            const trianglePoints = [
                [0.0, 0.5, 0.0],
                [-0.5, -0.5, 0.0],
                [0.5, -0.5, 0.0]
            ];

            MatR.loop(function() {
                MatR.shape.draw(MatR.shape.fill, myGradient, trianglePoints);
            });
        };
    </script>


</body>
</html>