Silhouette unnecessarily stores transparent pixels

[Joeclinton1]

Actual Behavior

In a vector costume, if you place an image at the center and put an invisible element surrounding the image, the silhouette increases even though the extra space is just transparent pixels.

I have a project where i'm trying to stretch costumes through the use of fisheye and a very large invisible rectangle placed around the image in the costume, the image is only 100x100px, but the silhouette is 4000x4000 px. Meaning 94% of the space is just transparent pixels. Because of the issue described here #584, my project requires enormous amounts of ram (64MB per 4000x4000 costume) despite the svg itself being only 0.5MB.

Expected behaviour

What I would like to happen is that the silhouette only expands to the first non-transparent pixel. So that a border of invisible pixels does not change the size of the silhouette. This could be achieved by cropping the silhouette to the outermost non-transparent pixels, but keeping the bounds the same. In touching colour and touching sprite, you could shift the pixel array to the sprite center, And treat it as its silhouette size and not bounds size.

Alternatively, as I commented on the issue about silhouette RAM usage, you could store the silhouette in a better data structure such as a quad tree. Which would let you compress the texture but still perform pixel colour lookups in sub linear time.

Thank you very much for your consideration of this issue :)

Steps to Reproduce

Steps to reproduce the behavior:

1. Go to 'https://scratch.mit.edu/projects/713446656/'
2. Either go to dev tools -> memory -> take heap snapshot and view how 64MB of memory is used in the Uint8ClampedArray
3. OR go to the console in a developer build of the GUI, and copy and paste the following code into the console vm.runtime.renderer._allSkins.filter((e)=>e.hasOwnProperty("_svgImage") && e["_silhouette"]["_width"]>=2000)[0] Look at the size of the UintClampedArray in the the child object "_silhouette". It will be excessively large.

System Details

All systems

Screenshots

[adroitwhiz]

This is a lot of effort to go through to support a very niche edge case. Keep in mind as well that the GPU will have to render a 4000x4000 texture (actually clamped to 2048x2048 because some mobile GPUs don't even support anything above that, making the cat appear blurry in the project you linked), meaning the sprite will also consume quite a bit of VRAM.

GPU-side texture compression is highly platform-dependent and lossy, making it infeasible, so even if some sort of compression was implemented for silhouettes, that wouldn't solve the VRAM issue.

Normal costumes don't have any transparent space around them--they should be cropped to their contents, and the only way to add transparent space is by deliberately drawing a transparent rectangle in vector mode. It's cool that you can implement an approximation of a stretching effect using a huge amount of transparent space, but it's not really a very common use case.

As such, I think trying to automatically crop off transparent space from the edges of costumes and correct for the centering would be a lot of extra effort and code complexity for something that 99.9% of projects are never going to use.

[Joeclinton1]

@adroitwhiz That's fair. Thank you for taking time out of your schedule to read and understand my issue. It's understandable that if in regular use the problem does not occur, it is not worth the time to solve.

[cwillisf]

Thanks for the suggestion, @Joeclinton1! I agree that silhouettes could be optimized, but I also agree with @adroitwhiz that this particular optimization probably wouldn't benefit most projects.