batching
This commit is contained in:
@@ -11,7 +11,7 @@ export class Diorama {
|
||||
|
||||
this.target = [0.5, 0, 0.5];
|
||||
this.radius = 4;
|
||||
this.theta = 135;
|
||||
this.theta = 45;
|
||||
this.phi = 30;
|
||||
|
||||
this.projMatrix = new Float32Array(16);
|
||||
|
||||
143
index.html
143
index.html
@@ -32,18 +32,21 @@
|
||||
<main>
|
||||
<h1>Visualizer</h1>
|
||||
|
||||
<h2>Static</h2>
|
||||
|
||||
<div class="figure" id="demo-1"></div>
|
||||
|
||||
<h2>Dynamic</h2>
|
||||
|
||||
<div class="figure" id="demo-pulses"></div>
|
||||
|
||||
<div class="figure" id="demo-time"></div>
|
||||
|
||||
<div class="figure" id="demo-state"></div>
|
||||
|
||||
<h2>Static Sub-Figures</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>
|
||||
<div id="atlas-container" style="position: absolute; right: 0; top: 0"></div>
|
||||
</main>
|
||||
|
||||
<script type="module">
|
||||
@@ -64,10 +67,46 @@
|
||||
p 0 -2 0 piston facing=north extended=false
|
||||
`)
|
||||
|
||||
const world2 = new World(`
|
||||
const pulses = `
|
||||
p 0 0 0 observer facing=north powered=false
|
||||
p 0 0 1 piston facing=south extended=false
|
||||
|
||||
p 0 -1 1 observer facing=up powered=false
|
||||
p 0 -1 2 observer facing=up powered=false
|
||||
|
||||
t 2
|
||||
p 0 0 0 powered=true
|
||||
p 0 0 1 extended=true
|
||||
|
||||
t 3
|
||||
p 0 0 1.5 piston_head facing=south short=true type=normal
|
||||
|
||||
t 4
|
||||
p 0 0 0 powered=false
|
||||
|
||||
p 0 -1 1 powered=true
|
||||
|
||||
p 0 -1 2 powered=true
|
||||
|
||||
t 6
|
||||
p 0 -1 1 powered=false
|
||||
p 0 -1 2 powered=false
|
||||
`;
|
||||
|
||||
const world_pulses = new World(pulses);
|
||||
|
||||
const demo_pulses = new Diorama('demo-pulses', world_pulses, () => engine.requestRender())
|
||||
demo_pulses.radius = 4;
|
||||
demo_pulses.centerView()
|
||||
demo_pulses.saveState()
|
||||
engine.addDiorama(demo_pulses);
|
||||
|
||||
const piston = `
|
||||
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
|
||||
p 3 0 0 slime_block
|
||||
p 4 0 0 slime_block
|
||||
|
||||
t 2
|
||||
p 0 0 0 power=15
|
||||
@@ -77,11 +116,20 @@
|
||||
|
||||
t 7
|
||||
p 2 0 0 extended=true
|
||||
|
||||
p 4.0 0 0 air &
|
||||
p 4.5 0 0 slime_block
|
||||
p 3.0 0 0 air &
|
||||
p 3.5 0 0 slime_block
|
||||
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
|
||||
p 4.5 0 0 air &
|
||||
p 5.0 0 0 slime_block
|
||||
p 3.5 0 0 air &
|
||||
p 4.0 0 0 slime_block
|
||||
p 2.5 0 0 air &
|
||||
p 3.0 0 0 piston_head facing=east short=false type=normal
|
||||
|
||||
t 12
|
||||
p 0 0 0 power=0
|
||||
@@ -90,23 +138,38 @@
|
||||
p 1 0 0 powered=false
|
||||
|
||||
t 17
|
||||
p 3 0 0 air
|
||||
p 3 0 0 air &
|
||||
p 2.5 0 0 piston_head facing=east short=true type=normal
|
||||
p 4.0 0 0 air &
|
||||
p 3.5 0 0 slime_block
|
||||
p 5.0 0 0 air &
|
||||
p 4.5 0 0 slime_block
|
||||
|
||||
t 18
|
||||
p 2.5 0 0 air
|
||||
p 3.5 0 0 air &
|
||||
p 3.0 0 0 slime_block
|
||||
p 4.5 0 0 air &
|
||||
p 4.0 0 0 slime_block
|
||||
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 piston_time = new World(piston);
|
||||
const piston_state = new World(piston);
|
||||
|
||||
const demo2 = new Diorama('demo-2', world2, () => engine.requestRender())
|
||||
const demo_time = new Diorama('demo-time', piston_time, () => engine.requestRender())
|
||||
demo_time.radius = 4;
|
||||
demo_time.centerView()
|
||||
demo_time.saveState()
|
||||
engine.addDiorama(demo_time);
|
||||
|
||||
const demo_state = new Diorama('demo-state', piston_state, () => engine.requestRender())
|
||||
demo_state.radius = 4;
|
||||
demo_state.centerView()
|
||||
demo_state.saveState()
|
||||
engine.addDiorama(demo_state);
|
||||
|
||||
const demo2 = new Diorama('demo-2', world1, () => engine.requestRender())
|
||||
demo2.radius = 5;
|
||||
demo2.theta = 180;
|
||||
demo2.phi = 90;
|
||||
@@ -114,7 +177,7 @@
|
||||
demo2.saveState()
|
||||
engine.addDiorama(demo2);
|
||||
|
||||
const demo3 = new Diorama('demo-3', world2, () => engine.requestRender())
|
||||
const demo3 = new Diorama('demo-3', world1, () => engine.requestRender())
|
||||
demo3.radius = 5;
|
||||
demo3.centerView()
|
||||
demo3.saveState()
|
||||
@@ -123,20 +186,40 @@
|
||||
// Fetch and build everything concurrently!
|
||||
await engine.updateAll();
|
||||
|
||||
const factor = 1;
|
||||
setInterval(() => {
|
||||
const factor = 2.5;
|
||||
const update_time = () => {
|
||||
for (let i = 0; i < 20; i++) {
|
||||
setTimeout(() => world2.seek(i), i * factor * 50)
|
||||
setTimeout(() => piston_time.seek(i), i * factor * 50)
|
||||
}
|
||||
}, factor * 1000)
|
||||
};
|
||||
setInterval(update_time, factor * 1000)
|
||||
update_time();
|
||||
|
||||
// let i = 0;
|
||||
// let n = world2.eventCount;
|
||||
// setInterval(() => {
|
||||
// world2.seekIndex(i);
|
||||
// i = (i + 1) % n;
|
||||
// }, 500);
|
||||
let i = 0;
|
||||
let n = piston_state.eventCount;
|
||||
const update_state = () => {
|
||||
piston_state.seekIndex(i);
|
||||
i = (i + 1) % n;
|
||||
};
|
||||
setInterval(update_state, 250);
|
||||
update_state()
|
||||
|
||||
const update_pulses = () => {
|
||||
for (let i = 0; i < 10; i++) {
|
||||
setTimeout(() => world_pulses.seek(i), i * factor * 50)
|
||||
}
|
||||
};
|
||||
setInterval(update_pulses, factor * 500)
|
||||
update_pulses();
|
||||
|
||||
// let j = 0;
|
||||
// let m = world_pulses.eventCount;
|
||||
// const update_pulses = () => {
|
||||
// world_pulses.seekIndex(j);
|
||||
// j = (j + 1) % m;
|
||||
// };
|
||||
// setInterval(update_pulses, 250);
|
||||
// update_state()
|
||||
|
||||
} catch (err) {
|
||||
console.error("Renderer Initialization Failed:", err);
|
||||
|
||||
124
world.js
124
world.js
@@ -55,9 +55,35 @@ export class World {
|
||||
return this.blocks.get(`${x},${y},${z}`);
|
||||
}
|
||||
|
||||
#apply(data, x, y, z) {
|
||||
const key = `${x},${y},${z}`;
|
||||
if (data) {
|
||||
this.blocks.set(key, new Block(data.id, [x, y, z], {...data.state}));
|
||||
} else {
|
||||
this.blocks.delete(key);
|
||||
}
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.blocks.clear();
|
||||
|
||||
for (const [key, block] of this.initialState.entries()) {
|
||||
this.blocks.set(key, new Block(block.id, [...block.pos], {...block.state}));
|
||||
}
|
||||
|
||||
this.currentIndex = this.initialIndex;
|
||||
|
||||
if (this.initialIndex > 0 && this.events.length > 0) {
|
||||
this.currentTime = this.events[this.initialIndex - 1].time;
|
||||
} else {
|
||||
this.currentTime = -Infinity;
|
||||
}
|
||||
|
||||
this.notify();
|
||||
}
|
||||
|
||||
#compile(script) {
|
||||
let currentTime = -1;
|
||||
let subTick = 0;
|
||||
let capturedInitialState = false;
|
||||
|
||||
const shadowWorld = new Map();
|
||||
@@ -73,18 +99,32 @@ export class World {
|
||||
|
||||
const lines = script.split('\n').map(l => l.trim()).filter(l => l && !l.startsWith('#'));
|
||||
|
||||
for (const line of lines) {
|
||||
let currentBatch = [];
|
||||
|
||||
for (let line of lines) {
|
||||
let mergeNext = false;
|
||||
|
||||
// Check for the continuation operator
|
||||
if (line.endsWith('&')) {
|
||||
mergeNext = true;
|
||||
line = line.slice(0, -1).trim();
|
||||
}
|
||||
|
||||
const tokens = line.split(/\s+/);
|
||||
const cmd = tokens[0];
|
||||
|
||||
if (cmd === 't') {
|
||||
const newTime = parseFloat(tokens[1]);
|
||||
|
||||
// If we are crossing the tick 0 threshold, lock in the initial state
|
||||
if (newTime >= 0 && !capturedInitialState) captureInitial();
|
||||
|
||||
// Force flush any pending batch if time suddenly changes
|
||||
if (currentBatch.length > 0) {
|
||||
this.events.push({time: currentTime, actions: currentBatch});
|
||||
currentBatch = [];
|
||||
}
|
||||
|
||||
currentTime = newTime;
|
||||
subTick = 0;
|
||||
continue;
|
||||
}
|
||||
|
||||
@@ -131,17 +171,20 @@ export class World {
|
||||
const nextBlock = shadowWorld.get(key);
|
||||
const next = nextBlock ? {id: nextBlock.id, state: {...nextBlock.state}} : null;
|
||||
|
||||
this.events.push({
|
||||
time: currentTime,
|
||||
subTick: subTick++,
|
||||
x, y, z,
|
||||
prev,
|
||||
next
|
||||
});
|
||||
currentBatch.push({x, y, z, prev, next});
|
||||
|
||||
// Commit the batch to the timeline if it's not waiting for a continuation
|
||||
if (!mergeNext) {
|
||||
this.events.push({time: currentTime, actions: currentBatch});
|
||||
currentBatch = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback catch if the script ends entirely before tick 0
|
||||
if (currentBatch.length > 0) {
|
||||
this.events.push({time: currentTime, actions: currentBatch});
|
||||
}
|
||||
|
||||
if (!capturedInitialState) captureInitial();
|
||||
|
||||
this.eventCount = this.events.length - this.initialIndex;
|
||||
@@ -149,15 +192,6 @@ export class World {
|
||||
this.reset();
|
||||
}
|
||||
|
||||
#apply(data, x, y, z) {
|
||||
const key = `${x},${y},${z}`;
|
||||
if (data) {
|
||||
this.blocks.set(key, new Block(data.id, [x, y, z], {...data.state}));
|
||||
} else {
|
||||
this.blocks.delete(key);
|
||||
}
|
||||
}
|
||||
|
||||
seek(target) {
|
||||
let targetTime = target;
|
||||
|
||||
@@ -166,37 +200,45 @@ export class World {
|
||||
if (targetTime === undefined) throw new Error(`Label not found: ${target}`);
|
||||
}
|
||||
|
||||
// Scrub Forward
|
||||
while (this.currentIndex < this.events.length && this.events[this.currentIndex].time <= targetTime) {
|
||||
const ev = this.events[this.currentIndex];
|
||||
this.#apply(ev.next, ev.x, ev.y, ev.z);
|
||||
const batch = this.events[this.currentIndex];
|
||||
for (const action of batch.actions) {
|
||||
this.#apply(action.next, action.x, action.y, action.z);
|
||||
}
|
||||
this.currentIndex++;
|
||||
}
|
||||
|
||||
// Scrub Backward
|
||||
while (this.currentIndex > 0 && this.events[this.currentIndex - 1].time > targetTime) {
|
||||
this.currentIndex--;
|
||||
const ev = this.events[this.currentIndex];
|
||||
this.#apply(ev.prev, ev.x, ev.y, ev.z);
|
||||
const batch = this.events[this.currentIndex];
|
||||
for (let i = batch.actions.length - 1; i >= 0; i--) {
|
||||
const action = batch.actions[i];
|
||||
this.#apply(action.prev, action.x, action.y, action.z);
|
||||
}
|
||||
}
|
||||
|
||||
this.currentTime = targetTime;
|
||||
this.notify(); // Dispatch a single batched update to the Engine
|
||||
this.notify();
|
||||
}
|
||||
|
||||
seekIndex(targetIndex) {
|
||||
targetIndex = targetIndex + this.initialIndex;
|
||||
|
||||
while (this.currentIndex < this.events.length && this.currentIndex < targetIndex) {
|
||||
const ev = this.events[this.currentIndex];
|
||||
this.#apply(ev.next, ev.x, ev.y, ev.z);
|
||||
const batch = this.events[this.currentIndex];
|
||||
for (const action of batch.actions) {
|
||||
this.#apply(action.next, action.x, action.y, action.z);
|
||||
}
|
||||
this.currentIndex++;
|
||||
}
|
||||
|
||||
while (this.currentIndex > 0 && this.currentIndex > targetIndex) {
|
||||
this.currentIndex--;
|
||||
const ev = this.events[this.currentIndex];
|
||||
this.#apply(ev.prev, ev.x, ev.y, ev.z);
|
||||
const batch = this.events[this.currentIndex];
|
||||
for (let i = batch.actions.length - 1; i >= 0; i--) {
|
||||
const action = batch.actions[i];
|
||||
this.#apply(action.prev, action.x, action.y, action.z);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.currentIndex < this.events.length) {
|
||||
@@ -207,22 +249,4 @@ export class World {
|
||||
|
||||
this.notify();
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.blocks.clear();
|
||||
|
||||
for (const [key, block] of this.initialState.entries()) {
|
||||
this.blocks.set(key, new Block(block.id, [...block.pos], {...block.state}));
|
||||
}
|
||||
|
||||
this.currentIndex = this.initialIndex;
|
||||
|
||||
if (this.initialIndex > 0 && this.events.length > 0) {
|
||||
this.currentTime = this.events[this.initialIndex - 1].time;
|
||||
} else {
|
||||
this.currentTime = -Infinity;
|
||||
}
|
||||
|
||||
this.notify();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user