[SOLVED] Possible to compress externally loaded textures?

[adkaros]

Hello!

I’m currently working on a project where I need to load external textures from a server (where new textures can be uploaded, removed).

No problem loading the textures, but one thing that has been instrumental in ensuring good performance has been texture compression, especially for iOS (sometimes needed to avoid crashes on certain devices). What options are available for compressing external textures? I saw these posts as I was searching the forum. It seems based on these posts below that it may be possible with .DDS files loaded from a hosting server that supports it? (does firebase storage or amazon buckets support this?)

Loading of compressed textures based on device

Hi all, Up until now I have been using uncompressed textures, but looking at the documentation it seems like using compressed textures will really help with vRAM efficiency. The issue is that while the in-editor compressed files work great, there is no documentation on how to load correct textures via my own JS. I can load a pvr or dxt file individually, but I can’t find any documentation on how the system Asset class loads AssetVariants class with the correct data via the constructor (or any o…

Texture Compression and reported file sizes

I think you might just be misunderstanding the meaning of the two numbers. The first is the download size (so the size of the texture when GZIPed). The second is the non-gzipped size. Note that our server (https://playcanv.as) is configured to serve DDS files GZIPed.

[will]

Simply compress your external textures to the Basis format. The Basis compressor tool is here:

Release v1.15 · BinomialLLC/basis_universal

You can then load them as shown in this engine-only example:

http://playcanvas.github.io/#graphics/texture-basis.html

[adkaros]

Awesome, will try this tomorrow, thanks!

[adkaros]

Hey @will do you know what settings were used for the demo you sent, when compressing? I’m using the following command and tried a few other listed on the basis github page

basisu x.png

I tried loading the output basis file from firebase storage and while I can see part of the texture, the UVs are off when applied to the model, I also tried dropping the .basis file right into the editor and loading it as an asset the same way, and the output ends up completely white and throws this error

WebGL: INVALID_VALUE: uniform1iv: no array

Will keep tinkering away but just wondering if I’m missing something obvious as it looked to work well in on those cubes in the playcanvas sample

[mvaligursky]

@slimbuck might know more on this one

[will]

You need to:

1. Ensure that the Basis WASM module is in your project. The easiest way to do this is to select any texture in your project, scroll to the COMPRESSION section in the Inspector, check ‘Basis’ and then hit IMPORT BASIS.
2. Write a script that loads your remote Basis file and apply it to a material. For example:

var FetchBasis = pc.createScript('fetchBasis');

FetchBasis.attributes.add('url', { type: 'string' });

// initialize code called once per entity
FetchBasis.prototype.initialize = function() {
    // Create an asset representing our remote Basis file
    const basisAsset = new pc.Asset(this.url.split('/').pop(), 'texture', {
        url: this.url
    });

    // Add the asset to the registry
    this.app.assets.add(basisAsset);
    
    // Handle the asset once it's downloaded and ready to be used
    basisAsset.ready((asset) => {
        const material = this.entity.model.material;
        material.diffuseMap = asset.resource;
        material.update();
    });

    // Issue the request to load the remote Basis asset
    this.app.assets.load(basisAsset);
};

This Basis file should work to test with:

https://playcanvas.github.io/static/assets/textures/sea.basis

[slimbuck]

Hi @adkaros,

You will need to include the -y_flip option to basis when compressing.

Thanks!

[adkaros]

That worked, thanks @slimbuck !