# How to change default environment map for image based lighting

**URL:** <https://forum.techsoft3d.com/t/how-to-change-default-environment-map-for-image-based-lighting/2291>\
**Category:** HOOPS Visualize Web\
**Tags:** code, webviewer, knowledge-base, faq, how-to\
**Created:** [July 5, 2023, 5:11pm UTC](https://forum.techsoft3d.com/t/how-to-change-default-environment-map-for-image-based-lighting/2291 "2023-07-05T17:11:08Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![tino](https://avatars.discourse-cdn.com/v4/letter/t/9dc877/32.png) [@tino](https://forum.techsoft3d.com/u/tino)\
**Post date:** [July 5, 2023, 5:11pm UTC](https://forum.techsoft3d.com/t/how-to-change-default-environment-map-for-image-based-lighting/2291/1 "2023-07-05T17:11:08Z")

</div>

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](https://docs.techsoft3d.com/communicator/latest/api_ref/viewing/classes/Communicator.View.html?#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:

- [Filament](https://github.com/google/filament)
- [KTX-Software](https://github.com/KhronosGroup/KTX-Software/)

We’ll also need a good HDR file. Check out [Poly Haven](https://polyhaven.com/hdris).

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:

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:

```auto
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](https://docs.techsoft3d.com/communicator/latest/prog_guide/viewing/model_attributes/materials/physically-based-rendering.html#physically-based-rendering).

---

<div class="post-metadata">

**Author:** ![elio.baresi](https://avatars.discourse-cdn.com/v4/letter/e/65b543/32.png) [@elio.baresi](https://forum.techsoft3d.com/u/elio.baresi)\
**Post date:** [July 6, 2023, 11:35am UTC](https://forum.techsoft3d.com/t/how-to-change-default-environment-map-for-image-based-lighting/2291/2 "2023-07-06T11:35:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tino](https://avatars.discourse-cdn.com/v4/letter/t/9dc877/32.png) [@tino](https://forum.techsoft3d.com/u/tino)\
**Post date:** [July 6, 2023, 11:46am UTC](https://forum.techsoft3d.com/t/how-to-change-default-environment-map-for-image-based-lighting/2291/3 "2023-07-06T11:46:05Z")

</div>

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