How to create custom PBR environments?

Hi all!

I’ve been wondering about the workflow which is used to create .dds or .env file that can be consumed by BabylonJS?

What we are specifically looking for is an as-compact-as-possible map format that can be used for Babylon’s PBR / IBL rendering. Is there a documentation somewhere on how to create Babylon-ready .dds / .env / … files for this purpose?

We have been checking the docs and found this great compilation of resources, including environment maps in different formats:
https://doc.babylonjs.com/resources/playground_textures#cubetextures

There seem to be a couple of different supported formats:

  1. regular images via sphere map (1 image) / equirectangular map (1 image) / cube map (6 images)
  2. HDR via .hdr (1 file)
  3. HDR via .dds (1 file)
  4. HDR .env (1 file)

The regular images (1) and also most of the other cases (2, 4?) seem to be intended more for Skyboxes than for IBL environments…?
Loading one of these formats, could one generate the necessary IBL-related data (-> prefiltered pyramid) on-the-fly on the client side, using BabylonJS?

Regarding .dds (2), just judging from how the function “CreateFromPrefilteredData” is named, I’d suppose that the .dds files contain more information than the pure reflection texture, like for example a pyramid of filtered versions…? Is this similar for the .env file, and how are those files typically generated?

Sorry for the mass of questions, and many thanks in advance! :slight_smile:

The main doc is here Babylon.js Documentation and the compact recommended format is Babylon.js Documentation
with a bit more deep dive on the underlying format here: Babylon.js Documentation

As you said regular images are not prefiltered hence they are a good choice for pure glossy metal or skyboxes. To generate the prefiltered data you need to rely on external tools like lys or ibl baker. On the fly is consuming too much resources but I hope to bring an hybrid mode at some point for reflection probes.

You are completely right about the dds they are used as a container for an entire mipchain prefiltered to simulate the effect of roughness.

The env file is a “compressed” version of the dds storing hdr data in rgbd format in pngs.

And as all start with DDS, EXR or HDR files @PatrickRyan could add more about the art pipeline used to generate them. I know he sometimes render them in maya/cinema4d and sometimes shoot them from a camera :slight_smile:

Hope that helps,

3 Likes

Hi @mlimper! @sebavan pointed out the most useful links for actually creating the DDS and env files. The process in Lys can be a little tricky, so I would suggest to carefully evaluate your mip levels after setting up your parameters to make sure you don’t have any artifacts appearing in your chain. This will cause visual artifacts in your scene that may be hard to debug. There was a good discussion of this point on one of our old forum topics.

For creating an environment, you can either build a digital scene and use a spherical camera to render a rectilinear image or go old school and shoot a spherical image. You can use a spherical camera if you like, but I have not seen many of them that are capable of shooting in HDR. I am also not a fan of trying to edit out things like tripods from a rectilinear image that already has distortion toward the edges. And then there can be gaps in the image that just aren’t captured depending on the overlapping fields of view. Obviously the more money spent on one of these cameras, the better the outcome.

The way I do mine is more old school with a full frame DSLR, a good quality wide angle lens, a spherical tripod head, and an image stitching package like PTGui. This is a much more labor intensive method, but I can use bracketing to push more data into the image and make it a true HDR image, and I end up with extremely large images which can then be reduced to whatever size I need. Starting with more detail in the source image creates better end results.

Hopefully this gives you some ideas as to how to tackle your pipeline, but if you have any specific questions about ours, please ping me back.

4 Likes

Hey, thanks a lot to the two of you! :slight_smile:

Your swift and detailed replies gave us a really great starting point for our work. We’ll most likely come back to the Babylon community soon to share our first results (or if there should be more questions). Thanks again, and keep up the great work!

3 Likes