How optimize image texture ?

[3Dlove]

Hello guys

 

How optimize image texture ?

 

What is the best format with which settings ?

JPG, DDS, BMP, PNG, TGA ?

 

I know that JPG and DDS are lossy compression.

and PNG and TGA are lossless compression

 

And that is good to have dimensions of power of two

 

What tool do you use to compress or/and optimize images ?

 

 

Have a nice day

[Temechon]

When saving a JPEG, Gimp ask you how much you would like to compress, photoshop too.

[reddozen]

Paint.net will let you compress them too.

[fenomas]

GPUs mostly deal with textures uncompressed, don't they? In which case I'd imagine image compression/optimization matters mostly just for delivery, so the same rules would apply as for web contents, no?

[reddozen]

I would imagine you could use AJAX and php to do some cool tricks and dynamically scale image quality.

 

I'm using PHP to dynamically build javascript babylon load files from databased environment object locations etc.

[GameMonetize]

if you target high end devices, DDS is the best!

[gryff]

Hi 3Dlove There are a lot of factors that influence the format you can/should use.

 

As fenomas says:

 

In which case I'd imagine image compression/optimization matters mostly just for delivery

 

 

One of the BJS team produced a video about DDS texturing (DK?) in which a drawback of of using the.jpg -having to uncompress such textures and their uncompressed size. Unfortunately, I don't have a link for the video

 

Also when considering the format - what is the texture used for and does it have more than 256 colours and transparency. So for example, if the texture is just a red background with, for example, with just the word EXIT in white - use an 8 bit png. However if your texture has alpha information then 24bit .png.

 

Another factor you need to consider is the importance of the texture to the scene. Is it dominant in the scene or just something tucked away in a corner. In the latter case you maybe better off using a smaller size texture rather than trying excessive compression.

 

And I don't like .jpg files that have been compressed if the texture is to be tiled - often produces a line/seam at the edge of the texture.

 

cheers, gryff

[gryff]

DDS is the best!

 

Was it you that did the video I mention DK - if so is it still available somewhere?

 

cheers, gryff

[GameMonetize]

Should be on MVA

[reddozen]

You've given me an idea to play with the PHP ImageMagick library and dynamically build lower res DDS textures on the fly to go with the LOD engine...

[jerome]

Does DDS work with WebGL / OpenGL (or only DirectX) ?

[Temechon]

@jerome: Babylon.js has a way to read and use TGA and DDS files if that's what you're asking.

[jerome]

au quai

[3Dlove]

Hello guys, very interesting subject =)

 

My application have desktop and mobile devices as targets

[3Dlove]

Hello guys,

 

I like Paint.net because it automatically calculate the number of bytes to use in PNG.

 

Yes, I would like to optimize images for the client's load time, he don't need to have 3 Mo texture =p

But I think that also changes the RAM consumption of the application, right?

 

I target devices with standard configuration, as well as mobile devices (tablet, smarphone).

 

@gryff, I would be interested by your video :-)

 

So, I understand that depends the using of the texture.

But which format are to ban for my targets ? (mobile devices)

And wich format is the most appropriate to keep quality and decrease the image size ?

[GameMonetize]

for mobile keep jpg alongside DDS. You can test for dds support (engine.getCaps().s3tc == true)

[3Dlove]

Okay so JPG for all images and PNG for images with transparency

Curently, (engine.getCaps().s3tc == true) return false on my computer.

 

What is the max recommended dimensions for images ? 512px ?

[reddozen]

I would say it depends on what the object is, and how much detail you really need. It's it's really far away and not really detailed, 256 may be enough.

 

You want your textures as small as you can make them and still be satisfied with the way the results look. Sometimes that may require a larger or smaller texture. I wouldn't use the same 512 texture on my building if it was a LOD version 100 units away where the detail is lost anyway.

[dbawel]

As referenced already in this post, I find the best and most efficient results using .jpg image files for images 24 bits or less (8 bits for each red, green, and blue channel), and .png files for 32 bit images (the extra 8 bits used for a greyscale alpha channel.)  Targa image files and other formats are fine, however, they generally use more memory on disk (not necessarily graphics memory) - but more disk space on the server and locally as they are lossless and uncompressed image formats.

 

It was also asked if power of 2 images are best to use.  The answer is yes.  Power of 2 images are essential.  And, it's best to use 8 X 8 blocks as .jpg images and other formats are encoded in 8 X 8 blocks.  So it may use a bit more memory, but your scene will render faster using 8 X 8 block textures such as 16 X 16, 32 X 32, 64 X 64, 128 X 128, etc.  Also, the frame buffer is composed of fragments which are square, which is why power of 2 textures are essential.  Otherwise, textures other than power of 2 on Android and other devices will render as white.

[AntoineP]

if you target high end devices, DDS is the best!

Is there a code example and a dds file to test this feature?

 

I'm using this code without success :

    var cube = new BABYLON.Mesh.CreateBox("cube", 6.0, scene);    var cubeMaterial = new BABYLON.StandardMaterial("cubeMaterial", scene);    var cubeTexture = new BABYLON.Texture('damier.dds', scene);    cubeMaterial.emissiveTexture = cubeTexture;    cube.material = cubeMaterial;

TIA!

[GameMonetize]

Your code works:

http://www.babylonjs-playground.com/#869D3

 

Double-check the support of DDS in your browser