[SOLVED] Recommended Image Size & Type for Skybox/Cubemap?


#1

I know that skybox/cubemap image files are to be the same resolution and square. However, I think some devices are not able to view my skybox/cubemaps because the resolution was to high, and probably the device did not have enough RAM.

Does anyone have a recommended image size/resolution and image type that will ensure most mobile devices will still be able to display them properly? Thanks!


#2

So http://webglreport.com/ has Max Cube Map Texture Size but noticed on some hardware it was still set high there, but device not supporting like 1024, only 512.

I found that 512 is about to be guaranteed to be supported across all platforms.
We probably should have check in engine, that would auto-resize cubemap to supported size if it is too large.
There is a ticket for it: https://github.com/playcanvas/engine/issues/427


#3

The engine already has code to do this:

I’m assuming it actually works though. I’ve asked @Mr_F to check. :slight_smile:


#4

I’ve noticed on @dave laptop, it didn’t look like was working.


#5

Thanks for the info. I was troubleshooting why some devices did not see my cubemap, only see black screen with “Tap for VR” logo. When I tried downsizing the cubemap images some devices now work. So my guess is auto resize in Playcanvas is not working, but sounds like such a feature would be useful, or at least a warning to authors to watch the size.


#6

Can you post screenshot of webglreport.com website on devices that had problems displaying cubemap of which size, and which size worked?


#7

I started with cubemap images of 2560x2560 but some devices displayed black.
I changed to 1024x1024 and 720x720 both worked with all devices but one.
Ran Webglreport on device and report said browser supports it but it is diabled possibly driver update needed. Now in process of doing several OS updates on the device.

In short, after changing resolution my problem seems to now be isolated to out of date device.

I will try and experiment with devices and resolution that causes error and get webglreport.

If in fact images are being resized automatically by PLAYCANVAS what would be optimal settings?
Image size uploaded should probably match image size used (or is it scaled for different devices), what is that size? 512x512 1024x1024

Is PNG format better to use than JPG?
Should image compression be used or no compression?

I was just starting to look at the model viewer kit, but didn’t occur to me that my cubemap viewing might be better with that starting point. Thanks for pointing that out!


Poor render quality, distrotion, alignment
#8

In WebGL in order to get mipmaps generated and have good textures quality, webgl needs to use power of two resolution, which is: 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192, etc.
By default uploaded textures will be resized to PoT resolution. CubeMap wont work if it is not PoT resolution.

So yes, you want to upload PoT textures to preserve best quality.
In this case, JPG will be better, as it will be already large enough, and you want to minimize assets size to allow users enjoy content without need to download too many Mb.


#9

After many OS and browser updates I got the last device to now work with my cubemaps. Thanks, for everyone’s help. I will continue to play around with PC …I may have to learn a bit more about this coding thing.


#10

You can start getting into coding here: https://www.codecademy.com/learn/javascript
It is really good source for learning JS.