Where to find realistic HDR Space textures from the universe?

Resources
1

Hi Friends,

can someone recommend a website where I can find realistic and good looking HDR Space textures from the universe?

I would like to create a universe environment where the milkyway is visible, similar then this example.

Unfortunately most of the HDR textures of the universe are not looking realistic, so I already thought to make my own HDR texture. If someone knows a good tutorial or has some advice on how to make a quality HDR texture with a small file size for the web, I would apprechiate your help!

Thank you for answers! :slightly_smiling_face:

2

NASA has a panorama image of the milky way. After a quick search I found this page. Halfway are images of the milky way in multiple resolutions. NASA SVS | Deep Star Maps 2020

With this tool, you can convert it to a Cubemap

Implementing a Cubemap is pretty straight forward three.js docs

Cheers

2 Likes
3

Awesome!! Thank you so much for your answer! =)

I found this milky way image before, but I was not sure how to convert it to a HDR image and I was afraid that the file size gets to large when I like to keep the details. However this is exactly what I am looking for so I will figure out a way to create a cube map in react three fibre.

Please can you share your experince about performace issues with detailed HDR images?

I am currently under time pressure and need to figure out a performant solution.

Thank you!

4

Unfortunately I dont have much experience with HDR. The downloadable images with x-exr are already in a specific HDR format and apparantly threejs can load .exr files. three.js examples

In web its always best to shrink media to its minimum. Loading a big envmap will take a while and will probably take some performance if you have many objects that are reflecting the image. If you have a small app, performance shouldnt be a problem tho.

Depending on your app, this may be interesting three.js examples

Not sure if thats an option for you, but you can convert .exr to .jpg and adjust jpg’s quality (in for example photoshop) to get a smaller image without losing an extreme amount of detail. JPGs compression is acutally quite impressive.

1 Like
5

Thanks again, this is really helpful! :slight_smile:

I need to make a test scene to try both, the.exr file and the converted .jpeg file and then I will compare the quality and the loading speed to get a better understanding what works better in larger scenes.

The second example you showed me is a PMREM test, unfortunately I dont have any idea what that is and why it could be interesting for me, can you give me a hint please? What can I do with PMREM tests? I mean this three.js example

If someone knows a good boilerplate to use cubemaps or .exr files in a three.js scene, I would be happy if you can share the link.

Thanks a lot for your support!

6

Check the docs on PMREM.

If you need a boilerplate check the examples for cubemaps on the threejs website and replace the images or fork threejs on github and clone it

1 Like
7

Awesome, thanks for your help!!

1 Like