Live 3D on the Web

I always like live rendered 3D on the web. It still seems so unexpected, which can be the best chance to get someone's full attention. Although Canvas 3D was introduced in 2006, Papervision3D was the first successful in my opinion (sorry Vladimir Vukićević). With that said, Papervision3D requires a plugin that is fading, Flash. WebGL runs straight off the browser, and most, except IE, support this.

Today I came across a CSS 3D Lighting library which uses neither of these. Of course the basic necessity of 3D rendering is the Z-axis, but lighting is equally important. Without appropriate lighting and/or materials you end up with a silhouette that most likely makes no sense. The lighting can enhance your z-depth, and the eye will react more naturally. Then we can begin to apply blurs to really finish out the depth-of-field.



Photon: CSS 3D Lighting
http://photon.attasi.com/

Moving Noise Background

I made this animated background element and thought I'd share it with everyone.

1. I started in After Effects and created a layer solid, added noise and rendered.
2. Then I opened the noise movie in photoshop to add color and adjust levels.
3. From Photoshop I exported an animated GIF based on the movie timeline.

Preview
http://jerrettwhite.com/resources/BgNoiseMovement/

Source Files
http://jerrettwhite.com/resources/BgNoiseMovement/BgNoiseMovement_Source.zip

Nike Jumpman

This site uses your scroll wheel to control the animation. I’ve seen similar navigations, but I like the way these scenes construct and deconstruct.

nike.com/jumpman23/aj2012/