Lindsay Kay
BioDigital Tech Talk
July 14, 2017
for
in
Step (3)
Step (5)
Combined result
We expand along the normals because simply scaling an object will create a uneven silhouette:
Expand each outline vertex by amount proportional to its depth
// Render object using standard shader
gl.clearStencil(0);
gl.clear(GL_STENCIL_BUFFER_BIT);
gl.enable(GL_STENCIL_TEST);
gl.stencilFunc(GL_ALWAYS, 1, -1);
gl.stencilOp(GL_KEEP, GL_KEEP, GL_REPLACE);
drawObject();
// Render glowing, expanded version of object
gl.stencilFunc(GL_NOTEQUAL, 1, -1);
gl.stencilOp(GL_KEEP, GL_KEEP, GL_REPLACE);
drawObject();
attribute vec4 position;
uniform mat4 modelMat;
uniform mat4 viewMat;
uniform mat4 projMat;
attribute vec3 normal;
uniform float outlineWidth;
void main(void) {
vec4 projPos = projMat * viewMat * modelMat * vec4(position.xyz, 1.0);
vec3 offset = (normal * (outlineWidth * (projPos.z/1.0)));
vec4 worldVertex = modelMat * vec4(modelVertex.xyz + offset, 1.0);
mat4 viewMatrix = viewMat;
gl_Position = projMat * (viewMatrix * worldVertex);
}
uniform vec3 outlineColor;
void main(void) {
gl_FragColor = vec4(outlineColor, 1.0);
}
Vertex shader:
Fragment shader:
Standard shader (1)
Thick wireframe (5)
Result