Jump to content

How optimize image texture ?


Recommended Posts

Hello guys :)


How optimize image texture ?


What is the best format with which settings ?



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 :)

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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 ?
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 months later...

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;


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...