How to create .env texture file?

I tried to create an .env file by referring to the following document.

Creating a compressed environment texture

https://doc.babylonjs.com/how_to/use_hdr_environment

However, the latest Babylon.js Sandbox does not have a “Generate .env texture” button.
image

I would be glad if someone could give me some advice.

You must first drag&drop over your scene the prefiltered environment texture you want to use, then you will see the “Generate .env texture”.

By default now, the playground already uses a .env which can not be converted to .env. Only .dds can that is why you need to first drag and drop a .dds (prefiltered) on the sandbox to be able to see the button.

1 Like

@sebavan Thanks. When you drag and drop the DDS file as you say, the “Generate .env texture” button is displayed.

However, what I ultimately wanted to do was create an .env file from pure CubeTexture .
In that case, is it possible to generate .env file from Inspector?

Babylon can’t create prefiltered env map, you must use an external program for that, as described in the doc you linked above.

Once you have this prefiltered env map created (in .dds format), you can drag&drop it over your scene in the sandbox so that you are now enable to generate a .env file. A .env file is simply another file format used to hold a prefiltered env map, it is not a conversion process that would take your standard cube texture and would generate a prefiltered texture: the prefiltered texture must be created externally.

1 Like

@Evgeni_Popov Thank you for the advice. I have six jpg files (nx/ny/nz/px/py/pz.jpg) to generate CubeTexture. I want to convert this to an .env (or DDS) file, but I don’t know how to do it.
What tools should be used to convert?

Adding @PatrickRyan our in house artist to help on this :slight_smile:

2 Likes

I tried IBLBaker. I was able to convert a single file to a DDS file, but I didn’t know how to assign each of the six jpg files.

I have a repository that compares some WebGL libraries.

I’m trying to make a comparison using the same Skybox in each library, but using CubeTexture with Babylon.js takes a lot of time to display.

https://rawcdn.githack.com/cx20/gltf-test/bbf12738c79e20b554d9c996ceb80ca98670ea0c/examples/babylonjs/index.html?category=sampleModels&model=Duck&scale=1&type=glTF

So, Babylon.js wants to speed up by displaying Skybox with .env (or .dds).

The thing is you can not compare using .jpg in babylon or it will look pretty bad. We need the cube texture to be converted before for the roughness effect to be accurate.

Sorry, what does that mean?

Basically, a cube map is not directly consumable as an environment. It needs to be prefiltered. Babylon.js can not prefilter environment so if you use jpg it will act as an unprefiltered so the roughness which requires the prefiltered data will not work correctly.

https://seblagarde.wordpress.com/tag/prefilter-environment-map/

When using CubeTexture in Babylon.js, does that mean you should use .dds(or .env) instead of .jpg?

Definitely if you are using them as environment textures or reflection textures for PBR.

@cx20 I want to make sure that we are all starting with the same ground truth about our definitions of skybox, environment, and env file. Those are:

  • skybox: a low-dynamic range image (LDR) 8-bit image (or group of images for our skybox implementation) that shows the environment from each of the six projection directions either as a cross format cube map or individual files per face.
  • environment: a high-dynamic range (HDR) 32-bit image that contains values in R, G, and B that are outside the standard 0-1 range of 8-bit images and can contain values in the thousands. This file is saved as a pre-computed DDS file with mip maps that we assign to different levels of roughness for our PBR metallic/roughness lighting model. The important part of this is that the files is pre-computed with a package like Lys or IBLBaker. You will start with an HDR image that is loaded into one of these packages and the DDS will be computed with mip-maps and saved for you.
  • env: This is an LDR conversion of the environment DDS to save on the file size of a 32-bit image. The HDR values are converted into an RGBD format with a divisor stored in the alpha that allows us to determine where the pixel value is between the minimum and maximum value range. But the env file needs to have a precomputed DDS with every mip map necessary to represent our full range of roughness values. This playground illustrates each of the mip maps calculated in the DDS so that each sphere has the correct reflection of the environment. This method speeds up our rendering since we don’t have to calculate the specular lobe of the reflection from the surface, but rather just look up the corresponding mip texture.

From what I am reading you have six jpg files you are wanting to convert into a env for your scene. Please let me know if this is correct or if I am misreading the thread. I noticed you are using 6 jpg images as the source, but jpg does not allow for 32-bit values so calculating your DDS will produce poor results. You really need to start from an exr/hdr format so that you can push 32-bit values into the source image before calculating your DDS. And if you are starting from the six projection directions you will need to assemble them into a cube map like this:

For reference, you can always grab the source debug environment files from my GitHub for testing. But the main thing to note here is the order of the faces in your assembled cube map which is important for how the environment will be calculated. Lys will read a cube map and understand how each projection works, as is shown below with Lys converting the original cube map into a n equirectangular map.

The white in the default environment has a value of (3.0, 3.0, 3.0) so the environment is truly HDR. The source file was created in Photoshop, so you don’t need any specialized software to create an HDR file, just some sort of image editor that can set or convert values in the image. And I would work on your image already set up as a cross cube texture so that you make alterations to all faces at once if you are changing tones.

The issue that @sebavan was referencing earlier is the concern about LDR source images being converted to be used as an environment. There isn’t enough range above 1.0 in any channel to act as a light source, so it won’t look good. The best thing to do is to start with an equirectangular exr file which can be read by Lys or IBLBaker and compute your dds from there and then convert to env for size. If you don’t have an equirectangular available, assemble your images into a cross format cube map and then use Lys to compute and then convert. As far as I can tell, I don’t see a way for IBLBaker to read a cross cube texture… it only wants equirectangular formatted images.

From your last message it sounded like you might be thinking you needed to pass 6 DDS files instead of 6 jpgs, which isn’t what you want to do, but forgive me if I am reading that wrong. The path above is the best way to create your environment file. Please let me know if you have more questions.

3 Likes

I tried the following.

  1. Using Texassemble, create dds in CubeMap format from 6 jpgs
  2. Use CubeMapGen to read the dds file and execute “Filler Cubemap”

If the size is small, it could be generated, but it will take several hours to process it on my own PC that increases the size, so it has not been completed yet. .

Below are the details of the steps I tried.

  1. Using Texassemble, create dds in CubeMap format from 6 jpgs

texassemble.exe cube -o cube.dds px.jpg nx.jpg py.jpg ny.jpg pz.jpg nz.jpg

  1. Use CubeMapGen to read the dds file and execute “Filler Cubemap”

I don’t know if this is the right way. Anyway, it will take some time, so I’d like to check again after coming back.

@PatrickRyan Thank you for the detailed information. I haven’t caught up with it, so I’ll read it later.

1 Like

You could rely on iblbaker or lys which are almost instantaneous to create the prefiltered file from your assembled dds compared to the hours it would take here.

@sebavan the only caveat is that I can’t find a way to load a cube texture in cross format in IBLBaker. It seems to only want equirectangular images. So you would first need to find a way to convert to equirectangular first and then you can use IBLBaker. Lys can start with a cube texture in cross format or equirectangular but Lys isn’t free.

But Texassemble might be able to generate the right input ? or Lys to have the best quality for comparison :slight_smile: