Three.js outlines
I'm sure I came late. Let's hope this will resolve the issue for someone later.
Here's the deal, you don't have to do everything twice, the overhead isn't really significant, all you have to do is duplicate the mesh and set the duplicated mesh material side to the "back side". There are no double passes. Instead, you will render two cells, with most of the contour geometry culling by WebGL by "dropping back surface".
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 culling on the back, check: http://en.wikipedia.org/wiki/Back-face_culling
This approach works well if you want to add an outline to objects without adding a tonal shader and thereby losing "realism".
Tone shading itself supports edge detection. They developed the "cel" shader in Borderlands to achieve this effect.
In cel shading, developers can either use the duplicate object method (executed at the [low] pipeline level) or use image processing filters to detect the edge. This is where the performance comparison between the two methods is compared.
More information on cel: http://en.wikipedia.org/wiki/Cel_shading
Hooray!
source to share
Yes, it is possible, but not in a simple ready-made form. There are even shaders included in /examples/js/ShaderToon.js for tone shading
For paths, I find the most commonly suggested technique to be two-pass rendering. The first pass displays the models in black and slightly larger scale. The second pass is a regular scale and with tone shaders. This way you will see the larger black models as an outline. It's not ideal, but I don't think there is an easy way out. You may be more successful in finding the "hidden line hidden". As, while a different approach is used for this, a somewhat similar method is used.
source to share
Its an old question, but here is what I did.
I created the outlined Cel shader for my CG course. Unfortunately it takes 3 gears. I'm currently trying to figure out how to remove one pass.
Here's the idea: 1) Render NormalDepth image to texture.
In a vertex shader, you do what you normally do, screen position and normal screen space.
In a flash shader, you compute the pixel depth and then create a normal color with depth as an 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 to the texture using cel-shading. I changed the material of the scene override.
3) Make an ATV and render both textures on the ATV and look at it. The cel-shaded texture is only a renderer on an ATV, but the normaldepth is shaded so that you use some edge detection and then that you know when the pixel should be black (edge).
source to share