Using Compressed Textures - Now With A Playground!!!

[gryff]

I've been following this issue on and off - mainly through @JCPalmer's posts on various threads. There is also a tutorial on the BJS documentation site (written by JCP?) That tutorial gives a little bit of code  to let the .babylon engine know that compressed textures are available:

var available = ['-astc.ktx', '-dxt.ktx', '-pvrtc.ktx', '-etc2.ktx', '-etc1.ktx'];
var formatUsed = engine.setTextureFormatToUse(available);

But I have a couple of questions:

1. The BJS Blender Exporter will take the textures I have used in Blender (.png or .jpg usually) and the .babylon file created will include those pngs and jpgs. So will those two lines of automatically use a .ktx version instead - over-riding the .babylon file?

2. " The texture must be encoded with the Y-axis flipped ". Flipped so that is where the X axis was ie, 90 degrees, or mirrored on the Y axis?

3. Is the device being used automatically detected so that a low level compression format (etc1)will be used on certain processors but a higher level format (astc) be used where appropriate?

I've done some tests on compression with a simple tiling png texture (570kb) and compressed it using the Mali Compression Tool and the results are impressive - a .ktx file size of 129kb (etc1)

cheers, gryff

[JCPalmer]

1. Yes, at the last minute, a file name like "myfile.jpg" will get switched to say "myfile-pvrtc.ktx" for iOS.  This is happening just to the string of the file name to get.  Windows would probably be "myfile-dxt.ktx".

2. Basically, this generates an upside down texture.  The reason it is needed is image textures are flipped in the process of being uploaded to GPU by Engine.  Compressed images cannot be modified by the cpu, so this has to be done at the conversion or baking from image file to ktx file.  There is a checkbox in the PVRTexTool when encoding.  I did not include pictures of it in doc to be both tool independent-ish, & they said this might be changing.  Why this is done Engine, I have no clue.

3.  I might have left it off the doc, but given a machine has astc & etc1, engine will decide to assign astc automatically.  I did not want people to have to know all the formats & which was better, so I have engine do the deciding.

[gryff]

@JCPalmer; TY Jeff for the reply. I've been testing and thinking about this compression of textures and a some more questions:

1. The simple one first - what version of BJS is minimum for this? I have a test scene here and it does not work -  BJS2.5. Now maybe my coding is crap but I am getting "engine.setTextureFormatToUse is not a function"

2. Will it work with Skyboxes - they seem to require jpgs. I can't get .pngs to work

3. And there is no way that they will work in the Sandbox or Playground right ?

cheers, gryff

EDIT: Got the latest version of BJS 2.5 and my scene works now.So ignore Q1.  But that creates another question - is there anyway to tell that is is using the .ktx file? I tried printing out the material to the console but it seems to still refer to the original file - a png format.

Edit2: I tried sending the variable formatUsed to the console with :

console.log("Texture Type = " + formatUsed);

but it returns null

[V!nc3r]

I don't know if this can be useful to someone, but I put it here : https://www.nothing-is-3d.com/dl/babylonJS/KTXtextures/

This is just a test scene to see what type of texture is loaded on the hardware.

[edit] weird, when I load my scene locally (with easyphp) on windows 10, I have a dxt texture ; but on my ftp it's only png which is load Where I'm wrong ? [/edit]

[edit2] added a download link for sources[/edit2]

[edit3] upgrade to bjs 3.0 alpha to make it works [/edit3]

Edited March 17, 2017 by V!nc3r

[BitOfGold]

It loads png (win10 in chrome, FF, Edge, Opera)
Can it load astc?

I see now, I have a Nvidia GTX-970, and it is only supported on Nvidia Tegra. Maybe.
Does this work for anyone on a desktop, and if it does, what is your GPU?

 

[JCPalmer]

This is a 3.0 feature.  That nothing-is-3d site launches 2.5 according to the console.  Might be your issue as well.  DXT / S3TC is old as dirt.  The patent on it expires on October 2, 2017, I would be shocked if anyone doing webgl would be running something which did not have it.  Only the framework for it is implemented on 2.5.  Might be your issue as well @gryff.

ASTC can run laps around it, but Apple really needs to expose it before most people have the hardware to use it (A8 cores & up).  I have a NVidia GTX 1050 on my desktop, and it still not supported.  There is a more powerful model, but this exceeds my needs, it is really short, and requires NO additional power connections.  $130.

I have made the changes to handle skybox textures, but have not tested that.

From a sandbox standpoint, the limits with that "crossover stuff" applied to both image & compressed textures.  So if a compressed texture should work from the same place as a jpg.

Null is a valid response, but I only expect it to occur on either very old phones (my Galaxy S3 has etc1), or people trying to use it with 2.5.

[V!nc3r]

Erf, n00b mistake, now it works with bjs 3.0

[BitOfGold]

Cool, now it shows DXT!

[gryff]

@V!nc3r : Thank you for posting that really useful demo and updating to BJS 3.0 - good to know I was not going mad

