I am still new to lightning, right now trying to select technology to rework our existing Smart TV app. My question is about development for TV with 4k resolution.
When my app resolution is set to 1920x1080 the text seems blurry on high-res tv. I can see few ways to solve this:
set app resolution to 4k and precision to either 0.5 or 0.333 (for 1280x720). I am worried this way will consume too much resources
dynamically set app resolution to either 1920x1080, precision=1 or 4k, precision=0.5 and use helper function to calculate all dimensions in app code (i.e. (size) => res4k?size*2:size)
Maybe there is a way to set global transformation function for all dimensions to keep code clean?
Render all text in 2x size and scale it down using scale: 0.5
I am leaning towards second approach, but would love to listen to your suggestions.
Chances are the TV is not displaying your web app at 4k because it would require a lot of memory. Ultimately you just want clearer text which there maybe other ways to fix that up. @frank for suggestions. Was there a particular TV you were working with?
Text rendering resolution is limited to the resolution that your app runs at. If your app runs at 1920x1080 on a 4K device then text will obviously not look 100% crisp. Instead it’s up to the TV’s upsampling capabilities in order to make a 1920x1080 image look as good as possible at 4K.
Methods 1 and 2 are the same thing. The resolution coordinates you author your app in is independent from what resolution you render your application in. If you set your app resolution stage config to 1920x1080 (which we recommend) then you can set the dimensions to 3840x2160 and the precision to 2.0 in order to render it at 4K (Playing around with this right now I actually noticed a bug with how word wrapping is applied to text in this configuration. We’re looking into it). All the coordinate/dimension adjusting is done for you by Lightning.
Method 3 theoretically doesn’t help at all. If you render your app at 1920x1080 and then set your text to 2x normal size and scale it down to 0.5 then the text texture is being generated at double the size that it is being scaled down to render at. Meaning you’re wasting texture memory for no quality increase.
So your only options are to scale your application to 4K (double the video memory being used) or accept the quality trade off.
The problem is that Smart TV expects your app resolution to be 1920x1080 on 4k TVs. Every pixel consists of 4 physical pixels and font renderer in web browser can utilize this subpixels for crisp text.
I have found this discussion on StackOverflow, looks like correct solution should be:
define Lightning canvas in 4k resolution
apply CSS styles to downscale canvas to 1920x1080 resolution required for Smartv TV apps.
Just tested this idea and although it works, mouse events got completely messed up (required for LG Magic Remote support).
Looks like the only way to solve this problem is to introduce pixel density support internally in Lightning.js. There is even this PR that adresses the issue.
The first approach, setting the application resolution to 4k and the accuracy to 0.5 or 0.333 can lead to degraded performance and consume more resources. It can also lead to degraded image quality, as blurring can be caused not only by the resolution, but also by other factors such as image compression and compression. The second approach, dynamically setting the application resolution to 1920x1080, precision = 1 or 4k, precision = 0.5 and using an auxiliary function to calculate all dimensions in the application code, can be a more efficient and flexible solution. This way, you can maintain high resolution and accuracy by using auxiliary functions to calculate dimensions and keep performance. It can also make your code more readable and maintainable. A third approach, setting a global conversion function for all dimensions, can be useful if you want to simplify your code and make it more readable. However, this can lead to performance issues if the global function is used for all measurements and called repeatedly in the application. The fourth approach, displaying all text at 2x size and scaling it down using scale: 0.5, can lead to lower image quality and text readability issues. It can also increase the amount of memory required and lead to performance issues. In general, it is recommended to use the second approach with dynamic setting of the application’s resolution and using auxiliary functions to calculate the dimensions in the application code. This will provide support for high resolution and accuracy while maintaining performance and readability of the code.