exr/hdr loader

[spidersharma03]

Hi mrdoob,

I have been using threejs for some time. I have been, recently trying to write a Physically Image based lighting solution(PBR), and the results have been quite good. however to complete it, I definetly want to add hdr/exr Images, so that the materials response, to the dynamic range of lights. specially for dielectrics it makes a lot of sense. I would also love to add the PBR support to threejs, as the results look quite promising. Though, right now I need to do a lot of cleanup and refactor. My question is that, whether we have a exr/hdr loader which loads texture in floating point format?

[WestLangley]

https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/RGBELoader.js

[spidersharma03]

great! thanks for such a quick reply, and I will take a look. btw here is a quick preview of some Image based lighting experiment.

[bhouston]

That is beautiful, but RGBE is a horrible large format. I wouldn't recommend it for the web where one has to download it.

[bhouston]

I am not sure of the solution though. The best high dynamic range format is EXR but that will be hellish to support. Then there is PNG HDR, which encodes the exposure as the alpha channel in a similar way to RGBE, that is likely better than RGBE space wise and likely never worse. But then it is a format that is being repurposed.

[spidersharma03]

okay, I have used the hdr lighting using the RGBE format as a png file. That works quite well I would say. Once, I am done with the cleanup stuff, will upload some cool images ;-)

[bhouston]

I'd love to see them. Here is my current implementation of HDR PBR: https://clara.io/view/814322ac-5eec-4828-8b25-a85e8c57d6fe/webgl Click "Edit Online" to modify it. The envmap is low LDR still unfortunately.

[spidersharma03]

Thats cool!
In my implementation of PBR, I am storing the various roughness(0 - 1 range) maps of the env maps inside a single texture, and accesssing them based upon the pixel's roughness. the rougness maps are convolved using the GGX distribution, and for BRDF, I am using an approximation introduces by UNreal I guess( or Black op's, I am not sure). I mainly followed some links from this ::
http://blog.selfshadow.com/publications/s2013-shading-course/#course_content
are you also doing something similar?

PS: also, interestingly, I did some experiments with anisotropic materials, and it looks promising.

[bhouston]

Yeah, I think we are reading the same papers. :)

Here is my test with Anisotropy GGX:

https://clara.io/view/a8b929e6-c703-47ff-a85d-44bc44e5a132/webgl

[mrdoob]

Intel HD Graphics 4000 1024 MB

[spidersharma03]

Here are some results of HDR, multilayer material IBL. I approximated layer thickness from curvature in screen space for this specific image. I will post a more comprehensive set of images soon.

[WestLangley]

@spidersharma03 Very nice!

[bhouston]

@spidersharma03 Very nice. I would love to see a live demo! :)

I do a bit of multi-layering in this new Clara.io demo scene -- but only with a clear coat layer:

https://clara.io/view/d3b82831-d56b-462f-b30c-500ea1c7f870/webgl

[shtefcs]

@bhouston I was wondering, can exactly complete scene be exported from clara.io to three.js ?

I see the export option, but i am not sure if its export just object, or it can export complete scene with materials, light setup, positions, textures, etc ?

Peace,

[bhouston]

@shtefcs We use Three.JS as a presentation layer but there are a bunch of differences between Clara.io and ThreeJS so a true exact export is not supported but we do export the large majority of material properties, UVs, textures, meshes, animations, skinning etc. So you can get the large majority out of Clara.io.

[shtefcs]

@bhouston Thank you for your confirmation!