Sport Chalet: The Mountain


So I just recently finished up a micro site for Sport Chalet, a California/West Coast based sporting goods boutique. Sport Chalet came to Firstborn wanting to promote their winter line of snowboarding and skiing equipment and apparel. To help, they also got a bunch of professional snowboarders and skiers to help promote the site by modeling with equipment and by giving interviews. Our goal was to figure out a way to display all these professionals as well as just models in an interesting way. The concept we arrived at was to create a 3D mountain and populate the face with hot spots that would represent one of the sixty or so people. After selecting a person, the user is taken to a ‘rider page’ that has motion tracked video with target points that describe what that person is wearing.

The first challenge was to create the mountain in 3D in Flash. Originally we were going to create the mountain based off of a grayscale depth image, where the height of the 3D mesh would correlate to the brightness value. However, this did not offer us as much controll over the final result of the mountain. Instead, we decided to model the mountain in an external editor and bring it into papervision. Our first inclintion was to use collada or md2 format. However,  I was unsure of how much accessesability I would have to the mesh, as we would need to make it interactive. In fact, since each triangle would be it’s own object it could not be appart of one mesh, so rather the mountain would be a collection of independent objects. Additionally, the art director was using Cinema 4D which at the time did not support collada export. So it seemd to me that the only option left was to make my own importer from Cinema 4D. The importer I created uses VRML files (.wrl) which are ascii text based files that contain an array of point and faces, as well as UV coordinates for texturing. It’s actually a simple process to rebuild all mesh, except for a few tricks such inverting the Z-axis (papervision’s is opposite to Cinema’s) and reversing the normals since they all come in backward. Since I wrote my own importer, I knew exactly what was happening, and thus had totally controll over how the polygons are created and handled, therefor making the interaction process that much easier. Here are a few steps/examples of creating the mountain:

Example 001:  Bringing the object in directly from Cinema (the color is from its original material) and showing the wireframe as well.
Example 002:  An example of adding a bitmap texture to the object and have it retain proper UV coordinates.
Example 003: Adding a color gradient based off of each triangle’s centroid position relative to the entire mesh, as well as cropping polygons on the lower portion to remove the rectangular base
Example 004: Adding some effects such as Flat Shading (which had a bug that I needed to fix first) and subtle glow.

Another interesting process was creating the tracked videos. The site contains 78 tracked videos, which for each we needed to do the keying, color correction, and finally motion track each one. After each video was tracked with one or several trackers, we simply copied the keyframes right from after effects and ran them though a custom parser we built to convert them into XML. You can see the result on the site or in this demo.

So please check the site out, hopefully you’ll enjoy it, as it was pretty fun to make. There’s a contest you can enter as well, but you have to be able to get to one of the Sport Chalet stores, and they’re only located around Southern California / west coast area.



2 thoughts on “Sport Chalet: The Mountain”

  1. I know I took a look at the site yesterday, but just had a chance to look at it more…

    The 3d mountain stuff is cool – looks like you did some really impressive stuff with that. I’m not entirely sure how I feel about the hit areas – once a person has popped up, I can hardly move my mouse without triggering another person to pop up. But that seems to be a problem inherent to how it’s laid out, not sure what to do about it.

    I dig blowing the mountain apart as a transition, but I really wish it was faster – it takes quite some time, and annoys me.

    I love the tracking points on the video – that’s a cool idea. It’s kinda fun how it trails behind the point it’s aiming for. Just making me think of that part in the beginning of Fight Club, with the labels from the magazine…

  2. Thanks for the feedback Adam, always good to get something more than “Cool!” In response to your comments:

    1. We kind of wanted it so there would be lots of pop-ups when you moved the mouse around, so the user would know that there is a lot of content. But you’re right, there’s not much we could really do about that seeing there are about 70 rollovers.
    2. We made the animation longer to try and made it more of a ‘cinematic’ feel, so that you’re going into the mountain and it’s not just “explode!” but maybe we didn’t get that across well enough. The animation also has to be segmented like it is, where some has to animate out and stop as opposed to it all animating at the same time, as all those tweens cause really heavy performance issues.
    3. Thanks, the tracking turned out really well. It’s just mapping to the track points with easing applied to it.

    Thanks again for the comments, it’s too bad we can’t do something like this BEFORE a project goes live, like have some sort of outer-agency critique. Could be beneficial to all of us.

Leave a Reply

Your email address will not be published. Required fields are marked *