Convert Equirectangular HDRI to Face List

February 21, 2019 by in WebGL

Here is a fast workflow to get an equirectangular HDR image into a format suitable for an hdr environment map in Three.js.

We will be using a piece of open source software called cmftStudio (cube map filtering tool). So head over there and download & install the correct binary.

Next grab yourself an equirectangular HDR image. There is a fantastic site dedicated to these over at https://hdrihaven.com/. I am using the Colosseum in this example.

Open cmftStudio. For this process, you’ll only need to focus on the right side toolbar. Under the environment tab, select the Edit button. Another pane, titled ‘Environment’, will slide in.

The first section in this pane is ‘Skybox’, under this select the ‘Browse…’ button, find your .hdr file then click load. You should now see this load as the environment map of the preview scene. You can right-click and drag to orbit around.

We need to choose a resolution for our faces. HDR files can get a bit hefty Under the skybox section, click info. This will slide in a third pane, titled ‘Skybox’. Look for the resize section. Choose a resolution that will be applied to each face and click ‘Resize’.

Now we need to export this as a face list, ready for use in an instance of CubeTextureLoader in Three.js.

Close the ‘Skybox’ pane and select ‘Save’ back in the pane 2.

The save dialogue will now slide in. Select .hdr as your file type and FaceList as your output type. Browse to a directory where you would like the files outputted, then click save.

You now have your face list as an array of hdr files ready to import into Three.js

Follow this example on the Three.js site to use these as an environment map in your scene.

0 Comments
Leave a comment

Your email address will not be published. Required fields are marked *