If you haven’t heard, the low-poly look is in. Some might even say “low-poly” is the new “high-poly”. I’ve been seeing this style pop up everywhere — sites, illustrations, games, etc. And I gotta say, I’m loving it. We’ve been doing a lot of WebGL work lately, and I figured it was a perfect opportunity to experiment with recreating the style with Three.js.

Check out the LIVE DEMO here

Low-Poly, High-Detail

The low-poly style is largely characterized by 3D models with intentionally low polygon counts. In the world of 3D modeling this is usually the opposite of what you want. The more polygons the smoother the surface will appear and ultimately the more realistic your object or scene will appear. Nonetheless, when low polygon models are coupled with meticulously executed details it creates a delightful contrast.

When producing this look there are three important visual characteristics:

Soft Lighting — Scenes are often lit brightly or with dramatic directional lights. The key to creating that soft, almost toy-like finish is using the right material on your model. In Three.js a Phong Material with a very low shine, or a Lambert Material will achieve the desired look.

Exaggerated Proportions — Another thing that helps sell the effect is great composition and exaggerated proportions. The relative size of objects doesn’t need to be accurate. In fact, the wackier the better. Check out the images below to see what I mean.

Cinematic Details — This is really the nail in the coffin. Things like film grain, shallow depth of field, and vignetting give an otherwise playful scene some technical polish that makes all the difference. In Three.js pixel shaders help with the post-processing work.

Setting the Scene

While I was working through the example I ran into many hurdles. I had a desired look in mind and it took some digging around to cobble together all the pieces. Here are some of the highlights.

Lights

Lighting the scene is a critical part of any 3D project. It also happens to be one of the trickier things to do in WebGL/ThreeJS. I started modeling the scene in Cinema4D but when it was time to integrate things into ThreeJS there wasn’t an obvious path from A to B. Then I stumbled upon the ThreeJS Editor. The editor allows you to visually place, scale and manipulate objects to compose a scene.

Among other things it give you fine control over light placement and coloring. Once you have the lights set up you can export JSON and load it directly into your site. This helped a ton and ended up saving a lot of time. My workflow became Model in Cinema4D -> Arrange in ThreeJS Editor -> Export and load via the JSON loader in code.

Lastly, one mistake I was making up front was setting the colors on the meshes only and not making use of colored light. ThreeJS offers very robust lighting and materials options. To achieve rich color tones and really nice shadowing make use of a colored Hemisphere light to give the scene some added interest.

Materials

There are a handful of different materials available in ThreeJS.But when producing the flat, smooth look Phong and Lambert Materials are key. A Lambert material is flat by default and will give you a nice dull surface. A Phong material has a shininess property that can be turned down to give a slightly more interesting surface quality.

Another cool trick I picked up along the way is utilizing the Emissive property of the material. This property lets you control shadow color within your object. You can use this property to create some hyper-real lighting effects.

The Dirty Details

After I was happy with the scene, models and colors I felt like something was still missing. After dissecting several other low-poly images I decided I needed to add some post-processing effects to achieve the look I was going for.

Compositing the effects

ThreeJS has a nice built-in module called the Effects Composer. The Effects Composer makes it easy to composite multiple shaders to create post-processing effects similar to those found in After Effects. I used three shaders for my scene — Vignette, Film Grain, and Horizontal/Vertical TiltShift.

These shaders simulated a shallow depth of field, long lens, and some grain for a little extra grit. The result was night and day. The post-processed scene looks much more compelling than the no-shader version. Unfortunately, there is a performance penalty that comes with the shaders. See for your self — View Live Demo

Conclusion

In short, I’m very pleased with the performance and quality of visuals you can produce with WebGL and ThreeJS. After spending the past couple of years getting intimate with the 2D-Canvas element, I feel like WebGL is Canvas’s steroided, faster, better looking 3D brother.

Originally published at blogs.truthlabs.com on October 2, 2013.