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.
Margot, a motivated junior web developer.
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:
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.