PBR environments from .HDR files the easy way :-)

Hey,

Just wanted to give you all a heads up for Babylon.js Texture Tools

Basically you drag in an HDR file and it will save a .env file you can use with any of your PBR scenes. It closely matching our Lys quality and as no comparison possible with IBL Baker or CMFT.

Give it a try and let me know. I ll write the full doc (e.g. drag -> drop :slight_smile: ) after addressing the early feedbacks.

15 Likes

By the way it can basically replace this entire part of the doc: Use a HDR environment (for PBR) - Babylon.js Documentation

1 Like

Cool!

No need for an external tool anymore, and it will be a lot easier to explain to people how to generate an environment file now!

I guess it fulfills at least the non-realtime part of


?

Small thing: I think in brdfFragment.glsl you really wanted:

const uint SAMPLE_COUNT = 16384u;

and not:

const uint SAMPLE_COUNT = 16284u;

even if it does not really matter :wink:

Oh boy…

Note for myself:

Complex BRDF: check
GPU based: check
Multiplication by two: a lot of room for improvements

1 Like

I wanted to check in with using a Blender generated environment texture with this process. @PatrickRyan, pointed me to this video, where you can make a panoramic equirectangular image of your Blender scene.

The video is using an old version of Blender, but I found everything in Blender 2.80+, but only if you switch to Cycles from EVEE, which is not a big deal.

The output though is actually a panoramic .PNG file, so I am not sure how coming from that format will work with this?

Getting this process to line up with what looks really easy to make could be a real boon to making some very well lit scenes. I am imagining just putting the camera in a good spot, & adding some Blender lights to a scene I want to export & let Blender generate the file. I can put all the lights & camera in a collection that I can later disable, so that they are not actually contained in the export itself.

Now I am not quite sure that is really going to be what I want. If the lights & camera are all in the right spots though, I could just create another scene of just a large white box on the inside, then file->append all the lights / camera, and take the picture of that.

The panorama (or equirectangular) format is actually the one needed by the conversion tool, if I’m not mistaken (@sebavan will tell).

So you would only have to be able to save the output from Blender to .hdr and that would be ok.

Do not think direct to .hdr is available from Blender, but I am now also going thru @gryff’s video recommendations. Just saw where you can save to OpenEXR format, something from ILM. Is an .exr an option?

It seems Blender supports .hdr files:

https://docs.blender.org/manual/en/latest/files/media/image_formats.html

I don’t think Babylon supports .exr files (maybe one day?).

1 Like

We do not support exr but it would be nice.

I won t support png equirectangular in the tool as the goal is to have HDR inputs and pngs can not be so the lighting would only be ok but never great :slight_smile:

Ok, see a bunch of search hits from exr to hdr, so one of them might actually be viable. Probably better to get a file out Blender with the best dynamic range & convert it.

Yeah! That looks like a very great & useful tool, great job!

About the doc’ I don’t think we should delete all the existing ways but your tool definitely needs to be mentionned on top of all solutions.

When I said the equirectangular format was the format expected by the tool, I meant the .hdr file should be an equirectangular image: is that correct?

You are right about .hdr direct from Blender! I Saw the word Radiance and then just skipped to the next. Guess Radiance is the company which started .hdr

3 Likes

Using @PatrickRyan umbrella studio scene converted from Maya to Blender, I created a 4000 x 2000 .hdr file (23 mb). Just dragged it to the tool & did the save. My .env was 1.3 mb. A great improvement for sure, but several X above the studio_256 (199 kb) & the studio_512 (612 kb).

Is this expected, given my dimensions? Also, what does the 256 & 512 signify?

Should say that I have already heavily modified that blend by merging all the meshes of each stand & fixing their origins, deleted the UV’s which were not needed, & nuked the custom split normals. Blend has dropped from 15mb to 5mb. Still now need to now split off the umbrellas & set a good origin for tilting, before PRing or giving it to someone to push it.

I checked that blend as was just published produces the same results as well, and it does

@JCPalmer the 256 and 512 represent the measure per face in the resulting cube. We’ve found that below 256 pixels per face yields poor results and above 512 pixels per face yields diminishing returns while costing heavily in file size.

Right now this tool is exporting a 512 pixel per face env, but @sebavan and I are talking about how to handle outputting to either size. However that carries with it error handling for the source image so that you can’t pass in a 1k x 512 HDRI and ask for a 512 pixel per face env because the image will need to be upsampled and cause a loss in quality.

I am adding a low res button to save a 256px cube size so that if you do not need the full res you can save the smalller one from the tool.

image

Will be up in 30 minutes.

3 Likes

Even better !!!

First, open the sandbox and then follow the steps:

  • drag & drop a PBR scene file (example)
  • drag & drop your hdr environmentTexture file (example)
  • wait to see the live result (can take a bit of time)
  • open the Inspector, go to the Tools, and click on Generate .env texture
1 Like

This came just in time for when I needed it. You guys are killing it! :upside_down_face:

1 Like

doesn’t work on Safari, was able to generate .env using Chrome

Yes it only works on WebGl2 browsers to generate the .env