HDRI spherical map to cubemap converter

Showcase
, ,
1

You can upload a spherical map (.hdr, .png, .jpg) and convert it to cubemap.
I’ve made it possible to create 3 cubemap layouts :

  • cross
  • inline
  • separate

The ressolution option is meant for a single piece so if You set it to 512 you’ll get 2048x1536 cross cubemap

Cubemaps are generated based on camera rotation (cubemap view)

Github repository: https://github.com/matheowis/HDRI-to-CubeMap

Online converter: https://matheowis.github.io/HDRI-to-CubeMap/

Update:
I’ve added hdr output support, also if any one would like to know how to save hdr via javascript, check out my test project at https://github.com/matheowis/threejs-canvas-save-as-hdr , I’ve even wrote a simple tutorial in README.md

27 Likes
2

Yes!!!.. Thank you thank you thank you!! This rocks! You rock!

Edit: D’oh!.. Is there any way (please please please) that you could have an option to keep HDR and save out HDR cube maps separate (xn.hdr, xp.hdr, yn.hdr, yp.hdr, zn.hdr, zp.hdr)? You do this, and you will be my new bff.

3

Sorry at the moment I have no idea how to do it :confused:

4

Please look into it if you can. Maybe it is a snap to do this… I’m sure I am not alone and others who do HDR in three would love this if you could swing it.

5

This is really neat! The online converter is super handy.

@FrankSilvaHM for HDRI cubemap output, I recommend CMFT Studio. It takes a bit to get used to all the controls, but it’s got what you need!

1 Like
6

Thanks. But holy smokes, after playing with it for bit, that thing is a nightmare to work with. MateuszWis, please see if you can get HDR output working, and the bff deal will be in effect.

1 Like
7

Yeah, it’s not as intuitive out-of-the-box as MateuszWis’s is. The CubeMap view is awesome.

8

I’ve managed to add hdr output to the converter :slight_smile:

4 Likes
9

YESSSSS!!! Thank you so very, very much! Again, you rock!

10

OMG! I had never even noticed that changing rotation made the output maps rotated!!!.. Um… I love you!

11

Hey, @MateuszWis. Really glad it supports HDRI now!

Are you mapping the textures differently when you upload a JPG vs when you upload an HDR image? When I upload a JPG, I’m getting pinching at the poles, but when I upload an HDR the pinching is gone, even though both images are equirectangular.

pinching

1 Like
12

They are mapped exactly the same, the pinching probably shows up because of JPEG compression algorithm.

2 Likes
13

Ah, that’s right! It’s not the JPEG compression, but minification filtering.

In userTexture.js you’re applying tex.minFilter = NearestFilter; to HDR formats only. Once I added that filtering method to the other format, the pinching at the poles was gone. :wink:

1 Like
14

Thank You! I totaly missed that.
I’ve just updated the repository and the online version with Your fix. :grinning:

2 Likes
15

Hey!

Really like this, definitely a unique resource, thank you !

I am having difficulty loading the six individual HDR into three, giving me this error in console:

RGBELoader.js: Bad File Format: bad initial token

I used this HDRI map:

https://hdrihaven.com/files/hdris/white_cliff_top_1k.hdr

I have used other 6-part hdr files without a problem (from the demo, found here: threejs webgl - materials - hdr environment mapping).

I don’t have any way to tell what the issue is here, whether it is code, resource, or what…

Any pointers would be great!

Thank you :slight_smile:

Peter.

1 Like
16

Could be a number of things. I doubt it has anything to do with the exporter, I’ve used it before and it works well. Any chance you could post an example on JSFiddle.net so people can test it and help you out?

17

@marquizzo It accually has to do with the exporter, RGBELoader is searching for #?RADIANCE header which i wasn’t providing.

Thank you Peter, fixed version is already up!

Working example: https://codepen.io/matheowis/pen/XOGKzz

3 Likes
18

Oh, brilliant @marquizzo! Thank you so much, off to try now :slight_smile:

19

@MateuszWis Awesome tool! Any plans on adding RGBM16 support? :innocent:
three.js examples (envMap: RGBM16)

EDIT: Some relevant links…

2 Likes
20

This is really handy, thank you !

Did you not mean “-Y” here ?
2019-02-27_155810