Some rgbe loader advise about three.js-pathtracing-renderer

[mrdoob]

We moved to LinearFilter recently just to get rid of the pixelation yes.
Make sure you're using the latest RGBE/HDR loaders.

[erichlof]

@mrdoob
Thank you Ricardo! Ok I will grab the latest RGBE/HDR loader from three.js and update my filter to LinearFilter.
Thanks again for the quick response! :-)

[RenderTool]

WOW! @erichlof I just got up. it's 5：45 am in Beijing.

[erichlof]

@q750831855
Hello, I'm sorry but I don't quite understand - is the top rendering using LinearEncoding, and the bottom render with the flower circled in red using RGBEEncoding? THREE.js only uses RGBEEncoding on all their examples/demos that use HDR images, so that's what I used too - I was just following their example. In my matching HDRI fragment shader for this demo, I use THREE.js's utility function RGBEToLinear() : https://github.com/erichlof/THREE.js-PathTracing-Renderer/blob/gh-pages/shaders/HDRI_Environment_Fragment.glsl#L288-L291

So I'm assuming that this utility function handles the necessary data encoding correctly. One more thing that could be causing the 'pixelating' of the flowers in the bottom image is that I was using NearestFilter and it appears you are using LinearFilter, which smooths out the pixels a little? And where are you actually using THREE.FloatType? It appears that it is commented out. I have used that on both of the DataTextures: AABBTexture, and TriangleTexture that contain float data about the model geometry, but I wasn't aware if I could use that with RGBE maps.

I might have to ask mrdoob about this: what is the preferred way to load in an HDR file, RGBE encoding, or LinearEncoding? And does filtering effect path tracing, should we use LinearFilter? or is NearestFilter ok to use? (and possibly faster?)

Thank you for bringing this to my attention - I will try to learn more about it and see what mrdoob thinks.

[erichlof]

pinging @mrdoob
Hi Ricardo, sorry to bother you - what is the preferred way to load an HDR environment map in three.js? If you look at the code picture in the original post above, my way is commented out and the op's way is highlighted. I was following the three.js examples of how to display rgbe-encoded HDR maps. I was telling the op that it might not even matter how it is loaded in on these .js lines of code because in the actual glsl path tracer, I use your RGBEToLinear() function to look up the texture using the CartesianToSpherical uv coordinates. Then once the texture color is in linear color space, I perform regular math operations on it, and then gamma correct the final output before it is displayed on the screen.

The op also claims that the image pixelation (red circle on the flowering bushes) could be corrected if FloatType is used somehow, but I think it is due to the fact that I was using a NearestFilter while he was using a LinearFilter (which may help blur the pixels a little?).

Any thoughts or insights would be greatly appreciated.
Thank you,
-Erich

[erichlof]

@q750831855
I will go update my RGBE loader per mrdoob's suggestion and change the filter like you have in your snapshot: LinearFilter. Hopefully that combination will take care of the pixelization issue. I'll let you know when I've updated everything.

[erichlof]

@q750831855
Ok I now have the latest RGBE loader from three.js and I also updated the .js file for this demo to follow your Linear example. The only thing I couldn't do was assign FloatType to the texture.type - it may be because I'm on an old laptop and my weak integrated graphics card can't handle that kind of data precision/amount.
But hopefully the HDR image looks a little smoother in the background for everyone.