clicktorelease

Loading...
My past self, on twitter. What a boob...

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.

The Nexus Q

I. 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

The Nexus Q, dynamic version

II. The Dynamic Nexus Q

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

The Nexus Q, ready to throw

III. The Throwable Nexus Q

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

The Light Orb

IV. 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