Support WebP for .env maps

I wonder if we couldn’t support using WebP as the image format used inside of .env files, at least optionally instead of PNG?

The motivation is to keep the file size at a much lower level. Trying to get the bundle size of a JS app down to just a few hundred KBs only to load a 3MB .env on the first render is, uh, a bit disappointing.

I believe PNG is quite poor at compressing photographic image data (as opposed to illustrations and the like). This is true in comparison with JPEG, and even more so in comparison to more modern formats like WebP, which even outperforms JPEG. (see e.g. AVIF has landed - JakeArchibald.com)

And so far I have not seen any technical reason why it shouldn’t be feasible. It does support transparency, which is needed to somehow encode the HDR data, right? It has wide support among browsers, with only IE (which we don’t care about anyway) lacking support. It has support for lossless as well as lossy compression (which should yield much better results than encoding a lower res image as lossless PNG, if you need to pass that size budget).

Am I missing something? If not, and it’s “just” that someone needs to do it, then I might be able to take a stab at it…

Yup I am definitely for it, would you want to make a PR for it ?

The main issue is could toDataURL and toBlob from a canvas encode into webp which I am totally not sure at the moment ?

I just tried it out quickly, by opening a random playground, getting the <canvas> and calling .toDataURL('image/webp'), and it seems to work fine (in Chrome at least).

This is what I got:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfwAAARwCAYAAAAPGOYXAAAAAXNSR0IArs4c6QAAIABJREFUeF7t1QENAAAIwzDwbxofrDh4T/IdR4AAAQIECLwX2PcJBSRAgAABAgTG4HsCAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQOCdPhAAAPhklEQVQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgYfD9AgAABAgQCAgY/ULKIBAgQIEDA4PsBAgQIECAQEDD4gZJFJECAAAECBt8PECBAgACBgIDBD5QsIgECBAgQMPh+gAABAgQIBAQMfqBkEQkQIECAgMH3AwQIECBAICBg8AMli0iAAAECBAy+HyBAgAABAgEBgx8oWUQCBAgQIGDw/QABAgQIEAgIGPxAySISIECAAAGD7wcIECBAgEBAwOAHShaRAAECBAgcxM8EcdI5fT0AAAAASUVORK5CYII=

Which when opened in a browser shows a perfect image.

This is what MDN docs say:

Chrome also supports the image/webp type.

Full cross-browser support is not necessarily required, as this is only needed for the encoding part, i.e. supporting Babylon.js Texture Tools, and not when an already existing .env is consumed, right?

1 Like

Yup this is perfect !!! I did not know they supported it already

I think one of the problem is that the data are rgbd encoded in the .env file. If using webp, we must make sure the encoding we choose will be compatible with this rgbd encoding.

If using webp, we must make sure the encoding we choose will be compatible with this rgbd encoding

Not sure I follow this, but I am not an expert here, so I might totally miss something essential.

But isn’t the image format basically agnostic of what data we push into it? Like we are “misusing” the alpha channel to encode this HDR multiplier/divider, right? But as long as the image format supports 8-bit alpha (which webp does), and as long as we are consistent (when encoding and decoding that RGBD data), we should be good, not?

Yes, what I meant is that if we use lossy compression it might lead to “wrong values” (meaning two r/g/b/d values that are close to each other are not close anymore after compression/decompression) as I don’t think the algorithm is expecting that the alpha channel is a divisor for the r/g/b components. The algorithm is probably expecting that the 4 channels are similar (or that the a channel is an alpha channel).

Ok, got you. Makes sense. But given we keep using PNG as a default for BC, and let the user opt into WebP with lossless compression by default (I think that’s what we will get when passing encoderOptions as 1 when calling toDataUrl), and only as an additional opt-in step let the user pass a quality < 1, then we should be good, right? Then it’s up to the user to find the best settings for the use case.

In our case currently we have an intentionally quite blurry env map, where lossy compression even when applied to the divisor might (hopefully) not have a meaningful effect. But that’s up for experimentation…

would you want to make a PR for it ?

Yeah, I am happy to reserve some of my OSS time for this. As I have you guys here, what needs to be done is:

  • for the encoding part, add additional (optional) config options to CreateEnvTextureAsync, allowing to specify the image format and quality, with PNG still being the default
  • for decoding, make the environmentTextureTools accept also other image types than png. Probably we need to put the image type into the json manifest for easier retrieval?

Anything else I should be aware of?

Then I think in a separate PR we should also make the IBL Texture tool support this new feature for encoding .env files! I found only this: Website/build/tools/ibl at master · BabylonJS/Website · GitHub. But this seems to be compiled JS code, where can I find the actual source code?

Yup the steps sounds perfect :slight_smile:

About the tool, it is directly part of the inspector project: you can see it in toolsTabComponent.tsx

Ok, thanks for the feedback! Hope I can work on the PR next week or the week after.

1 Like

Thanks a lot and no rush :slight_smile:

For the record, this is the PR: Support WebP in environmentTextureTools by simonihmig · Pull Request #11102 · BabylonJS/Babylon.js · GitHub

2 Likes