Three.js outlines

Question

Is it possible to have an black outline on my 3d models with three.js?

I would have graphics which looks like Borderlands 2. (toon shading + black outlines)

Answer 1

I'm sure I came in late. Let's hope this would solve someone's question later.

Here's the deal, you don't need to render everything twice, the overhead actually is not substantial, all you need to do is duplicate the mesh and set the duplicate mesh's material side to "backside". No double passes. You will be rendering two meshes instead, with most of the outline's geometry culled by WebGL's "backface culling".

Here's an example:

var scene = new THREE.Scene();

//Create main object
var mesh_geo = new THREE.BoxGeometry(1, 1, 1);
var mesh_mat = new THREE.MeshBasicMaterial({color : 0xff0000});
var mesh = new THREE.Mesh(mesh_geo, mesh_mat);
scene.add(mesh);

//Create outline object
var outline_geo = new THREE.BoxGeometry(1, 1, 1);
//Notice the second parameter of the material
var outline_mat = new THREE.MeshBasicMaterial({color : 0x00ff00, side: THREE.BackSide});
var outline = new THREE.Mesh(outline_geo, outline_mat);
//Scale the object up to have an outline (as discussed in previous answer)
outline.scale.multiplyScalar(1.5);
scene.add(outline);

For more details on backface culling, check out: http://en.wikipedia.org/wiki/Back-face_culling

The above approach works well if you want to add an outline to objects, without adding a toon shader, and thus losing "realism".

Toon shading by itself supports edge detection. They've developed the 'cel' shader in Borderlands to achieve this effect.

In cel shading devs can either use the object duplication method (done at the [low] pipeline level), or can use image processing filters for edge detection. This is the point at which performance tradeoff is compared between the two techniques.

More info on cel: http://en.wikipedia.org/wiki/Cel_shading

Cheers!