150 lines
4.0 KiB
HTML
150 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Pipeline Test</title>
|
|
<style>
|
|
body {
|
|
background: #222;
|
|
color: #eee;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
main {
|
|
width: 80ch;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.figure {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 20em;
|
|
}
|
|
|
|
.figure > canvas {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<h1>Visualizer</h1>
|
|
|
|
<h2>Static</h2>
|
|
|
|
<div class="figure" id="demo-1"></div>
|
|
|
|
<h2>Dynamic</h2>
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr;">
|
|
<div class="figure" id="demo-2"></div>
|
|
<div class="figure" id="demo-3"></div>
|
|
</div>
|
|
|
|
<div id="atlas-container"
|
|
style="position: fixed; left: 0; top: 0; border: 1px solid white;"></div>
|
|
</main>
|
|
|
|
<script type="module">
|
|
import {Engine} from './engine.js';
|
|
import {Diorama} from './diorama.js';
|
|
import {World} from './world.js';
|
|
|
|
async function initDocument() {
|
|
try {
|
|
const engine = new Engine();
|
|
document.getElementById('atlas-container')?.appendChild(engine.atlas.canvas);
|
|
|
|
const world1 = new World(`
|
|
p -1 0 0 redstone_wire east=side west=none north=none south=none power=15
|
|
p 0 0 0 repeater facing=east delay=1 locked=false powered=true
|
|
p 2 0 0 oak_trapdoor facing=east half=bottom open=true
|
|
p 0 -1 0 lodestone
|
|
p 0 -2 0 piston facing=north extended=false
|
|
`)
|
|
|
|
const world2 = new World(`
|
|
p 0 0 0 redstone_wire power=0 east=side west=none north=none south=none
|
|
p 1 0 0 repeater facing=west powered=false locked=false delay=2
|
|
p 2 0 0 piston facing=east extended=false
|
|
|
|
t 2
|
|
p 0 0 0 power=15
|
|
|
|
t 6
|
|
p 1 0 0 powered=true
|
|
|
|
t 7
|
|
p 2 0 0 extended=true
|
|
p 2.5 0 0 piston_head facing=east short=true type=normal
|
|
|
|
t 8
|
|
p 2.5 0 0 air
|
|
p 3 0 0 piston_head facing=east short=false type=normal
|
|
|
|
t 12
|
|
p 0 0 0 power=0
|
|
|
|
t 16
|
|
p 1 0 0 powered=false
|
|
|
|
t 17
|
|
p 3 0 0 air
|
|
p 2.5 0 0 piston_head facing=east short=true type=normal
|
|
|
|
t 18
|
|
p 2.5 0 0 air
|
|
p 2 0 0 extended=false
|
|
`);
|
|
|
|
const demo1 = new Diorama('demo-1', world1, () => engine.requestRender())
|
|
demo1.radius = 3;
|
|
demo1.phi = 10;
|
|
demo1.theta = -5;
|
|
demo1.target = [0.5, 0, 0.5]
|
|
demo1.saveState()
|
|
engine.addDiorama(demo1);
|
|
|
|
const demo2 = new Diorama('demo-2', world2, () => engine.requestRender())
|
|
demo2.radius = 5;
|
|
demo2.theta = 180;
|
|
demo2.phi = 90;
|
|
demo2.centerView()
|
|
demo2.saveState()
|
|
engine.addDiorama(demo2);
|
|
|
|
const demo3 = new Diorama('demo-3', world2, () => engine.requestRender())
|
|
demo3.radius = 5;
|
|
demo3.centerView()
|
|
demo3.saveState()
|
|
engine.addDiorama(demo3);
|
|
|
|
// Fetch and build everything concurrently!
|
|
await engine.updateAll();
|
|
|
|
const factor = 1;
|
|
setInterval(() => {
|
|
for (let i = 0; i < 20; i++) {
|
|
setTimeout(() => world2.seek(i), i * factor * 50)
|
|
}
|
|
}, factor * 1000)
|
|
|
|
// let i = 0;
|
|
// let n = world2.eventCount;
|
|
// setInterval(() => {
|
|
// world2.seekIndex(i);
|
|
// i = (i + 1) % n;
|
|
// }, 500);
|
|
|
|
|
|
} catch (err) {
|
|
console.error("Renderer Initialization Failed:", err);
|
|
}
|
|
}
|
|
|
|
initDocument();
|
|
</script>
|
|
</body>
|
|
</html>
|