[ENGINE ONLY] Basis texture compression

Help & Support
1

Hi all,

I want do add Basis texture compresson support to my project, I have added Basis already and
it is loaded as Module. But the texture (.basis file) is not loaded/added.

In general I use the same mechanism as the Editor export. So it is basically app.preload() which loads
the Assets from the config.json file.

If I set the texture to preload:true the app.preload() function “hangs”. If I set it to preload: false in the config.json it does load, but not show. No errors in the console though.

As I see in this expample:
https://github.com/playcanvas/playcanvas.github.io/blob/master/graphics/texture-basis.html

There is used app.assets.loadFromUrl() method used, not app.preload()
How this application of Basis texture is handled internally when app.preload() is used? Or has anyone an idea?

Thanks!

2

Can you show your config.json file please?

3 
"37461024": {
            "tags": [],
            "name": "sewerwall1_normal.jpeg",
            "revision": 1,
            "preload": false,
            "region": "eu-west-1",
            "meta": {
                "compress": {
                    "alpha": false,
                    "normals": true,
                    "dxt": false,
                    "pvr": false,
                    "pvrBpp": 4,
                    "etc1": false,
                    "etc2": false,
                    "basis": true,
                    "quality": 128
                },
                "format": "jpeg",
                "type": "TrueColor",
                "width": 1024,
                "height": 1024,
                "alpha": false,
                "depth": 8,
                "srgb": true,
                "interlaced": false
            },
            "data": {
                "addressu": "repeat",
                "addressv": "repeat",
                "minfilter": "linear_mip_linear",
                "magfilter": "linear",
                "anisotropy": 1,
                "rgbm": false,
                "mipmaps": true
            },
            "type": "texture",
            "file": {
                "filename": "sewerwall1_normal.jpeg",
                "hash": "1366a2b5f370c8512631456487faa57b",
                "size": 750623,
                "variants": {
                    "basis": {
                        "filename": "sewerwall1_normal.basis",
                        "hash": "790f30ddce6ed0f7f81d7206e460c91a",
                        "size": 366889,
                        "sizeGzip": 366846,
                        "opt": 8,
                        "quality": 128,
                        "url": "files/assets/37461024/1/sewerwall1_normal.basis"
                    }
                },
                "url": "files/assets/37461024/1/sewerwall1_normal.jpeg"
            },
            "i18n": {},
            "id": "37461024"
        },
4

Just looking at the engine source and asset preload goes through the same path as loadFromUrl https://github.com/playcanvas/engine/blob/f41f307f61f1423a57cb8efd4f00bd773d3b90eb/src/asset/asset-registry.js#L435

Do you have a hosted version of the project to look at? The main difference between your project and the example is the use of variants

1 Like
5

sure: https://github.com/isobolewski/playcanvas-vue
It could be also some issue with Webpack or how Basis is included, but I mainly did orient on the Editor export

6

Which sub project do I look at for basis?

image
image1596×764 87.8 KB

7

It is not online. This is master repo only. Just to show you how I do the stuff. You can use the Basic scene and add a texture to the basic.json and the asset to the config.

it is also needed by now to enable the preload option for the BASIS module in the settings.js file of the component

8

Basically I use this code:

/**
     * 	Load all assets in the asset registry that are marked as 'preload'
     */
    async doPreloadAssets(app) {
      app.preload(function(err) {
        if (err) {
          console.error('Preload Error: ', err);
        }
        // Trigger event when the app is configured and assets are preloaded
        console.log('Assets preloaded.');
        app.fire('app:configured');
      });
    }

Wenn the Asset is set to preload:true in config.json which is needed for BASIS to add it to the model in the scene then no callback is called it seems. Is there another param to rreceive in app.preload(function(err) else than err?

I see in chrome dev tools that the .basis file has been loaded. Does it matter that maybe the mime type is not correct?

9

I’m using the master branch but not sure how to look at your basis example in there?

Edit: Oh, you haven’t got an example in the repo

10

Sorry for being clumsy here :frowning: it is difficult to explain…
It seems that my code or whatever can’t handle this part of config.json an an asset

"variants": {
                    "basis": {
                        "filename": "sewerarchshort_normal.basis",
                        "hash": "2b852aea582903b160e36313550d8ea5",
                        "size": 361041,
                        "sizeGzip": 361001,
                        "opt": 8,
                        "quality": 128,
                        "url": "files/assets/37461048/1/sewerarchshort_normal.basis"
                    }
                },

I have for now this scene locally only, sorry. But all in all it it exactly the same as in Will’s Halloween example

11

It’s fine, I just need to create my own Basis texture to test with

1 Like
12

When I use the corresponding jpg and delete the variants in config.json it works.
So it is definetly a problem with the Basis compression or handling with this type of texture.

As said I do not know how do PlayCanvas apply the Basis library nor if it is maybe a webpack problem

13

Finally I was able to receive an error from playcanvas.js as I removed the variants object from the config.json and put the .basis file as url. But maybe this is due that I left the filename as jpg…

"37461048": {
            "tags": [],
            "name": "sewerarchshort_normal.jpeg",
            "revision": 1,
            "preload": true,
            "region": "eu-west-1",
            "meta": {
                "compress": {
                    "alpha": false,
                    "normals": true,
                    "dxt": false,
                    "pvr": false,
                    "pvrBpp": 4,
                    "etc1": false,
                    "etc2": false,
                    "basis": true,
                    "quality": 128
                },
                "format": "jpeg",
                "type": "TrueColor",
                "width": 1024,
                "height": 1024,
                "alpha": false,
                "depth": 8,
                "srgb": true,
                "interlaced": false
            },
            "data": {
                "addressu": "repeat",
                "addressv": "repeat",
                "minfilter": "linear_mip_linear",
                "magfilter": "linear",
                "anisotropy": 1,
                "rgbm": false,
                "mipmaps": true
            },
            "type": "texture",
            "file": {
                "filename": "sewerarchshort_normal.jpeg",
                "hash": "d377b48466b86b291483fcb874bf7b97",
                "size": 660175,
                "url": "files/assets/37461048/1/sewerarchshort_normal.basis"
            },
            "i18n": {},
            "id": "37461048"
        },

playcanvasErr

14

Hi angain and sorry to bother, but when I export a scene with the editor I get this bundled ZIP with a lot of files. When I run this locally using Live Server plugin in VS Code it works as expected. Where is this Basis js file (basis.wasm.js) instanciated? In case of Ammo I see that there is a AmmoLib, but I cannot find a BASISLib somewhere on the window object? Is it attached to pc or pc.Application.

In this example:

There is something like this:
pc.basisDownload(
‘…/lib/basis/basis.wasm.js’,
‘…/lib/basis/basis.wasm.wasm’,
‘…/lib/basis/basis.js’,
function () {

What is pc.basisDownload?
I cannot find it in the docs here:
https://developer.playcanvas.com/en/api/pc.html

15

Hi @yaustar, good news it is working now, it seems that I really have to use this:
pc.basisDownload() - It is not automatically detected when putting the files path in the module settings like this. Anyway thanks for your help and sorry to have bothered you much. Have a nice weekend!

1 Like
16

Interesting, we really should have an error about that when that happens