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!

Answer 2

Yes it is possible but not in a simple out-of-the-box way. For toon shading there are even shaders included in /examples/js/ShaderToon.js

For the outlines I think the most commonly suggested method is to render in two passes. First pass renders the models in black, and slightly larger scale. Second pass is normal scale and with the toon shaders. This way you'll see the larger black models as an outline. It's not perfect but I don't think there's an easy way out. You might have more success searching for "three.js hidden line rendering", as, while different look, somewhat similar method is used to achieve that.

Answer 3

Its a old question but here is what i did.

I created a Outlined Cel-shader for my CG course. Unfortunately it takes 3 rendering passes. Im currently trying to figure out how to remove one pass.

Here's the idea: 1) Render NormalDepth image to texture.

In vertex shader you do what you normally do, position to screen space and normal to screen space.

In fragment shader you calculate the depth of the pixel and then create the normal color with the depth as the alpha value

float ndcDepth = (2.0 * gl_FragCoord.z - gl_DepthRange.near - gl_DepthRange.far) / (gl_DepthRange.far - gl_DepthRange.near);
float clipDepth = ndcDepth / gl_FragCoord.w;

2) Render the scene on to a texture with cel-shading. I changed the scene override material.

3)Make quad and render both textures on the quad and have a orto camera look at it. Cel-shaded texture is just renderd on quad but the normaldepth shaded on that you use some edge detection and then with that you know when the pixel needs to be black(edge).