Using Compressed Textures - Now With A Playground!!!

[JCPalmer]

@gryff, I could tell by the very first post that you had the wrong end of the stick, but put off talking about it since the problem of getting it to work made mixing it in confusing.  Compressed textures are about efficient GPU memory usage & access time / caching.

Image files (JPG, PNG), are expanded when put into GPU.  The size of your dtx file in the GPU is within 50 bytes of 683kb.  Also a compressed texture has all of the mip maps (smaller versions) right in the file.  These are generated at runtime for image types.  For 4096 size this is very significant.  RAM required for a 4k rgb image texture including mipmaps is:

50,331,648 (4096 * 4096 * 3) +
12,582,912 (2048 * 2048 * 3) +
 3,145,728 (1024 * 1024 * 3) +
   786,432 ( 512 *  512 * 3) +
   196,608 ( 256 *  256 * 3) +
    49,152 ( 128 *  128 * 3) +
    12,288 (  64 *   64 * 3) +
     3,072 (  32 *   32 * 3) +
       768 (  16 *   16 * 3) +
       192 (   8 *    8 * 3) +
        48 (   4 *    4 * 3) +
        12 (   2 *    2 * 3) +
         3 (   1 *    1 * 3)
===========
67,108,863

The memory footprint of a 4K PVR compressed file is 5,462 kb.

In your case, the PNG file has alpha, it will be 5,611 kb in memory as opposed to 683kb.  One thing you might do is verify you are not using a dxt format that has alpha, since it looks like you do not need it.

 4,194,304 (1024 * 1024 * 4) +
 1,048,576 ( 512 *  512 * 4) +
   280,900 ( 256 *  256 * 4) +
    65,536 ( 128 *  128 * 4) +
    16,384 (  64 *   64 * 4) +
     4,096 (  32 *   32 * 4) +
     1,024 (  16 *   16 * 4) +
       256 (   8 *    8 * 4) +
        64 (   4 *    4 * 4) +
        16 (   2 *    2 * 4) +
         4 (   1 *    1 * 4)
===========
 5,611,160

 

[gryff]

3 hours ago, JCPalmer said:

I could tell by the very first post that you had the wrong end of the stick,

@JCPalmer: not sure I even had hold of the stick - right or wrong end . I was like my old days with VRML and 4 different viewers - some code would work with one viewer but not with others

TY for the above post - I'm hoping this thread will be a resource, from a practical point of view,  for people wanting to use compressed textures, so I hope to see more from you and @V!nc3r

3 hours ago, JCPalmer said:

One thing you might do is verify you are not using a dxt format that has alpha, since it looks like you do not need it

That will be something I will eventually wander into as I continue experimenting

cheers, gryff

[V!nc3r]

I've update the png in github to a classic 256 * 256 * 32.

Another topic that could be linked with this one : How textures are handle by hardware in webGL ?.

[gryff]

I got into this issue of compressed textures because I was looking at creating low poly mesh assets for terrains - ie. rocks. I had created a low poly rock - 29 verts and I wanted to reduce the texture load as well. So here is an example:

Rocks Demo

The are five rocks, four with stone like textures and one just the base rock with its UVMap as a texture.

The four stone textures were created by mixing two textures in Blender's Node Editor. So for the rock with green moss I mixed these two textures : Texture A and Texture B  See result A in image below. Then I added some bump mapping using a Perlin driven Noise Texture - result B in image below. The amount of bump is controllable in the Node Editor. I baked out the texture to be used with a simple material in the Blender Render material setup for export to BJS

Currently, I have two rocks on a 1024x1024 image but that can be changed as well as the number of rocks per texture for more efficiency. And as you can see from the demo above the bumping works quite well - so no need for a separate normal/bump texture.

For the example above I created the "'-dxt.ktx', '-pvrtc.ktx', '-etc2.ktx', '-etc1.ktx'" versions of the compressed textures. Results I got include '-pvrtc' used on an Ipad/Safari, and my old Samsung Tab A/Chrome uses '-etc1', newer Android devices will likely use '-etc2'.

So a couple of thoughts.

1: @V!nc3r could you add an etc1 compressed image to your github site so older Android devices can benefit?

2: Do images have to be square or just power of 2? I have a feeling that Apple OSs require square, but I'm not sure.

I will continue exploring.

cheers, gryff

[JCPalmer]

2. Sort of.  PVRTC requires square.  That is the preferred format that can come from iOS currently.  I am pretty sure that ASTC is implemented in most recent hardware, A8 and up, but Apple only exposes it for Metal, not WebGL.

[gryff]

3 hours ago, JCPalmer said:

I am pretty sure that ASTC is implemented in most recent hardware, A8 and up, but Apple only exposes it for Metal, not WebGL

