Friday, September 17th, 2010

The Wilderness Downtown: How it was Made

Category: Graphics

The Wilderness Downtown HTML5 web site came out recently and blew people away.

Via Mr. Doob comes a detailed blog post breaking down how the web site was actually created. First, he makes clear that this was a team effort, including work by Chris MilkAaron Koblin, “Spite”, George Michael Brower, Eduard Prats Molner, Guille Lopez, FluxB-Reel, and Arcade Fire.

Mr. Doob then jumps into the parts he was involved with, starting with trying to get the fancy Street View portion going, running into some surprising issues:

At first we intended to simply use Google’s Street View. I did a test integrating three.js with it and it seemed to work all fluid. However, what I didn’t know was that if you have WebGL enabled Google’s Street View would already use it. So what other people would see was considerable slower than what I was seeing. If WebGL is not enabled the Street View uses a three.js-like renderer. That was fine on Windows and Linux but not so much for MacOS. Turns out Google Chrome internally uses a different graphics library in MacOS than in Windows and Linux. CoreGraphics for MacOS and Skia for Windows and Linux. Each library have their own pros and cons but CoreGraphics is specially slow when transforming and clipping big images. Street View would run at 30 fps on Windows/Linux while it would get 1fps on MacOS.

It ended up that he had to build a custom Street View Data viewer. The hoops the team had to jump through to make this work are impressive. It turns out that they fetched the raw street view image from the server, however:

An additional challenge was that with <canvas> you don’t have access to the pixel data of images loaded from another domain. Otherwise we could just use this technique and call it a day. However, albeit pixel access is forbidden, context.drawImage() is allowed for copying areas from images hosted on other domains.

Yielding an image like this:

They then had to un-distort the image on the client side and add some noise to make it feel warmer:

Mr. Doob then describes how they achieved the flocking bird effect:

My approach was using a 3 polygons mesh — one polygon for each wing and one for the body. Then animating it by sinusoidally moving up and down the vertices at the end of the wings. Although is didn’t look like a crow it gave, once again, a close enough effect. Specially when you have a bunch of them following a boid simulation.

Next, Mr. Doob describes how they tinted each street image to make it appear like it is day, with code similar to the following:


  1. var context = texture_mod.getContext( '2d' );
  3. context.drawImage( texture, 0, 0 );
  5. context.globalAlpha = 0.5;
  6. context.globalCompositeOperation = 'darker';
  7. context.fillStyle = '#704214';
  8. context.fillRect( 0, 0, TEXTURE_WIDTH, TEXTURE_HEIGHT );
  10. context.globalCompositeOperation = 'lighter';
  11. context.drawImage( texture, 0, 0 );

Read the rest of the blog post to get the full scoop.

Posted by Brad Neuberg at 6:00 am
Comment here

2.7 rating from 3 votes

Comments Here »

Comments feed TrackBack URI

Leave a comment

You must be logged in to post a comment.