Environment map compatibility

TheHOF · October 12, 2021, 7:44am

Hi everyone,

I frequently use the “Generate .env texture” function within the sandbox to convert .hdr files into .env.

Now it seems like the sandboxs BabylonJS version has been updated to 5.0.0-alpha.50.
As a result, the environment map, that gets generated by the mentioned sandbox functionatliy, has also been updated to version 2.

Unfortunately this new environment format is not compatible with versions pre V5 anymore, which is a bit problematic if you don’t want to use pre-release version in your viewer.
The latest stable version of BabylonJS is 4.2.0 at this point.
I get the following error:

I am aware that there are other possiblities to use hdr textures, but the sandbox functionality was very handy until now.

So my questions are:

Is there a possiblity to create .env files within the sandbox, which are compatible with the latest stable BabylonJS version (4.2.0)?
Is it possible to open the sandbox with a different BabylonJS version as a whole?

I am a bit curious about the compatibility of the sandbox functionalities in general.
I understand that the sandbox is “only” a viewer tool and nothing will break when updating the BabylonJS version, even if it’s a pre-release version.
But on the other side there are also “export” functionalities, which need to be compatible with the BabylonJS version of the consuming project.

So what would be the suggested workflow for consuming projects, if they want to use the sandbox “export” functionalities (like “Generate .env texture”), but don’t want to upgrade to each pre-release version that the sandbox uses?

Best regards

sebavan · October 12, 2021, 12:52pm

In your case I d suggest to generate it by code which is the simplest ?

The code is basically this:

scene.environmentTexture = new HDRCubeTexture(path, scene, 256, false, true, false, true);
EnvironmentTextureTools.CreateEnvTextureAsync(
            scene.environmentTexture as CubeTexture)
            .then((buffer: ArrayBuffer) => {
                var blob = new Blob([buffer], { type: "octet/stream" });
                Tools.Download(blob, "environment.env");
            })
            .catch((error: any) => {
                console.error(error);
                alert(error);
            });

In the mean time, I agree it is pretty annoying and I ll try to think about a way to generate compatible version.

RyanY · December 14, 2021, 2:54am

Hi sebavan,

I wrote a js tool following the code and it successfully generates the env file from the hdr file

      //init engine
     new BABYLON.Engine(canvas, true, {
         premultipliedAlpha: false, preserveDrawingBuffer: true, stencil: true,  disableWebGL2Support: false
       });

        //code for convert hdr to env
         var path = "xx.hdr";
         scene.environmentTexture = new BABYLON.HDRCubeTexture(
           path,
           scene,
           256,
           false,
           true,
           false,
           true
         );
         BABYLON.EnvironmentTextureTools.CreateEnvTextureAsync(
           scene.environmentTexture
         )
           .then(function (buffer) {
             var blob = new Blob([buffer], { type: "octet/stream" });
             BABYLON.Tools.Download(blob, "environment.env");
           })
           .catch(function (error) {
             console.error(error);
             alert(error);
           });

with some warning messages

[.WebGL-00003B1C000A2900] GL_INVALID_FRAMEBUFFER_OPERATION: Framebuffer is incomplete: Attachment has zero size.

The point is that the effect of the env file is completely different from the sandbox effect.

It took some time, but no idea! Please help me take a look!

Best regards!

sebavan · December 14, 2021, 10:32am

Can you create a repro in the playground ? should be your code using any hdr file ?

RyanY · December 14, 2021, 4:42pm

Hi sebavan,

below is the link for playground
convert hdr to env | Babylon.js Playground (babylonjs.com)

I also create sample in JSFiddle:
JSFiddle - Code Playground

Best regards!

sebavan · December 14, 2021, 5:07pm

Thanks a lot we ll have a look ASAP, sounds like a regression to me

sebavan · December 14, 2021, 5:22pm

Thanks to @Evgeni_Popov the issue has been found, your texture needs to be ready to be used in the generation function: https://playground.babylonjs.com/debug.html#U3C33M#4

Do you want to create a PR for adding a warning to make it easier to troubleshoot ?

RyanY · December 14, 2021, 7:49pm

Hi sebavan,
Thank you for your timely reply!
When I try to run it locally, I get error

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'addOnce')

for

scene.environmentTexture.onLoadObservable.addOnce

I’m using Babylon.js v4.2.0 - WebGL2 - Parallel shader compilation

Best regards!

sebavan · December 14, 2021, 7:50pm

ohhhh right in 4.2, you could check if the environmentTexture.isReady() ? before doing it ?

RyanY · December 14, 2021, 8:15pm

I tried below code, looks not work

          while (true) {
            console.log(scene.environmentTexture.isReady());
            if (scene.environmentTexture.isReady()) {
              BABYLON.EnvironmentTextureTools.CreateEnvTextureAsync(
                scene.environmentTexture
              )
                .then(function (buffer) {
                  var blob = new Blob([buffer], { type: "octet/stream" });
                  BABYLON.Tools.Download(blob, "environment.env");
                })
                .catch(function (error) {
                  console.error(error);
                  alert(error);
                });
              break;
            }
          }

Evgeni_Popov · December 14, 2021, 10:33pm

You should not use an active loop like that but more something in the line of:

const checkIt = () => {
   if (scene.environmentTexture.isReady()) {
       ...
    } else {
        setTimeout(checkIt, 10);
    }
};
checkIt();

warning: code not tested!

sebavan · December 14, 2021, 10:36pm

or with engine.runRenderLoop

sebavan · December 14, 2021, 10:38pm

https://playground.babylonjs.com/debug.html#U3C33M#5

RyanY · December 15, 2021, 12:31am

Hi sebavan,

Thank you very much, the code runs well, but the effect totally different with sandbox. looks darker than sandbox

I’m new user, cannot upload screenshot…

Best regards!

sebavan · December 15, 2021, 2:26am

It looks totally the same for me, that sounds strange, we d need a repro for it.

RyanY · December 15, 2021, 4:12am

Hi sebavan,

Here is the effect of the env file after conversion using hdr

Here is the effect of put hdr to sandbox

attached hdr file
14.zip (1.4 MB)

sebavan · December 15, 2021, 9:59am

It looks similar has you have a box so normals are only pointing up. Could you try on a sphere instead ?

RyanY · December 15, 2021, 5:56pm

Hi sebavan,

here is screenshot with object

Also attached tool and hdr file, could you please help me take a look!
envTools.zip (1.4 MB)

Best regards!

sebavan · December 15, 2021, 6:31pm

Please create a repro in the playground, this is really hard to troubleshoot from pictures only

RyanY · December 15, 2021, 7:35pm

Hi sebavan,

Never mind, it works good now. My configuration problem

Best regards!

Topic		Replies	Views
I am getting an error when loading a .env generated inside the Babylon sandbox Questions environment	2	446	December 22, 2021
Error Unsupported babylon environment map version 2 Questions	1	439	February 24, 2022
.env conversion from .hdr throws an error Questions	10	1147	March 30, 2022
Sandbox environment texture creation process Questions	4	594	September 24, 2021
.env conversion from .hdr throws an error due to sandbox.babylonjs.com version Questions	3	743	November 30, 2021

Environment map compatibility

Related Topics