[SOLVED] Webp images as textures

derickwelman · October 17, 2018, 5:39pm

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

will · October 18, 2018, 1:06am

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:

github.com

playcanvas/engine/blob/master/src/resources/texture.js#L219


        responseType: "arraybuffer"
    };


    pc.http.get(url, options, function (err, response) {
        if (!err) {
            callback(null, response);
        } else {
            callback(err);
        }
    });
} else if ((ext === '.jpg') || (ext === '.jpeg') || (ext === '.gif') || (ext === '.png')) {
    image = new Image();
    // only apply cross-origin setting if this is an absolute URL, relative URLs can never be cross-origin
    if (self.crossOrigin !== undefined && pc.ABSOLUTE_URL.test(url)) {
        image.crossOrigin = self.crossOrigin;
    }


    // Call success callback after opening Texture
    image.onload = function () {
        callback(null, image);
    };

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.

derickwelman · October 18, 2018, 7:14pm

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!