How to create .env texture file?

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.

5 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:

I haven’t used Texassemble, but it appears to output an h-cross format cube map, which can be read by Lys but not IBLBaker unless I am missing something. There would need to be a step to convert the h-cross into an equirectangular with the polar coordinate distortion at the top and bottom like this:

Then IBLBaker can read the file and create the precomputed environment without issue.

I was trying to create a dds file from jpg but realized that it was not correct.
However, the HDR source for the skybox texture could not be found.
Therefore, I want to find the HDR source from others.

I will try to find the HDR file from below.


http://www.hdrlabs.com/sibl/archive/

2 Likes

I noticed a gltf-test issue, so I added it as a new issue.

1 Like

I decided to create a DDS file using the following HDR file and IBLBaker. Probably the same as the default texture of IBLBaker.

@PatrickRyan Please let me know if you know.
When IBLBaker saves a texture in DDS format, the following files are generated.
Which DDS file should I use for Babylon.js CubeMap and IBL? Should I use papermillEnvHDR.dds?

No File Name File Size
1 papermillBrdf.dds 1,310,848
2 papermillDiffuseHDR.dds 1,966,208
3 papermillDiffuseMDR.dds 491,648
4 papermillEnvHDR.dds 33,554,624
5 papermillEnvMDR.dds 8,388,752
6 papermillSpecularHDR.dds 33,554,624
7 papermillSpecularMDR.dds 8,388,752

would be the one if I remember correctly.

1 Like

Thank you for teaching me. Let me ask you one more question.
Which is true or false for cubeTexture.gammaSpace? I feel that false is correct, but I am not confident.

image

image

false as it is in linear space :slight_smile:

1 Like

Thank you very much. I have updated the gltf-test sample.
I think that loading became faster and came to be displayed beautifully.

https://rawcdn.githack.com/cx20/gltf-test/fca9823d919ed96dd7798466fe6ad8509be94cd0/examples/babylonjs/index.html?category=tutorialModels&model=BoomBox&scale=80&type=glTF