[Experiment] LOD for images

steveruizok commented 2 weeks ago

This PR adds support for "level of detail" for image shapes. When an image is created, we create multiple versions of that image (each smaller than the last) and display the smallest image for the current zoom level.

Some thoughts here:

It works! and is quite nice.
Very hard to notice the switching between sizes, even with big jumps. (1, 1/2, 1/4, etc.)
This could make image-heavy rooms much more performant.
This could prevent crashes on image-heavy rooms on iOS / memory-sensitive devices

For shared rooms / hosted assets

the performance benefits are definitely worth the extra storage space for us on the backend
we could bump the maximum size for images on hosted rooms

For offline rooms / serialized assets

it's not clear that the performance benefits for offline are worth the extra storage space, because the extra image versions would be stored in the document JSON itself.
Offline projects should probably continue to use a single downscaled images

For the API

it would be nice to make the TLImageAsset.props.src be either a string or an array of scale / strings, so that this isn't a breaking change for anyone.
In this PR we have to compare the shape's width vs. the asset's width in order to determine how the image has been resized. The logic is a little complicated, maybe there's another way to do it, maybe not

Change Type

[x] sdk — Changes the tldraw SDK
[x] feature — New feature

vercel[bot] commented 2 weeks ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
examples	✅ Ready (Inspect)	Visit Preview	May 13, 2024 1:00pm

1 Ignored Deployment

SomeHats commented 1 week ago

When I tried a this on a multiplayer room preview i got an error when adding an image: At asset(type = image).props.sources: Expected an array, got undefined.

When I tried creating a room with an image locally and then sharing it, I got a similar error from the server

tldraw / tldraw