search

MONOGRID / gainmap-js

A Javascript (TypeScript) Port of Adobe Gainmap Technology for storing HDR Images using an SDR Image + a gainmap
https://monogrid.github.io/gainmap-js/
MIT License
70 stars 5 forks source link

HDRJPGs with resolutions higher than 4K crash on mobile (iOS iPhone 15) #40

Closed kitaedesigns closed 2 months ago

kitaedesigns commented 2 months ago

Using a HDRJPG with higher resolutions than 4096 in width seem to crash mobile webpage. Not sure if this is due to iOS and some Safari artificial VRAM limitations or something in the codebase but my guess is iOS. Above 4K HDRJPGs seem to work fine on iPad Pro M2 fine, and desktops as well. Gotten up to 6K on iPad Pro and 8K on desktop.

Curious to hear if anyone else has encountered this problem.

daniele-pelagatti commented 2 months ago

are you able to spot which part of the decoding process triggers the crash? it is toDataTexture() maybe? Are you able to provide a minimum reproducible example? Thanks!

kitaedesigns commented 2 months ago

Here is the code and a link for mobile to test. You can see that when you switch from 4K to 8K it renders black on mobile

Video https://github.com/MONOGRID/gainmap-js/assets/23407511/9903f92b-b017-4640-a0f5-18ecdc7a0b5b

Code https://stackblitz.com/~/github.com/ianpetrarca/gainmap

Test Link for Mobile https://gainmap-ef100.web.app/

daniele-pelagatti commented 2 months ago

at first glance the problem can be reproduced on android and your page can be inspected with chrome://inspect, this is the result: image

the source of the log

THREE.WebGLRenderer: Texture has been resized from (8192x4096) to (4096x2048).

seems to be this line in threejs

https://github.com/mrdoob/three.js/blob/34cfc4d11cf0a0fd83dc66a75acfc181df9bc972/src/renderers/webgl/WebGLTextures.js#L85

so apparently there's a limit of some kind (which I ignore the motivation behind) and three.js tries to resize the texture and (apparently) fails to display the resized texture.

I'm going to close this for now as this doesn't appear to be a gainmap.js related problem