[-] fossil_dev@lemmy.ml 1 points 4 hours ago

The original idea is by Cartossin's GoodLibrary (https://lagbag.com/goodgallery/)

11
submitted 4 hours ago by fossil_dev@lemmy.ml to c/opensource@lemmy.ml

Standard web photo galleries lay out a wall of tags. So I wanted to see what happens if you treat the thumbnail grid like a sprite-rendered game scene instead i.e. pre-pack thumbnails into atlas pages at build time, then composite them with WebGL2 in the browser.

How it works: Build step (Node + Sharp, runs locally if needed). Scans a photo folder, generates four LOD levels per image (h50/h100/h200/h400), shelf-packs them into 2048×2048 AVIF sprite atlases, emits a binary layout index. Originals are copied byte-for-byte with content-hashed URLs so CDN edge caches survive rebuilds with unchanged photos.

Runtime (browser only, no server). Parses the binary index zero-copy as typed-array views, computes a justified grid, renders only the visible slice via WebGL2 instanced quads.

fossil_dev

joined 9 hours ago