<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGL2 Cube Demo</title>
<style>
body {
margin: 0;
padding: 20px;
background: #222;
font-family: monospace;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
h1 {
color: #fff;
}
#canvas {
border: 2px solid #fff;
background: #000;
image-rendering: pixelated;
image-rendering: crisp-edges;
}
#output {
color: #0f0;
}
</style>
</head>
<body>
<h1>WebGL2 Polymorphic Cube Renderer</h1>
<div id="output">Loading...</div>
<script type="module">
import { main } from './demo.js';
const output = document.getElementById('output');
async function run() {
try {
output.textContent = 'Rendering...';
await main();
output.textContent = 'Rendered! (Check console for matrix info)';
} catch (err) {
output.textContent = 'Error: ' + err.message;
console.error(err);
}
}
run();
</script>
</body>
</html>