@JCPalmer : Thanks Jeff . I have yet to find a device that uses ASTC. My Win7 desktop and Win 10 laptop - both allow "'-dxt.ktx',  '-etc2.ktx', '-etc1.ktx'". Is it all due to physical hardware, or drivers for the hardware, or WebGL version? My desktop has an NVidia 1060 and it seems like a waste of money if it is never be able to use ASTC.

Ohh and by the way, I may need a little help with setting up the "batch files" for processing a whole directory of .png files. Seems like going back to DOS .

TY again for all your input and sharing your knowledge.

cheers, gryff

[V!nc3r]

On 28/03/2017 at 6:56 PM, gryff said:

could you add an etc1 compressed image to your github site so older Android devices can benefit?

I'm absolutely n00b with PVRTexTool and don't know how to tweak it (for now all I do is just copy-paste tips from doc page).

If someone know how to configure this tool, feel free to explain how to choose format export option of PVRTexTool

[JCPalmer]

Do File->Open of a format you do have.  PNG probably the best starting point.

Do Edit->Encode menu item.  It brings up Encode Texture in the Multi-doc area.  Select as highlighted.  Fast is fine for etc1.  Slower settings can appear to stall.

When encode is complete, a 2nd version of file appears.  Do File->Save..  Make sure to pick *.ktx as the type.

[gryff]

There you go @V!nc3r : Jeff beat me to it

cheers, gryff

[V!nc3r]

Thanks JCPalmer !

Erf, what an idiot I am, I was stuck with command line and .bat file and doesn't notice that PVRTexTool have a GUI

[V!nc3r]

Done, there's now an etc1 texture : https://github.com/Vinc3r/BJS-KTX-textures/tree/master/BJS

Is this work ?

[edit]

playground updated. Is there a way to have a permanent link to the last version of a playground scene ? example : babylonjs-playground.com/index.html#1SCH7H#last

Also, when I check v3.0 minified preview in BJS versionbuilder, all I got according to the console is v2.5, and ktx textures doesn't load. I had to dl babylon.js used by playground.

[/edit]

[GameMonetize]

I created the issue for the Version builder. Will fix it soon

[gryff]

@V!nc3r : see attached image below - screenshot of my Samsung Tab A tablet. Using the etc1 format

It is running Android 6 - but is 3 years old so I don't think the hardware is upto anything better.

@Deltakosh : If it is not too much trouble, could you please change the link in the tutorial to use @V!nc3r 's new PG ?

cheers, gryff

[GameMonetize]

No problem my friend, I do it RIGHT now

[gryff]

@Deltakosh Ahhh!  Merci beaucoup monsieur

sante, gryff

[V!nc3r]

4 hours ago, gryff said:

Samsung Tab A tablet. Using the etc1 format

updated github wiki , samsung devices now load astc rather than png

[gryff]

And just for completeness - etc1 and transparency.

The etc1 format for compressed textures does not save the alpha values - just RGB. So there can be a loss of information.

The image below is another screen capture from my Samsung Tab A (uses the etc1 format) with this "leaves" texture placed on a plane in front of a second blue plane - and there is transparency

It uses a simple workaround described in the first link above. In BJS a separate greyscale image in a etc1 format that represents the alpha channel is is loaded and used as the opacity texture for the material of the plane with the leaves.

The greyscale image can be generated automatically with the Mali GPU Texture Compression Tool (see first link for details). The only snag is that it creates the RGB and greyscale images upside down compared to the original image so the image will have to be "flipped" vertically before using the compression tool.

@V!nc3r : Next time I am in Staples/Bestbuy, I will test the Tab A - see if the latest ones work with astc or etc1

cheers, gryff

 

 

[JCPalmer]

21 hours ago, V!nc3r said:

Done, there's now an etc1 texture : https://github.com/Vinc3r/BJS-KTX-textures/tree/master/BJS

Is this work ?

[edit]

playground updated. Is there a way to have a permanent link to the last version of a playground scene ? example : babylonjs-playground.com/index.html#1SCH7H#last

Also, when I check v3.0 minified preview in BJS versionbuilder, all I got according to the console is v2.5, and ktx textures doesn't load. I had to dl babylon.js used by playground.

[/edit]

Remember, only the engine call is in 2.5.  It just did DTX in a way I have abandoned for KTX.  KTX is only in 3.0

[GameMonetize]

@V!nc3r I fixed the version builder

[hunts]

On LG Pad III it's using etc1 format

[r3dwolf]

Hello,

Is there a way to use somehow etc2 on unsupported devices?

[GameMonetize]

Unfortunately not directly. You will have to manually decompress the texture first using JS