clicktorelease

Hi! My name is Jaume Sanchez!
I like to do things with the browser
(NOT those kind of things, you pervert!)

Find me on twitter or GitHub

Light Orb | The Nexus Q Series

While watching the presentation of the Nexus Q at Google I/O 2012, I found the shape of the device really interesting for real-time rendering, and thought that it would be an excellent exercise to try to re-do the shape, the texture, and the lighting. I asked @zafio for a model of the room and the Nexus Q and started hacking away.

These here are the main steps of the idea as it was developed and iterated.

I. The Nexus Q

The Nexus Q

The first iteration, pretty straightforward: a model of the room with baked lighting, and the Nexus Q model - all created with Blender. The light in the ground is a decal.

This is the result, using three.js and ashima noise.

Click to see the Nexus Q

II. The Dynamic Nexus Q

The Nexus Q, dynamic version

This is a second iteration of the WebGL Nexus Q. After finishing the first version, we thought it'd be really cool to have the light properly shade the scene, instead of having a decal simulating it.

This is the result, using three.js and ashima noise and a fragment shader on the surfaces of the room to calculate the incoming light from the ring light.

The fragment shader is applied to the whole scene.
It might be really slow for high resolutions!

Click to see the Dynamic Nexus Q

III. The Throwable Nexus Q

The Nexus Q, ready to throw

This is a third iteration. Mr.doob suggested to be able to throw the Nexus Q around and get the light to properly react to the room. That meant adding physics and correctly calculate the ambient occlusion of the Nexus Q with the room surfaces.

This is the result, using three.js, physi.js, ashima noise and a fragment shader on the surfaces. The physics are a bit wonky to accentuate the effect.

The fragment shader is applied to the whole scene.
It might be really slow for high resolutions!

Click to see the Throwable Nexus Q

IV. The Light Orb

The Light Orb

This is the last iteration of the series. After all the experimenting, using a simple spherical mesh made more sense for more fluid physics. @zafio created a more detailed model, and added the two leds on the poles. I added the code to the fragment shader for those light sources.

This is the result, using three.js, physi.js, ashima noise and a fragment shader on the surfaces.

The fragment shader is applied to the whole scene.
It might be really slow for high resolutions!

Click to see the Light Orb