CubeMap」タグアーカイブ

HDRIのEquirectangular形式の画像からCubeMapを生成するメモ

Three.jsでIBLを行う際に、HDRIの画像があったら便利だと思ったので調べてみた。
以下のサイトでフリーのHDRIのEquirectangularの画像を手に入れられる。
http://www.hdrlabs.com/sibl/archive.html
また、以下のサイトでHDRIのEquirectangular画像からCubeMapを生成できる。
HDRI-to-CubeMap(https://github.com/matheowis/HDRI-to-CubeMap)
ありがてえ……😂

また、 EquirectangularのままだとCubeMapとしては使えないが、Three.jsのサンプルにはEquirectangularの画像をCubeMapとして利用する例や、そのまま環境マップやスカイドームとして利用する例があった(非HDRI画像)。
①Three.jsにて Equirectangularの画像からCubeMapを作成する例(非HDRI)
https://threejs.org/examples/#webgl_materials_cubemap_dynamic

② Equirectangularの画像をそのまま環境マップとして利用する例 (非HDRI)
https://threejs.org/examples/#webgl_materials_envmaps
②に関して自分でシェーダー書くなら以下のリンクも参考になりそう
パノラマ画像からの環境マッピング


HDRI-to-CubeMapにてHDRIのCubeMapを作成した場合、以下のサンプルを参考にHDRIのCubeMapを読み込める。
③HDRIのテクスチャを読み込む例
https://threejs.org/examples/#webgl_loader_texture_hdr

④HDRIのCubeMapを読み込む例
https://threejs.org/examples/#webgl_materials_envmaps_hdr
gitのthree.js/examples/js/loaders/にあるRGBELoader.jsにてHDRI画像が読み込めるようになるようだ。
また、同フォルダのHDRCubeTextureLoader.jsは、RGBELoader.jsを使いHDRIのCubeMapを作成するためのクラスとして利用できる。

HDRIのEquirectangularを環境マップとして利用したい場合、RGBELoader.jsを使いテクスチャを読み込み、①や②のサンプルと同じことをすると環境マップとして使えるようになるかも?時間があるときに調べてみる。