High Resolution image rendering

Get Help
1

Hi, we were trying to render a large resolution sprite image to show thumbnails over progress-bar of video player.
We are reducing the actual size of image with some service before displaying it over app and it works fine when we test it on web with image around 16000 pixels in width. But when we render same image on RPI device it shows black area and only works when we reduce size around 2000 px in width , which also reduces quality of image significantly.
So, why is there a difference in maximum dimensions allowed and is there any way we can control this.

2

Hi, the problem seems to be related to MAX_TEXTURE_SIZE which dictactes the maximum size of either of the textures dimension. If you would inspect gl.getParameter(gl.MAX_TEXTURE_SIZE) on your local machine you get a different number vs the raspberry pi. On my machine in chrome it return 16384 and on my RPI 3b+ 2048 which means your texture can be max 2048x2048.

This would also explain why your 16000px will work on your local machine but not on the RPI.

1 Like
3

Hi,

Is there any workaround or any other methods to render image which is of more resolution than MAX_TEXTURE_SIZE .

In our case the maximum resolution of the image is around 16000x1366.

@mauro1855 any comments on this

4

Hi Sharan,

You have 2 options, but both come down to the same result: the image has to be scaled down before being used by the Lightning Application.

Option 1 is to change the resolution of the source images themselves. If this is not possible, for example because they come from a 3rd party API, you’ll have to run them through an image resizing service, that does this downscaling on the fly.

If you plan to deploy your app in the Metrological app store, you can leverage their built -in Image scaling service. I’m sure Mauro can give you more details, if that is your case.

If the app is deployed outside of the Metro context however, you’ll need to run your own image resizing service (or use an external 3rd party service).

Hope that helps.

Michiel

5

Hi @Sharan,
I subscribe to @michiel 's comments, but I also know what is your particular use-case and I still think it might be best to explore different alternatives other than trying to render those very big sprites.

Instead of using a sprite, I would suggest two potential approaches:

  • Ask the server for the exact image clip that you need, instead of requesting the sprite with all the possible image clips.
  • If the API only returns the massive sprite, have you explored creating/using an API that will take in the sprite and cut it into small image clips that you can render in Lightning?

Best regards,
Mauro