Light field rendering in WebGL

8th March 2015

There has been a lot of hype recently on rendering in VR environments, mostly due to the upcoming releases of consumer virtual reality headsets. Light fields are an old graphics research topic, explained in great detail at https://graphics.stanford.edu/papers/light/. They have recently become popular because they allow pre-rendered scenes to be viewed from any angle and any position - ideal for VR, where other graphics techniques do not work for stereo display. Here is a recent video that demonstrates their use: https://www.youtube.com/watch?v=Oa7_zz5Vitg&t=56.

How do they work 

Light fields are very simple, they consist of a view of a pre-rendered scene from multiple angles. They are rendered by using the camera angle and position to lookup the closest pre-rendered pixel. Bilinear interpolation blurs the seams between views so the resultant view is smooth.

Demo

You can move around the scene below using W/A/S/D, C/Space and the mouse to look around. The controls are based on typical first-person shooters. A plane is viewed in-front, where a pre-rendered lightfield can be seen. As you move around, the light field will appear 3D.

Comments

Hi Andrew, that's great work! Would you like to share the source code with me via email? Thanks!
Grant - 23rd Sep 2015 19:38
@Grant Just view source on the page - it is all done in javascript and there is no minification or obfuscation so you can see how everything works.
Andrew Lowndes - 24th Oct 2015 17:22
Hey Andrew... very nice work... I'm working on implementations in python... I'm having trouble viewing the java source from the page for some reason... I'm curious to have a look at your implementation if you don't mind sharing... /r
Ryan McDermid - 17th May 2016 17:06
Woooo.... Great!!! I completely understood how it works, but I had some problems with Math.. :-/ I will have a try as soon as possible... Thanks a lot!!! :)
I will write you when I will get some first example with real photos!!! :)
Giorgio Tedesco - 7th Sep 2016 13:35
Actually looking just into your page source isn't working as expected for extracting the source, would be really helpfull if the code could be extracted more obvious. The following file is the only thing i've found: blog/graphics/light-field-rendering-in-webgl/js/init.js which tells nothing at all about the lightfield stitching
Harald - 8th Sep 2016 07:15
Please bear with me whilst I create another demo of light field rendering in a forward renderer with a 180 field of view. This will include the light field generation too with a path tracer, written in JavaScript.
Andrew Lowndes - 12th Jan 2017 13:01
acac
ascac - 31st Jan 2017 08:53
Hi Andrew, thanks for sharing this, it's been very helpful as an example as I work on my own lightfield implementation. One thing I was wondering - can you explain how the uvFramebuffer pass works? I'm not understanding how its values would be different from vTextureCoord.
Duncan Alexander - 20th Dec 2017 15:38

Make a comment

Contribute to this article and have your say.