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: