How to use three.js HDR Image Based Lighting in AR.js?

Questions
1

Hi all,

What is the possible way to use HDR Image-Based Lighting in AR.js with three.js? I’m referencing the following example for the same and I would need RGBELoader and RoughnessMipmapper for it: https://threejs.org/examples/q=webgl_loader_gltf#webgl_loader_gltf

and these files are externally loaded in three.js.

But the problem is, as I could understand, AR.js works only with global three.js files. AR.js itself is very poorly adapted for NPM. So where can I find the global files for RGBELoader and RoughnessMipmapper? As without HDR Image-Based Lighting, my .glb model looks very raw and dull. Or is there any other way to make my model look more realistic in AR.js?
Screenshot_20210112-163158_Chrome|225x500

2

Does this answer your question? RGBELoader global file - #2 by Mugen87

Notice that RoughnessMipmapper is currently not used in the example so you don’t have to include it.

1 Like
3

Note that this means you’ll see reflections on the object coming from the static cubemap or equirect texture that you use as the environment map, not from the actual camera in the AR context.

The WebXR API has ways to improve this much more, but AR.js predates WebXR and I’m not sure if it can use those experimental APIs…

4

Thank you, It worked.