3D model outline using stencil buffer

I'm trying to outline a 3D model in WebGL. I've tried using a stencil buffer techique with glLineWidth and glPolygonMode. However, Mozilla's WebGL reference says that the minimum and maximum widths of lines are 1 (therefore can't be modified). I've tried it using it without glLineWidth and just use wireframe mode.

for (let i = 0; i < node_to_display.leaves.length; i++) {

if (node_to_display.pickable) {
this.scene.gl.enable(this.scene.gl.STENCIL_TEST);
this.scene.gl.clearStencil(0);
this.scene.gl.clear(this.scene.gl.STENCIL_BUFFER_BIT);
this.scene.gl.stencilFunc(this.scene.gl.ALWAYS, 1, -1);
this.scene.gl.stencilOp(this.scene.gl.KEEP, this.scene.gl.KEEP, this.scene.gl.REPLACE);
node_to_display.leaves[i].primitive.primitiveType = this.scene.gl.TRIANGLES;
}

node_to_display.leaves[i].display(); //Display leaves

if (node_to_display.pickable) {
this.scene.activeShader.setUniformsValues({ outline_color: [1, 0, 0, 1] });

this.scene.gl.stencilFunc(this.scene.gl.NOTEQUAL, 1, -1);
this.scene.gl.stencilOp(this.scene.gl.KEEP, this.scene.gl.KEEP, this.scene.gl.REPLACE);
node_to_display.leaves[i].primitive.primitiveType = this.scene.gl.LINES;
node_to_display.leaves[i].display();  //Display leaves in wireframe
}
}


However this is the result I'm getting:

The problem with this result is that the wireframe still shows where there is a triangle mesh "behind it".

[EDIT] The result I'm looking for is something like this:

• What kind of output are you looking for? Just a wireframe like this but without the shaded solid behind it? A wireframe with the hidden lines also visible? Or a line around the silhouette of the object, without a wireframe? Dec 20, 2017 at 14:34
• @DanHulme I'm sorry, I should've made clear what result I was looking for. This is an example: gyazo.com/000673d8afda399013a1ad72e71b7a62 Dec 20, 2017 at 14:47
• I assume you rerender your object after your stencil pass. have you reset your primitive type to triangles rather than lines?
– Tare
Dec 20, 2017 at 14:55
• @Tare By re-render you mean in a different frame or still the same frame? The primitive type is reset to triangles before rendering the object (line 9: node_to_display.leaves[i].primitive.primitiveType = this.scene.gl.TRIANGLES;) Dec 20, 2017 at 14:58
• It's been some time since I worked with stenciling, but I think you might be wrong in your way of going about this. What I think you are doing is rendering the original image, and then rerendering it's wireframe (by setting the primitive type to line), just that you're rendering red wherever the stencil buffer is set. this would of course lead to the red wireframe you get right now. try rendering your second time (the "red pass") with primitive type triangles, I guess that would lead to the whole object being red.
– Tare
Dec 20, 2017 at 15:13