Stencil Buffer Mesh Outlining in ThreeJS
<p>I'm digging into advanced features for my app with ThreeJS. I'm developing an outline feature, allowing to outline a mesh in a scene composed of multiple meshes.</p>

<p>My first implementation was made by duplicating the geometry, scaling it a little bit and then applying a specific shader for the outline. The main problem is that if I have to highlight my whole scene, I will need twice the memory to duplicate each objects.</p>

<p>That's why a decided to use the overrideMaterial attribute of THREE.Scene, to be able to make a second rendering pass without duplicating the geometry. In order to have the outline effect, I just used the stencil buffer between those two passes :</p>

<pre><code>function render() {
    gl.enable(gl.STENCIL_TEST);
    gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);

    renderer.clear();

    gl.stencilFunc(gl.ALWAYS, 1, 0xFF);
    gl.stencilMask(0xFF);
    renderer.render(scene, camera);

    gl.stencilFunc(gl.NOTEQUAL, 1, 0xFF);
    gl.stencilMask(0x00);

    scene.overrideMaterial = outlineMaterial;
    renderer.render(scene, camera);
    scene.overrideMaterial = null;
    gl.stencilMask(0xFF);
    gl.disable(gl.STENCIL_TEST);
}
</code></pre>

<p><a href="https://i.stack.imgur.com/9BjZy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9BjZy.png" alt="enter image description here"></a></p>

<p>The problem is that because the stencil buffer is filled between two render passes (and not two objects render call), my highlight is not fully done when an object is placed behind the object I want to highlight.</p>

<p>Does someone got an idea to solve this without having to modify ThreeJS code? The example is here : <a href="http://jsfiddle.net/Ludobaka/z2fLurLr/" rel="nofollow noreferrer">http://jsfiddle.net/Ludobaka/z2fLurLr/</a></p>

<p><strong>Edit :</strong></p>

<p>I'm creating a molecule visualisation tool. A molecule is composed of residues which are composed of atoms. For performance enhancing purpose, I'm only creating the big mesh corresponding to the molecule (otherwise for each molecule, I will have nbAtoms Object3D, which is a lot). I want to be able to highlight sub-parts of this mesh corresponding to a group of residues or group of atoms or even the whole molecule itself. That's why I decided to perform two render passes instead of just duplicating the geometry as it's done in the example below.</p>

<p>By duplicating the geometry, I will have to extract those subparts, create a new mesh for outline and manage them to avoid keeping them when they're not used.</p>