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

Firepro · June 28, 2016, 6:11am

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!

max · June 28, 2016, 12:18pm

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

will · June 28, 2016, 12:35pm

The engine already has code to do this:

github.com

playcanvas/engine/blob/master/src/graphics/device.js#L1025


    // Attach the color buffer
    gl.framebufferTexture2D(
        gl.FRAMEBUFFER,
        gl.COLOR_ATTACHMENT0,
        colorBuffer._cubemap ? gl.TEXTURE_CUBE_MAP_POSITIVE_X + target._face : gl.TEXTURE_2D,
        colorBuffer._glTextureId,
        0
    );
}


var depthBuffer = target._depthBuffer;
if (depthBuffer && this.webgl2) {
    // --- Init the provided depth/stencil buffer (optional, WebGL2 only) ---
    if (!depthBuffer._glTextureId) {
        // Clamp the render buffer size to the maximum supported by the device
        depthBuffer._width = Math.min(depthBuffer.width, this.maxRenderBufferSize);
        depthBuffer._height = Math.min(depthBuffer.height, this.maxRenderBufferSize);
        this.setTexture(depthBuffer, 0);
    }
    // Attach
    if (target._stencil) {

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

max · June 28, 2016, 1:18pm

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

Firepro · June 28, 2016, 1:44pm

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.

max · June 28, 2016, 2:06pm

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

Firepro · June 28, 2016, 5:04pm

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!

max · June 28, 2016, 5:44pm

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.

Firepro · June 28, 2016, 8:55pm

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.

max · June 29, 2016, 11:18am

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