[SOLVED] Outlining a partially transparent 3D model


I’m trying to do a simple “click and select” 3D model viewer, but I’ve run into a snag. The current model I’m using looks like this:

If I use my current outline shader on the hopper, it shows through the transparency:

I know I have to mask the outline object with its parent somehow, I’m just not sure how to do it. If it helps, the outline material script I’m using looks like this:

function createOutlineMaterial(thickness)
	var outline_shader = {
		vertex_shader: [
			"uniform float offset;",
				"void main() {",
					"vec4 pos = modelViewMatrix * vec4( position + normal * "+thickness+", 1.0 );",
					"gl_Position = projectionMatrix * pos;",
		fragment_shader: [
			"void main(){",
				"gl_FragColor = vec4( 87.0/256.0, 222.0/256.0, 27.0/256.0, 0.35 );",

	var outline_material = new THREE.ShaderMaterial({
		vertexShader: outline_shader.vertex_shader,
		fragmentShader: outline_shader.fragment_shader,
		morphNormals: true
	outline_material.side = THREE.DoubleSide;
	outline_material.transparent = true;
	outline_material.depthTest = false;
	outline_material.depthWrite = false;
	return outline_material;

Thank you very much in advance!


Solved my problem. Rather than drawing a model behind the model I want outlined, I drew the outline models to a different scene, and then used that scene as a stencil to get the outlines. More info here:


1 Like