blog.omine.net

LG WOW is the latest website we developed at colmeia featuring Papervision3D, webcam interactivity, Flash Media Server streaming, and integration with a Django application using remoting (PyAMF). It is a product showcase for LG Electronics.

To enter the website, choose between webcam and keyboard modes. After the countdown, shout “wow” to the camera (or simply type it if you chose keyboard mode) and 3D particles will explode according to your voice loudness. The camera feed will be recorded to Flash Media Server, but it will only be published if you choose to do so later.

Navigate the website through the floating objects or the menu (at the top).
Check the Gallery (to watch other people’s reactions) and the Stats section too.

This website doesn’t push the boundaries of Flash and PV3D (we just used Planes with MovieMaterials), but I think we were still able to build something unique for the client.

Concept and product pages by Sinc (advertising agency).
PV3D design and development by Colmeia:

• Design: Caio Sartori, Gustavo Sonoda.
• Backend development: Eduardo Silva, Arthur Lima.
• Flash development: Flavio Ensiki, Eduardo Omine, Edgar Akiyama.

Playing with computeSpectrum() and PV3D 2.0 alpha (Great White). The mesh reacts to sound by having its vertices moved along the Z axis (X and Y coordinates are fixed). Had a problem with FlatShadeMaterial failing to render on regions of coplanar faces; small creases were made in the mesh to fix it.

Sound analysis was made with SoundMixer.computeSpectrum(), FFTMode set to true (a frequency spectrum results in a more interesting visualization) and stretchFactor set to 4. Increasing the stretchFactor value means analyzing a smaller frequency range of the sound —thus ignoring non-audible high frequencies. The 16×16 vertex grid represents the average values of left and right channels.

Music Is Music As Devices Are Kisses Is Everything (5:20) by 65daysofstatic (from the 2007 album The Destruction Of Small Ideas) is the song; a nice fit for this visualization because of the contrasting quiet and loud parts —the visualization of the piano notes in the quiet sections is very clear.

View SWF (5MB, move mouse on X direction to change rotation, music plays 10 times)

Update: comments closed because of spam.

Update #2: this experiment was featured on PV3D blog — 9 Cool Experiments in 3D.

This week I worked on converting last week’s Particles and trails code to 3 dimensions, using the Effects branch of Papervision3D.

The final SWF runs smoothly at 30fps on my computer, and initially uses about 5MB of memory as measured by System.totalMemory. The biggest challenge in this project was fixing a memory leak that occurred whenever a ribbon was removed from the scene. If you run into this problem when removing a DisplayObject3D, remember to:

• reset the geometry.faces and geometry.vertices arrays;
• unregister the object from its material.

public function destroy():void
{
    geometry.faces = [];
    geometry.vertices = [];
    material.unregisterObject(this);
}

Each ribbon has 3 life phases:

1. Growth: the ribbon grows until it reaches 120 vertices;
2. Stability: the ribbon keeps moving but older faces and vertices are removed, keeping vertex count equal to 120;
3. Removal: the ribbon stops moving and 2 vertices and 2 faces are removed frame by frame until it reaches zero vertices and zero faces.

The applied material is a simple FlatShadeMaterial with a moving light source. Finally, a BitmapLayerEffect with BlurFilter was applied and the viewport.blendMode was set to BlendMode.ADD.

View animation (move mouse to change camera rotation)

Quatro Arquitetura is an architecture office based in Rio de Janeiro. I designed and built their website, which was published in October 2007.

It’s a simple portfolio website with photo galleries of the office’s recent work. Some simple 3D effects were built with Papervision3D. A Cover Flow-like navigation is used to browse the projects:

When browsing the pictures in a project gallery, a flipping effect is used as a transition between pictures: