Instead of the usual medium of a video or still image, I decided to to make a new work with which the viewer can interact in real-time. I had seen a few previous projects built for WebGL but felt like there was scope to be pushed further.
This was made using threejs which is a great platform for working in 3D for the web (using webgl).
I wanted to re-create the same look I would develop from rendering in a 3D application in real time. Quickly I found the limited scope of WebGL shaders available compared with the library in a 3D application. So I developed my own GLSL shaders that would allow me to build a ‘material’ with the parameters I would normally tweak in a renderer. These included some basic math shaders such as fresnel falloff, as well as a larger shader that creates real-time glossy reflections.
Glossy Reflections Shader Demo
To demo the glossy reflection shader I built in GLSL I have also included a page of this shader working on its own with some verbose controls to demonstrate its abilities here.