Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

GL Tile Rendering Demo #5

Draft
wants to merge 11 commits into
base: main
Choose a base branch
from
Draft

GL Tile Rendering Demo #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
b71cb0e
XXX very input yuno number
jcorbin Oct 14, 2023
3ce22c5
XXX
jcorbin Sep 26, 2023
9fb8f97
[xorbig] import from prior work
jcorbin Sep 27, 2024
030ec56
[xorbig] simplify init type branches
jcorbin Sep 7, 2024
9773043
[xorbig] improve float seed support
jcorbin Sep 7, 2024
4aea835
[mortish] add a spatial map based on borkshop-js morty module
jcorbin Oct 26, 2023
24bb217
Add gl-matrix and @types/offscreencanvas
jcorbin Sep 27, 2024
55c7bd8
Yarn up typescript to v5.5.4
jcorbin Dec 12, 2023
adc1e9d
Yarn upgrade ava
jcorbin Aug 17, 2024
5409fdd
[tilore] v0.6.14 DataFrame with webgl support
jcorbin Nov 24, 2023
8236166
ICEBERG gldemo over the years
jcorbin Jun 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 92 additions & 0 deletions gldemo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="index.css" />
<meta name="viewport"
content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<script type="importmap">{
"imports": {
"gl-matrix": "./node_modules/gl-matrix/esm/index.js"
}
}</script>

<title>Cube</title>
</head>

<body>

<canvas id="world" style="width: 100%; height: 100%; image-rendering: pixelated"></canvas>

<script type="module">
const makeDialogPanel = () => {
const $panel = document.createElement('div');
$panel.className = 'dialog panel';

// TODO reconcile these hacks against index.css
$panel.style.textIndent = '0em';
$panel.style.padding = '1.4em 1em';

$world.parentNode.insertBefore($panel, $world);
return $panel;
};

const addEntry = mess => {
const $world = document.querySelector('#world');
if ($world) makeDialogPanel().innerText = mess;
else alert(mess);
};

window.addEventListener('error', ({message, filename, lineno, colno}) => {
addEntry(`uncaught: ${message} @${filename}:${lineno}:${colno}`);
return true;
});

window.addEventListener('unhandledrejection', ({reason}) =>
addEntry(`unhandled rejection: ${reason}`));

import runDemo from './gldemo.js';

const $world = document.querySelector('canvas#world');
if (!$world) throw new Error('unable to find world canvas');

let halt = true;
let demo = null;

async function run() {
if (!halt) return;
halt = false;
for (
let count = 0, backoff = 0, now = Date.now(), then = now;
!halt;
then = now,
backoff = Math.min(200, Math.pow(1.5, ++count))
) {
const since = now - then;
const wait = backoff - since;
if (wait > 0)
await new Promise(resolve => setTimeout(resolve, wait));
count = 0;

demo = await runDemo({
$world,
makeDialog: makeDialogPanel,
cellSize: 64,
tileSize: 256,

worldWidth: 9 * 3,
worldHeight: 9 * 3,
startPlaying: true,
seed: new Date(now).toLocaleDateString(),
});
await demo.done;
}
}

// NOTE: do NOT await this call, or it hides failures
run();
</script>
</body>

</html>
Loading