How to change default environment map for image based lighting

HOOPS Communicator
, , , ,
1

For image based lighting applied to physically based materials, Communicator is using a default environment image. However, it’s possible to use your own image via the function setImageBasedLightingEnvironment. Our Communicator docs provide a quick overview of how to do this and the following KB article gives additional details.

SETUP:
Two applications are required for this KB article:

We’ll also need a good HDR file. Check out Poly Haven.

With that out of the way, let’s get started:

  1. In Filament, we need to run cmgen.exe which is found in cmgen\bin. Here’s an example command to convert from .hdr to .ktx:
    cmgen -x mySourceHDR_dir --format=ktx --size=256 mySource.hdr
    This command creates a folder called mySourceHDR_dir given the input file mySource.hdr. In mySourceHDR_dir folder, make note that there should now be three files:

    • mySourceHDR_dir _ibl.ktx,
    • mySourceHDR_dir _skybox.ktx
    • sh.txt

  2. In KTX Software, we need to run ktx2ktx2.exe which is found in KTX-Software-master\build\Debug. Here’s an example command to convert from .ktx to .ktx2:
    ktx2ktx2 -o uncompressed_mySource.ktx2 mySourceHDR_dir_ibl.ktx
    This command creates the file uncompressed_mySource.ktx2 from the source input file mySourceHDR_dir_ibl.ktx (generated from step #1). At this point, you can load the uncompressed KTX2 file in the Web Viewer as described in step #4, if you wish. But if you prefer a compressed version, the next step will do that.

  3. Still using KTX Software, we need to run ktxsc.exe which is also found in KTX-Software-master\build\Debug. Here’s an example command:
    ktxsc --zcmp 20 -o compressed_mySource.ktx2 uncompressed_mySource.ktx2
    This command applies a compression level of 20 and outputs the file compressed_mySource.ktx2 from the source input file uncompressed_mySource.ktx2 (generated from step #2).

  4. Now, let’s get ready to call setImageBasedLightingEnvironment in the Web Viewer. For simplicity, let’s use a fetch command to load compressed_mySource.ktx2 – so let’s add that file in a directory that can serve it via http request. Copy compressed_mySource.ktx2 to the directory HOOPS_Communicator_202X_XX\web_viewer\src. Note that you can use other directories specified in HOOPS_Communicator_202X_XX\quick_start\server_config.js through the parameter fileServerStaticDirs.

  5. Launch the server and load the SCS/SC file that you would like to change the lighting environment image. In the web browser console, run the following call:

fetch('/compressed_mySource.ktx2')
  .then(response => response.arrayBuffer())
  .then(data => {
  const uint8Array = new Uint8Array(data);
  hwv.view.setImageBasedLightingEnvironment(uint8Array);
})
  .catch(error => {
    console.error('Error loading KTX2 file:', error);
});

For more information on physically based rendering, please refer to our docs.

2

Thank you @tino for the post. I wish to add two/three points to the thread. Can I?

3

Hello @elio.baresi . Yes, please post your feedback on the post.