PNG Skybox

[8Observer8]

Hello

I have 6 sides of skybox in png format. Can I use it? Or must I convert it to JPG?

This skybox have images with size: 8 MB. Is it too much for one image? What size is perfect?

[julien-moreau]

Hi @8Observer8

When you create a cube texture, the default extensions are ["_px.jpg", "_py.jpg", "_pz.jpg", "_nx.jpg", "_ny.jpg", "_nz.jpg"];

So, in your case, you should create your cube texture like:

var skyboxTexture = new BABYLON.CubeTexture(rootUrl, scene, ["_px.png", "_py.png", "_pz.png", "_nx.png", "_ny.png", "_nz.png"]);

[8Observer8]

Thank you for replay!

How do you thinks what is batter: png or jpg?

I converted every image from 8MB (PNG) to 1MB (JPG) by GIMP with quality = 90%

My scene look like this: https://8observer8.github.io/BabylonJS/SolarSystemMauve/

Must I use displayLoadingUI when I load textures or this is ok?

[V!nc3r]

It's better to use png for image quality. 8Mb per texture ? What's their resolution ? 4096px² is already (very) big enough in most of case for example

I don't know if this can interest someone, but i've made this little example with a scene.babylon generated from Blender.

[8Observer8]

23 minutes ago, V!nc3r said:

8Mb per texture ? What's their resolution ? 4096px²

Yes. What size is the best?

 

27 minutes ago, V!nc3r said:

I don't know if this can interest someone, but i've made this little example with a scene.babylon generated from Blender.

Thanks! I will see.

[V!nc3r]

The best size depends of the use of the texture, you just have to learn/have the feeling to decide which size use for each texture.

If a teapot on a kitchen use a 4096px texture, but the kitchen use a 256², it's may be not logical.

If this teapot will be seen on a giant super-HD screen, so keep the 4096px², but if you want to show it on an apple-watch, reduce it to 2px²

[8Observer8]

1 minute ago, V!nc3r said:

If a teapot on a kitchen use a 4096px texture, but the kitchen use a 256², it's may be not logical.

Sorry. I asked the wrong question. What size is better for SkyBox in my Solar System Example

Now it is per texture:
- 4096px
- 1 MB
- jpg

But before it was per texture:
- 4096px
- 8 MB
- png

[V!nc3r]

I redirect you to a topic i've started, especially my first question and the Deltakosh answer.

tldr; Keep your texture in png, because jpg generate compression artefacts, and both textures will charged equally the VRAM.

[8Observer8]

Yes, I will keep in PNG. But what size is optimal for skybox? What compression level need I set in GIMP? May by need I to set 2048 instead 4096?

[V!nc3r]

Like i said, just use your feeling. If on a 1080p screen you don't seen difference between skybox in 2048 or 4096, so use the 2048.

[8Observer8]

If someone wants to change 4096 to  2048 by GIMP can he use "Scale Tool"? Or is it wrong for this tasks?

[aWeirdo]

i would reduce their sizes to 2048 or maybe even 1024 and still use jpg. 8MB for a single texture is just too big, especially when you then have 6 of them in total..

I don't know much about GIMP but paint.net can save jpg loseless (100% quality) and it still reduces the size compared to a png

[8Observer8]

Or "Layer" -> "Scale Layer" with "Cubic" Quality?

[aWeirdo]

@8Observer8 on the top menu, image -> scale image -> change both x & y to 2048 -> click "scale"

[gryff]

@8Observer8 :

Here are 4 sets of skybox images in .jpg format  : 512x512, 1024x1024, 2048x2048, 4096x4096px  that you can test in your solar system. 

Image file sizes from 37Kb - 635Kb/per image.

skyboxes.zip

You will have to rename them appropriately - they have names like top, bottom etc.

Here is an example of the 1024 images in use -  created for a little contest on HTML5 Game Devs forum last year.

When you try them (or any skybox you may use) - look for visible seams.

cheers, gryff

[8Observer8]

Thanks!

Please, say me. Do you see a difference? I show a total size for all 6 textures:

SolarSystem4096x4096_jpg_5.5MB

SolarSystem2048x2048_png_15.5MB

This is a source code:

SolarSystem4096x4096_jpg_5.5MB (source code on github)

SolarSystem2048x2048_png_15.5MB (source code on github)

4 hours ago, Luaacro said:

var skyboxTexture = new BABYLON.CubeTexture(rootUrl, scene, ["_px.png", "_py.png", "_pz.png", "_nx.png", "_ny.png", "_nz.png"]);

Thank you very much! It works.

[gryff]

@8Observer8: Hmm 15.5MB for 2048 size and 5.5 MB for 4096 size ....

Below is a screen shot of the zip file just after compression - largest size .668MB (4048 size, top image).

So how did you rename the images?

Did you load them into a graphics program then re-save then as a jpg with new name? Or did you just re-name the files in the directory you had unzipped them to?

cheers, gryff

[8Observer8]

43 minutes ago, gryff said:

15.5MB for 2048 size and 5.5 MB for 4096 size ....

Yes, because 2048 - png and 4096 - jpg

 

 

45 minutes ago, gryff said:

Did you load them into a graphics program then re-save then as a jpg with new name?

Yes, I opened images (4096x4096, png) in GIMP and exported them to: jpg (4096x4096) and png (2048x2048)

For png I resized images, like this:

3 hours ago, aWeirdo said:

on the top menu, image -> scale image -> change both x & y to 2048 -> click "scale"