Multi-platform Compressed Textures for BJS

[JCPalmer]

You may take advantage of graphic hardware supported textures on ANY chip architecture!  Most of my effort went into adding formal documentation, so I will not repeat my self here.   The page has not shown up yet.  Will update with link when it does.

Upshot is in order to take advantage of compressed textures, you have to know which compressed texture format(s) your gpu supports.  If you pick one, all other hardware will not run your scene.  Along the way of putting this in, a fall back was added for .DDS files with Direct X, dxt, textures, when not running on Windows browsers.  This is much better than that though.

For testing purposes, I made a version of the Mansion demo, where based on your hardware, a different compressed format is used.  There is also a separate page where this was not enabled.  I did not see any performance difference between these two on my hardware.  Though the scene uses 105 textures, almost all are much smaller than 2k.  Do to textures being multi-dimensional, space requirements explode as textures get bigger (up to 4k).  A scene with a bunch of bigger textures would probably show much more of a difference.

Enjoy.

EDIT:  Here is the url as viewed from Github (hope formatting will be same on BJS doc site) https://github.com/BabylonJS/Documentation/blob/master/content/tutorials/02_Mid_Level/Multi-Platform_Compressed_Textures.md

[ozRocker]

Multi-platform?  Does this include iOS?

[JCPalmer]

Yes.  All iOS chips support PVRTC.  Those A8 and above, I am pretty sure also support ASTC.  Safari and WKWebView are not exposing ASTC yet though.  Run mansion demo on your iPhone/Pad.  It will show it to be using PRVTC.

[ozRocker]

This won't run for me.  I get Javascript errors on Chrome with Windows 10 desktop.

[JCPalmer]

A ERR_SSL_PROTOCOL_ERROR is probably not to do with anything I can control.  It is just a demo anyway.  Does it do this to all your browsers. iOS machine?  Once the .babylon file fails to download, crash is certain to follow. 

I tried Chrome / Firefox / Spartan all on Windows 10, they all used the DXT version of textures.  I do get a 404 on favicon.ico too.  That's because I did not make one.  Think it is dumb idea for Chrome to "require" one.

[ozRocker]

20 hours ago, JCPalmer said:

A ERR_SSL_PROTOCOL_ERROR is probably not to do with anything I can control.  It is just a demo anyway.  Does it do this to all your browsers. iOS machine?  Once the .babylon file fails to download, crash is certain to follow. 

I tried Chrome / Firefox / Spartan all on Windows 10, they all used the DXT version of textures.  I do get a 404 on favicon.ico too.  That's because I did not make one.  Think it is dumb idea for Chrome to "require" one.

It works on my Surface Pro.  I think its just an issue with my desktop installation of Windows.  I'm using Insider Preview and I have a very dodgy version running which seems to interfere with network connectivity.

I'm trying to use PVRTexTool.  I have a .JPG file with 100% quality that is 2,112KB in size.  Dimensions are 4096 x 4096.  When I encode in PVRTexTool with "Fastest (Development Quality), Generate MIPMAPS, Vertical Flip, openGL, PVRTC 2bpp RGB, linear RGB" I end up with a .KTX file that has a degraded quality (obviously 'cos compression is set to "fastest") but with filesize 5,462KB.  How come this is bigger than the 100% quality JPG?  If I set to best quality its over 8MB

 

Edit:

Ok, I read up on PVRTC compression and learnt that it saves space in RAM but not necessarily on disk

[JCPalmer]

Yes, also a compressed texture has all of the mip maps.  For 4096 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

A lot more than 5,462 kb. The really good thing about compressed textures is the RAM size is equal to the file size - about 50 bytes for KTX header info.  You could copy all files of certain type to a separate dir, then just calculate the texture ram required an entire scene, using folder properties.

BTW, when you said best quality is over 8MB, you mean you changed to PVRTC 4bpp, right?  I have not noticed that the size of the file changes when you change how much time to use to pick the values to use.

[ozRocker]

Hmm...I don't know where I got 8MB from :/

I just checked my 4096 x 4096 texture.  Its 5,462 kb for fastest or best quality using 2bpp.  Its 10,923 kb using 4bpp.

5,462 kb is a killer though, especially if I have 2 of those (diffuse and normal map).  Fine for app downloads but I couldn't convince a business to switch to 3D websites if people have to download that on a mobile device on a 4G network.  I'll have to experiment with different texture sizes (2048, 1024) to see if I can find a suitable trade-off.

Does the web server automatically GZip these textures? that'd help a little bit 

 

Edit:

I added to the list of compressed file types to the apache.conf file and it did get reduced a bit

AddType application/babylon .babylon
AddType image/ktx .ktx

AddOutputFilterByType DEFLATE application/babylon image/ktx text/html text/plain text/xml text/css text/javascript application/javascript

 

[ozRocker]

I've been playing with this a fair bit.  I think you have a spelling error in this line:

var available = ['-astc.ktx', '-dxt.ktx', '-pvrtc.ktx', '-etc2-.ktx', '-etc1.ktx'];

Should it be "-etc2.ktx"?  That also appears in your code. 

I can't seem to get an ASTC file.  I'm using the batch files to create the compressed textures.

This line here from ktx-files.bat doesn't do anything:

PVRTexToolCLI.exe -i %1 -flip y -pot + -m -f ASTC_8x8,UBN,lRGB -q %quality% -shh -o %2-astc.ktx >junk.txt

It doesn't matter if I remove the redirection to junk.txt.  No file is produced.

[JCPalmer]

Thanks, I have corrected that in demo.  Will get it into the documentation (also have another problem in Docs (I get this contents thing, which is ok, but all my headings are gone.  Why?  Maybe @Temechon, or @Deltakosh)

As far as ASTC encoding, you need to actually get a drop-in from ARM.  I did mention to look at section 1.2.1 of PVRTexTool documentation, but probably should have put the link to manual and astcenc.exe.  Basically, the program needs to be downloaded and put on the path.  Remember, ASTC is not yet exposed on iOS yet, or anywhere else yet AFAIKT.

[JCPalmer]

Ok, fixed doc & added links.

[ozRocker]

Thank you so much @JCPalmer   This is a big deal for me because I'm trying to earn a living off webGL and I realise that the majority of people now surf the net on their mobile devices.  I really appreciate what you've done here