Lighting with WebXR and Three.js

Questions
, ,
1

Hi there!

I’m in my last year of University and currently working on a research project involving WebXR and Three.js.

The project reads as follows: “How can you realistically render 3D objects in an existing environment using environmental lighting?”. I’m developing an e-commerce website for lamps, where you can view the lamp in Augmented Reality through WebXR.

I have gotten to the point where I can place a lamp in my environment, rotate it around and change it to a model where the lamp is turned on with the click of a button. I have looked into depth-sensing, shadows and lights, but I can’t get any further.

I’m wondering if any of you know other ways/have tips to display the rays of a light or the way the light hits the ground to make it feel more realistic. I think it’s a difficult task, because the lights in Three.js only work on objects and not on your environment. I also wanted to add shadows, but everything I tried didn’t seem to work.

Thanks in advance for your tips or help.

Kind regards,
Margot, a motivated junior web developer.

2

Getting the lighting right is one of the main challenges when developing AR applications.

When searching the web for lighting in AR, you probably find the terms estimated lighting or lighting estimation. That means AR APIs like ARCore or ARKit analyze the image from your camera and derive environmental lighting information that can be used to approximatively illuminate the virtual elements in your scene.

Fortunately, WebXR provides an API for this and three.js a class for an integrated usage in your app. It was originally added with this PR:

The example that demonstrates the usage of THREE.XREstimatedLight is available here:

https://threejs.org/examples/webxr_ar_lighting

Be aware that this example will be improved with the next release r137. So you definitely want to check out the dev version or wait until r137 will be released. That should happen this week.

1 Like
3

Thanks a lot for your answer. I added the light estimation and my lamps look a lot more realistic now.

Do you know if there’s a way to let the light estimation work with shadows or isn’t that a possibility yet?

4

Shadows are tricky. AFAIK, it is not possible yet that your lamp casts shadows onto the real environment. Besides, it is not possible that you lamp receives a shadow from real objects. A darker image would just decrease the brightness of your virtual object. You probably have to fake shadows in some way but I’m not sure how to do this.

1 Like