134 lines
4.8 KiB
HTML
134 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Pipeline Test</title>
|
|
<style>
|
|
body {
|
|
background: #222;
|
|
color: #eee;
|
|
font-family: monospace;
|
|
padding: 20px;
|
|
}
|
|
|
|
#canvas-container {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
canvas {
|
|
border: 1px solid #444;
|
|
}
|
|
|
|
#webgl-canvas {
|
|
width: 512px;
|
|
height: 512px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>Renderer Data Pipeline Prototype</h2>
|
|
<div id="output">Loading and building geometry...</div>
|
|
|
|
<div id="canvas-container">
|
|
<canvas id="webgl-canvas" width="1024" height="1024"></canvas>
|
|
<div id="atlas-container"></div>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import {World} from './world.js';
|
|
import {Renderer} from './renderer.js';
|
|
|
|
async function testPipeline() {
|
|
try {
|
|
const webglCanvas = document.getElementById('webgl-canvas');
|
|
const renderer = new Renderer(webglCanvas);
|
|
// Adjusted camera slightly to see the block underneath
|
|
renderer.setCamera(-3, 3, -3, 3, 5, 4, 5, 0, 0, 0);
|
|
|
|
document.getElementById('atlas-container').appendChild(renderer.atlas.canvas);
|
|
|
|
const world = new World();
|
|
|
|
// Initial State: Closed trapdoor, no redstone block
|
|
world.setBlock('minecraft:oak_trapdoor', 0, 0, 0, {
|
|
facing: 'east',
|
|
open: 'false',
|
|
half: 'bottom'
|
|
});
|
|
|
|
world.setBlock('minecraft:coal_block', 0, -1, -3); // north -z
|
|
world.setBlock('minecraft:diamond_block', 3, -1, 0); // east +x
|
|
world.setBlock('minecraft:gold_block', 0, -1, 3); // south +z
|
|
world.setBlock('minecraft:iron_block', -3, -1, 0); // west -x
|
|
|
|
// NOTE the trapdoor should open AWAY from the diamond block
|
|
// the repeaters should point "inward"
|
|
// the pistons should extend "outward"
|
|
|
|
// world.setBlock('minecraft:glass', 1, 0, 0);
|
|
// world.setBlock('minecraft:glass', 0, 0, 1);
|
|
world.setBlock('minecraft:coal_block', 0, -1, 0);
|
|
world.setBlock('minecraft:repeater', 1, -1, 0, {facing: 'west', delay: 1, locked: false, powered: false});
|
|
world.setBlock('minecraft:comparator', 0, -1, 1, {facing: 'north', mode: 'compare', powered: false});
|
|
|
|
world.setBlock('minecraft:piston', 0, 0, -3, {facing: "north", extended: false})
|
|
world.setBlock('minecraft:piston', 3, 0, 0, {facing: "east", extended: false})
|
|
world.setBlock('minecraft:piston', 0, 0, 3, {facing: "south", extended: false})
|
|
world.setBlock('minecraft:piston', -3, 0, 0, {facing: "west", extended: false})
|
|
|
|
world.setBlock('minecraft:repeater', 0, 1, -3, {facing: "north", delay: 1, locked: true, powered: false})
|
|
world.setBlock('minecraft:repeater', 3, 1, 0, {facing: "east", delay: 2, locked: true, powered: false})
|
|
world.setBlock('minecraft:repeater', 0, 1, 3, {facing: "south", delay: 3, locked: true, powered: false})
|
|
world.setBlock('minecraft:repeater', -3, 1, 0, {facing: "west", delay: 4, locked: true, powered: false})
|
|
|
|
await renderer.updateWorld(world);
|
|
|
|
// Render Loop (Static, just drawing the current buffers)
|
|
function animate() {
|
|
renderer.render();
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
animate();
|
|
|
|
// --- THE STATE MACHINE LOOP ---
|
|
let isOpen = false;
|
|
|
|
setInterval(async () => {
|
|
isOpen = !isOpen;
|
|
|
|
// 1. Mutate the world data
|
|
world.updateBlock(0, 0, 0, {open: isOpen.toString()});
|
|
|
|
if (isOpen) {
|
|
world.setBlock('minecraft:redstone_block', 0, -1, 0);
|
|
world.updateBlock(1, -1, 0, {powered: true})
|
|
world.updateBlock(0, -1, 1, {powered: true})
|
|
} else {
|
|
world.removeBlock(0, -1, 0);
|
|
world.updateBlock(1, -1, 0, {powered: false})
|
|
world.updateBlock(0, -1, 1, {mode: 'subtract', powered: false})
|
|
}
|
|
|
|
// 2. Tell the renderer to sync with the new world state
|
|
await renderer.updateWorld(world);
|
|
|
|
document.getElementById('output').innerHTML = `<strong>State Demo:</strong> Trapdoor is ${isOpen ? 'OPEN' : 'CLOSED'}`;
|
|
|
|
// await return new Promise((resolve) => setTimeout(resolve, time));
|
|
|
|
}, 1000);
|
|
|
|
} catch (err) {
|
|
console.error(err);
|
|
document.getElementById('output').textContent = 'Error: ' + err.message;
|
|
}
|
|
}
|
|
|
|
testPipeline();
|
|
</script>
|
|
</body>
|
|
</html>
|