I will post my results in a while as all my tests, bar one, were done with the old BJS2.5.

@BitOfGold The one I have done since the BJS update

Desktop PC : Windows 7, NVidia 1060, Firefox 52 - DXT

More later.

cheers, gryff

 

 

[gryff]

28 minutes ago, JCPalmer said:

Only the framework for it is implemented on 2.5.  Might be your issue as well @gryff.

Looks like it Jeff. As it now seems to work on my Windows 7 desktop.

cheers, gryff

[GameMonetize]

Good news

[gryff]

@Deltakosh: Can the BJS tutorial be updated to indicate that BJS 3.0 is the minimum? (To save people going the madness I went through )

And perhaps use @V!nc3r's code as an example?

cheers, gryff

 

[GameMonetize]

Done

 

@V!nc3r do you mind creating a PG so I can reference it from the doc?

[JCPalmer]

I also need to pull out ATC format.  Google is trying to ditch it at Khronos.  I cannot fined a ktx converter to support it anyway.  It has not been a priority, though ripping out 4 or 5 lines out of engine & that doc is not difficult, assuming you know which lines.

As 2.6 turned to 3.0, seems like it will not be production for a while.  Except for making this, I have stayed well away from 3.0.  Once the feature set is complete many people are going to need to do extensive testing.  Apple & Google also really need to put out their WebGL 2.0's.  Not waiting for them (assuming that they are not too far) or we might need a really fast 3.1.

[gryff]

@V!nc3r : an update on my devices and your test scene.

Done with Firefox Latest version

Windows 10 Laptop, Windows 7 Desktop, Windows XP Desktop ( yeah I know) - dxt

Samsung Tablet Tab A - Chrome - png.

Which leads me to a question. I have been using the Mali Compression Tool (link above) but it does not create a .dxt image. I downloaded the PVRText Tool yesterday but can't figure out what settings to use for creating a dxt type file. Any help - much appreciated.

cheers, gryff

[JCPalmer]

This part of the problem with DXT.  There are multiple sets of names for it: dxt & bc.  The tutorial states:

DXT support is done with 'BCx' names. (Better UI design for WebGL has been requested.)   The BC version would depend on whether alpha was needed or not.

[gryff]

@JCPalmer : Thanks Jeff   I will investigate further this evening.

Nothing like making it simple BC1-7 and DXT1-5

Also I've seen something called WebP which I guess originates from Google. Feels like a bunch of dogs fighting over a bone for the best alternative to png and jpg

cheers, gryff

[V!nc3r]

On 17/03/2017 at 6:09 PM, Deltakosh said:

Done

 

@V!nc3r do you mind creating a PG so I can reference it from the doc?

I've no idea how to link external texture references on the playground, and where to put setTextureFormatToUse before the scene loading If someone can help

[gryff]

@V!nc3r: can you not use github in someway?

cheers, gryff

[V!nc3r]

Ok so I put all stuff here : https://github.com/Vinc3r/BJS-KTX-textures

Is that correct or is this confirm that I don't know how to use github  ?

[gryff]

@V!nc3r and @Deltakosh :How about this for a playground:

Image Compression Playground

It uses V!nc3r's images from his github site

Successfully loads the "-dxt.ktx" version of the image on my Windows machines

cheers, gryff

[GameMonetize]

Reallllly cool!

Thank you so much @gryff

https://github.com/BabylonJS/Documentation/blob/master/content/tutorials/02_Mid_Level/Multi-Platform_Compressed_Textures.md

[gryff]

Although I have the compressed file working - and my madness seems to be over - I continue to explore using compressed textures. So an update.

In @V!nc3r 's set of images, he used a basic starting .png that was an indexed .png file and it has only 52 colours which makes it quite small (Photoshop describes it as Png-8). In fact it is smaller than the compressed file size. So I wondered what the difference would be if the imaged being compressed had a lot more colours than 52. A comparison of an indexed png file and a compressed ktx file made from the same starting picture

The red boxes show where the Png-8 compression causes obvious "blotchiness" compared to the -dxt compression done in PVRTexTool.

With a larger image view there is blotchiness on the fabrics and dog's legs. (The dog is Tokyo - my Blender helper .)

Png-8  : 573kb (1024x1024px)

-dxt.ktx : 683kb (1024x1024px)

So Png-8 still slightly smaller but quality poorer and of course the Load->CPU->GPU path.

cheers, gryff

 

[BitOfGold]

How big is an avarage 1024x1024 DXT texture compared to the same in jpg?

I found this today:
https://www.npmjs.com/package/dxt-js

I'm thinking of using this tho load small jpeg on desktop, and compress them to the GPU.  (Instead of loading dxt)
It is fast.
My only problem is that it requires browserify so its a 600k javascript...
Maybe it does not worth it, if the (network) file size difference is not big.
 

[BitOfGold]

Also there is tinypng, and that makes pretty small 8-bit png -s with alpha... For some of the textures (low frequency only) it is smaller than every other.