29
submitted 5 days ago* (last edited 4 days 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.

Edit: added "very fast" to the title

top 2 comments
sorted by: hot top new old
[-] isVeryLoud@lemmy.ca 1 points 3 days ago* (last edited 3 days ago)

The demo is a bit stuttery on my Pixel 9 on Firefox.

It doesn't stutter on Chrome, but it seems like it's only running at 60 FPS rather than my native frame rate?

[-] fossil_dev@lemmy.ml 1 points 5 days ago* (last edited 4 days ago)

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

this post was submitted on 17 May 2026
29 points (93.9% liked)

Open Source

46974 readers
56 users here now

All about open source! Feel free to ask questions, and share news, and interesting stuff!

Useful Links

Rules

Related Communities

Community icon from opensource.org, but we are not affiliated with them.

founded 6 years ago
MODERATORS