[SOLVED] Outlining a partially transparent 3D model

Questions
, ,
1

Hello,

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;",
				"}"
		].join("\n"),
		fragment_shader: [
			"void main(){",
				"gl_FragColor = vec4( 87.0/256.0, 222.0/256.0, 27.0/256.0, 0.35 );",
			"}"
		].join("\n")
	};

	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!

[EDIT]

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:

http://stackoverflow.com/questions/35023275/three-js-usage-with-stencil-buffer

1 Like