mirror of
https://github.com/penpot/penpot.git
synced 2026-05-22 00:13:41 +00:00
80 lines
2.1 KiB
HTML
80 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>WASM + WebGL2 Canvas</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
background: #111;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="canvas"></canvas>
|
|
<script type="module">
|
|
import initWasmModule from '/js/render_wasm.js';
|
|
import {
|
|
addShapeSolidFill, hexToU32ARGB, getRandomInt, getRandomColor,
|
|
getRandomFloat, addShape, setShapeChildren, setup
|
|
} from './js/lib.js';
|
|
|
|
const canvas = document.getElementById("canvas");
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
|
|
const params = new URLSearchParams(document.location.search);
|
|
const shapes = params.get("shapes") || 1000;
|
|
|
|
initWasmModule().then(Module => {
|
|
setup({
|
|
instance: Module,
|
|
canvas,
|
|
shapes
|
|
})
|
|
|
|
const children = [];
|
|
for (let shape = 0; shape < shapes; shape++) {
|
|
const color = getRandomColor()
|
|
children.push(
|
|
addShape({
|
|
parent: "00000000-0000-0000-0000-000000000000",
|
|
type: "rect", // rect
|
|
selrect: {
|
|
x: getRandomInt(0, canvas.width),
|
|
y: getRandomInt(0, canvas.height),
|
|
width: getRandomInt(20, 100),
|
|
height: getRandomInt(20, 100),
|
|
},
|
|
fills: [{ type: "solid", color, opacity: getRandomFloat(0.1, 1.0) }],
|
|
strokes: [{ width: 10, type: "solid", color, opacity: getRandomFloat(0.1, 1.0) }]
|
|
})
|
|
);
|
|
}
|
|
|
|
addShape({
|
|
id: "00000000-0000-0000-0000-000000000000",
|
|
children: children
|
|
})
|
|
|
|
performance.mark('render:begin');
|
|
Module._render(performance.now(), true);
|
|
performance.mark('render:end');
|
|
const { duration } = performance.measure('render', 'render:begin', 'render:end');
|
|
// alert(`render time: ${duration.toFixed(2)}ms`);
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|