[SOLVED] Webp images as textures

Help & Support
1

Good afternoon guys,

How can i use Webp file extension as texture for my models?
I have a system that depends on loading time and it will very important for decrease the size of my images

2

The first problem is that the Editor does not have .webp as a recognized image format. If you upload one, the Editor interprets it as a binary asset, not a texture asset.

Additionally, the engine’s image resource handler cannot currently handle webp images. If you do something like:

app.assets.loadFromUrl("brick.webp", "texture", function (err, asset) {
    if (err) {
        console.error(err);
    }
});

It will print:

Error loading Texture: format not supported: '.webp'

It’s because of this line in the sourcebase:

Just need to add || (ext === '.webp') there.

But you should be able to do something like:

var app = this.app;
var image = new Image();
image.onload = function () {
    var texture = new pc.Texture(app.graphicsDevice);
    texture.setSource(image);
};
image.src = 'path/to/brick.webp';

I’ve added a GitHub issue about this in case you want to track progress.

2 Likes
3

Working! I’ve tried to create the objects manually Image -> Texture -> Asset, but was conflicting with my code, so i override the function that block the Webp format. It isn’t the best solution but is only until the issue at GitHub to be solved.

Thanks for the help again!

1 Like
4

In 2023,

It’s as simple as adding

pc.Http.ContentType.WEBP = 'image/webp';

before you try to load webp as a texture.

1 Like