247 lines
8.0 KiB
HTML
247 lines
8.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>
|
|
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper ut mauris sed
|
|
tempor. Nunc
|
|
vehicula tempor purus, non vestibulum libero ornare non. Morbi fringilla sapien diam, sed
|
|
rhoncus lacus egestas
|
|
vel.
|
|
</p>
|
|
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper ut mauris sed
|
|
tempor. Nunc
|
|
vehicula tempor purus, non vestibulum libero ornare non. Morbi fringilla sapien diam, sed
|
|
rhoncus lacus egestas
|
|
vel.
|
|
</p>
|
|
|
|
<div class="figure" id="demo-1"></div>
|
|
|
|
<p>
|
|
Curabitur vestibulum vitae orci ac laoreet. Donec vel imperdiet tortor. Vestibulum lobortis
|
|
aliquam tellus,
|
|
vitae viverra nisi porttitor quis. Pellentesque id efficitur arcu. Nunc laoreet pulvinar
|
|
ligula eu maximus.
|
|
Mauris ullamcorper accumsan dui vel pulvinar.
|
|
</p>
|
|
|
|
<p>
|
|
Curabitur vestibulum vitae orci ac laoreet. Donec vel imperdiet tortor. Vestibulum lobortis
|
|
aliquam tellus,
|
|
vitae viverra nisi porttitor quis. Pellentesque id efficitur arcu. Nunc laoreet pulvinar
|
|
ligula eu maximus.
|
|
Mauris ullamcorper accumsan dui vel pulvinar.
|
|
</p>
|
|
|
|
<p>
|
|
Curabitur vestibulum vitae orci ac laoreet. Donec vel imperdiet tortor. Vestibulum lobortis
|
|
aliquam tellus,
|
|
vitae viverra nisi porttitor quis. Pellentesque id efficitur arcu. Nunc laoreet pulvinar
|
|
ligula eu maximus.
|
|
Mauris ullamcorper accumsan dui vel pulvinar.
|
|
</p>
|
|
|
|
<p>
|
|
Curabitur vestibulum vitae orci ac laoreet. Donec vel imperdiet tortor. Vestibulum lobortis
|
|
aliquam tellus,
|
|
vitae viverra nisi porttitor quis. Pellentesque id efficitur arcu. Nunc laoreet pulvinar
|
|
ligula eu maximus.
|
|
Mauris ullamcorper accumsan dui vel pulvinar.
|
|
</p>
|
|
|
|
<p>
|
|
Curabitur vestibulum vitae orci ac laoreet. Donec vel imperdiet tortor. Vestibulum lobortis
|
|
aliquam tellus,
|
|
vitae viverra nisi porttitor quis. Pellentesque id efficitur arcu. Nunc laoreet pulvinar
|
|
ligula eu maximus.
|
|
Mauris ullamcorper accumsan dui vel pulvinar.
|
|
</p>
|
|
|
|
<p>
|
|
Curabitur vestibulum vitae orci ac laoreet. Donec vel imperdiet tortor. Vestibulum lobortis
|
|
aliquam tellus,
|
|
vitae viverra nisi porttitor quis. Pellentesque id efficitur arcu. Nunc laoreet pulvinar
|
|
ligula eu maximus.
|
|
Mauris ullamcorper accumsan dui vel pulvinar.
|
|
</p>
|
|
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr;">
|
|
<div class="figure" id="demo-2"></div>
|
|
<div class="figure" id="demo-3"></div>
|
|
</div>
|
|
|
|
<p>
|
|
Curabitur tincidunt sapien et diam fringilla, eu accumsan odio faucibus. Orci varius natoque
|
|
penatibus et magnis
|
|
dis parturient montes, nascetur ridiculus mus.
|
|
</p>
|
|
|
|
<p>
|
|
Curabitur tincidunt sapien et diam fringilla, eu accumsan odio faucibus. Orci varius natoque
|
|
penatibus et magnis
|
|
dis parturient montes, nascetur ridiculus mus.
|
|
</p>
|
|
|
|
<p>
|
|
Curabitur tincidunt sapien et diam fringilla, eu accumsan odio faucibus. Orci varius natoque
|
|
penatibus et magnis
|
|
dis parturient montes, nascetur ridiculus mus.
|
|
</p>
|
|
|
|
<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';
|
|
import {Timeline} from './timeline.js';
|
|
|
|
async function initDocument() {
|
|
try {
|
|
const engine = new Engine();
|
|
document.getElementById('atlas-container')?.appendChild(engine.atlas.canvas);
|
|
|
|
const world1 = new World();
|
|
world1.set('minecraft:redstone_wire', -1, 0, 0, {
|
|
east: 'side',
|
|
west: 'none',
|
|
north: 'none',
|
|
south: 'none',
|
|
power: '15'
|
|
});
|
|
world1.set('minecraft:repeater', 0, 0, 0, {
|
|
facing: 'east',
|
|
delay: '1',
|
|
locked: 'false',
|
|
powered: 'true'
|
|
});
|
|
world1.set('minecraft:oak_trapdoor', 2, 0, 0, {
|
|
facing: 'east',
|
|
half: 'bottom',
|
|
open: 'true'
|
|
});
|
|
world1.set('lodestone', 0, -1, 0);
|
|
world1.set('piston', 0, -2, 0, {facing: 'north', extended: 'false'});
|
|
|
|
const demo1 = new Diorama('demo-1', world1, () => engine.requestRender())
|
|
demo1.radius = 2;
|
|
demo1.phi = 10;
|
|
demo1.theta = -5;
|
|
demo1.target = [0.5, 0, 0.5]
|
|
demo1.saveState()
|
|
engine.addDiorama(demo1);
|
|
|
|
const world2 = new World();
|
|
|
|
// Initialize the Timeline and compile the scene/animation
|
|
const timeline = new Timeline(world2);
|
|
timeline.compile(`
|
|
@-1
|
|
place 0 0 0 minecraft:redstone_wire power=0 east=side west=none north=none south=none
|
|
place 1 0 0 minecraft:repeater facing=east delay=4 locked=false powered=false
|
|
place 2 0 0 minecraft:sticky_piston facing=east extended=false
|
|
place 2 0 1 minecraft:sticky_piston facing=east extended=true
|
|
place 2 0 2 minecraft:sticky_piston facing=east extended=true
|
|
place 2.5 0 1 minecraft:piston_head facing=east short=true type=sticky
|
|
place 3 0 2 minecraft:piston_head facing=east short=false type=sticky
|
|
place 3 0 0 minecraft:glass
|
|
place 3.5 0 1 minecraft:observer facing=up powered=true
|
|
place 4 0 2 minecraft:redstone_block
|
|
|
|
@0
|
|
update 2 0 2 extended=false
|
|
place 3 0 2 minecraft:redstone_block
|
|
del 2.5 0 2
|
|
del 3.5 0 2
|
|
|
|
@1
|
|
update 2 0 2 extended=true
|
|
del 3 0 2
|
|
place 2.5 0 2 minecraft:piston_head facing=east short=true type=sticky
|
|
place 3.5 0 2 minecraft:redstone_block
|
|
|
|
@2
|
|
place 3 0 2 minecraft:piston_head facing=east short=false type=sticky
|
|
del 2.5 0 2
|
|
del 3.5 0 2
|
|
place 4 0 2 minecraft:redstone_block
|
|
|
|
@3
|
|
del 4 0 2
|
|
del 3 0 2
|
|
place 2.5 0 2 minecraft:piston_head facing=east short=true type=sticky
|
|
place 3.5 0 2 minecraft:redstone_block
|
|
`);
|
|
|
|
// Load the initial layout
|
|
timeline.seek(0);
|
|
|
|
const demo2 = new Diorama('demo-2', world2, () => engine.requestRender());
|
|
demo2.radius = 4;
|
|
demo2.theta = 180;
|
|
demo2.phi = 90;
|
|
demo2.centerView();
|
|
demo2.saveState();
|
|
engine.addDiorama(demo2);
|
|
|
|
const demo3 = new Diorama('demo-3', world2, () => engine.requestRender());
|
|
demo3.radius = 4;
|
|
demo3.theta = 0;
|
|
demo3.phi = 0;
|
|
demo3.centerView();
|
|
demo3.saveState();
|
|
engine.addDiorama(demo3);
|
|
|
|
await engine.updateAll();
|
|
|
|
// Manually cycle through the timeline ticks for the demo
|
|
let currentTick = 0;
|
|
setInterval(() => {
|
|
timeline.seek(currentTick);
|
|
currentTick = (currentTick + 1) % 4;
|
|
}, 1000);
|
|
} catch (err) {
|
|
console.error("Renderer Initialization Failed:", err);
|
|
}
|
|
}
|
|
|
|
initDocument();
|
|
</script>
|
|
</body>
|
|
</html>
|