3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-28 14:56:13 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎉 Add shapes buffer to improve memory allocation

Browse source
This commit is contained in:
Alejandro Alonso 2025-05-09 12:36:04 +02:00
parent 23bde76192
commit 03b4fe3558
9 changed files with 122 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

13
frontend/resources/wasm-playground/js/lib.js
View file

@ -79,6 +79,19 @@ function getHeapU32() {
return Module.HEAPU32;
}
export function clearShapeFills() {
Module._clear_shape_fills();
}
export function addShapeSolidFill(argb) {
const ptr = allocBytes(176);
const heap = getHeapU32();
const dv = new DataView(heap.buffer);
dv.setUint8(ptr, 0x00, true);
dv.setUint32(ptr + 4, argb, true);
Module._add_shape_fill();
}
export function setShapeChildren(shapeIds) {
const offset = allocBytes(shapeIds.length * 16);
const heap = getHeapU32();

17
frontend/resources/wasm-playground/rects.html
View file

@ -25,43 +25,50 @@
<script type="module">
import initWasmModule from '/js/render_wasm.js';
import {
init, assignCanvas, hexToU32ARGB, getRandomInt, getRandomColor,
init, addShapeSolidFill, assignCanvas, hexToU32ARGB, getRandomInt, getRandomColor,
getRandomFloat, useShape, setShapeChildren, setupInteraction
} from './js/lib.js';
const canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const shapes = 1_000;
initWasmModule().then(Module => {
init(Module);
assignCanvas(canvas);
Module._set_canvas_background(hexToU32ARGB("#FABADA", 1));
Module._set_view(1, 0, 0);
Module._init_shapes_pool(shapes + 1);
setupInteraction(canvas);
const children = [];
for (let i = 0; i < 1000; i++) {
for (let i = 0; i < shapes; i++) {
const uuid = crypto.randomUUID();
children.push(uuid);
useShape(uuid);
Module._set_parent(0, 0, 0, 0);
Module._set_shape_type(3);
const x1 = getRandomInt(0, canvas.width);
const y1 = getRandomInt(0, canvas.height);
const x1 = getRandomInt(0, canvas.width*3);
const y1 = getRandomInt(0, canvas.height*3);
const width = getRandomInt(20, 100);
const height = getRandomInt(20, 100);
Module._set_shape_selrect(x1, y1, x1 + width, y1 + height);
const color = getRandomColor();
const argb = hexToU32ARGB(color, getRandomFloat(0.1, 1.0));
Module._add_shape_solid_fill(argb);
addShapeSolidFill(argb)
}
useShape("00000000-0000-0000-0000-000000000000");
setShapeChildren(children);
performance.mark('render:begin');
Module._render(Date.now());
performance.mark('render:end');
const { duration } = performance.measure('render', 'render:begin', 'render:end');
// alert(`render time: ${duration.toFixed(2)}ms`);
});
</script>