Embeddable / base64 Environment Textures, including .env

JCPalmer · October 28, 2020, 1:24pm

Having this would help in couple use case:

1- Inclusion in .babylon file just like regular textures can.
2- Where certain meshes need to have their own environment separate from whatever the scene may have. Example:

I have a code base which is a mesh based GUI sub-system that has had many incarnations. While I am currently planning to use it as a cross-wrist summon-able portal for webXR, see demo video, I can also use it to generate animate-able, 3D credits.

When creating credits using StdMaterials & a light which follows the camera, things seem less than commercial quality:

In PBR, using studio256.env, it looks very good from certain angles (but too bright), & dead at others.

It is clear there is no stock env which is going to be acceptable. The studio texture by @PatrickRyan being ported to Blender is a good starting point (maybe being inside a ring or box where the walls are well lit, but slightly varying, and darker ceiling & floor would be good). Being able to pack the env directly into the source code is far less clunky. for inserting the module into multiple scenes.

Evgeni_Popov · October 28, 2020, 5:31pm

I guess it’s already possible to do it as in the nme you can embed a .env file as a static resource for a cube texture.

Save this material in .json and you will see the base64 encoded data in the file:

JCPalmer · October 28, 2020, 5:48pm

I’ll have to look at this. One thing unrelated is the base64 string is there twice, once as the url, and a 2nd time as the name. Not sure who does that, seems just a little long.

JCPalmer · October 28, 2020, 7:46pm

Ok, I have spent some time looking at CubeTexture.ts. If the url in the constructor can be a data string, I think I can also just use that as the first arg of the BABYLON.CubeTexture.CreateFromPrefilteredData() call I am using in my code.

For a .babylon, inline textures for materials are done with the base64String item. When specifying a file for the scene.environment,it looks like it could be replaced with a data string if it is a .env, since either the CubeTexture constructor or CreateFromPrefilteredData() is called.

github.com

BabylonJS/Babylon.js/blob/master/src/Loading/Plugins/babylonFileLoader.ts#L130


var log = "importScene has failed JSON parse";

try {

    var parsedData = JSON.parse(data);

    log = "";

    var fullDetails = SceneLoader.loggingLevel === SceneLoader.DETAILED_LOGGING;



    var index: number;

    var cache: number;



    // Environment texture

    if (parsedData.environmentTexture !== undefined && parsedData.environmentTexture !== null) {

        // PBR needed for both HDR texture (gamma space) & a sky box

        var isPBR = parsedData.isPBR !== undefined ? parsedData.isPBR : true;

        if (parsedData.environmentTextureType && parsedData.environmentTextureType === "BABYLON.HDRCubeTexture") {

            var hdrSize: number = (parsedData.environmentTextureSize) ? parsedData.environmentTextureSize : 128;

            var hdrTexture = new HDRCubeTexture((parsedData.environmentTexture.match(/https?:\/\//g) ? "" : rootUrl) + parsedData.environmentTexture, scene, hdrSize, true, !isPBR);

            if (parsedData.environmentTextureRotationY) {

                hdrTexture.rotationY = parsedData.environmentTextureRotationY;

            }

            scene.environmentTexture = hdrTexture;

        } else {

For a native to Blender environment file that also works with us, a HDR, a HDRCubeTexture is needed. It is a subclass of BaseTexture, so not sure about this case.

Evgeni_Popov · October 28, 2020, 7:55pm

Normally, passing base64 encoded data as the url parameter of the texture constructors should work (with the data:XXX syntax).

Mercurio · November 12, 2020, 2:44pm

HI @Evgeni_Popov, i’ve tried to use .env base64 encoded. But seems not to work.
I’ve followed your instruction, saving json from nme and then copy and paste the base64 string.
For testing i’ve used this playground 've found: https://www.babylonjs-playground.com/#IH5G0H#7

Where do i mistake?
Thanks

Evgeni_Popov · November 12, 2020, 3:18pm

You need to instruct the CubeTexture constructor that the data you pass are a .env file by setting the forceExtension parameter to .env:

https://www.babylonjs-playground.com/#IH5G0H#11

Mercurio · November 12, 2020, 3:30pm

Great!! thank you.

Mercurio · January 18, 2021, 3:59pm

Hi @Evgeni_Popov, i resume this old post.
I had succesfully loaded the base64 embedded .env file. But, i can’t include in my project files too big. So the quality of the background scene is not so good. Is there another way to insert a background? I think that the 6 picture skybox would be perfect, but it can’t be done with base64 embedded file (this is the only way i can do it due to CORS policy).
What do you suggest?
Thank you in davance.

Evgeni_Popov · January 18, 2021, 4:26pm

Using base64 for 6-files skybox is possible:

https://www.babylonjs-playground.com/#IH5G0H#12

Mercurio · January 18, 2021, 6:09pm

Perfect! I’ll give it a try!
Thanks

Mercurio · January 19, 2021, 9:38am

@Evgeni_Popov It works like a charm! Thank you