How do I outline a group of meshes?

Questions
1

I want to use the Outline Pass on a gltf object that is composed of several meshes. Now, I can do it perfectly with Raycasting + Outline Pass when an object has one mesh, but when I hover over an object with several meshes, it outlines the meshes one by one, not the whole object. I tried targeting the parent, grouping the meshes and etc… No bueno whatsoever. I know, it might be impossible.

2

For super detailed geometries it may not be a good solution - but for smaller ones, you can try merging the geometries. Merge, hide and place that merged mesh in the same spot as the original one, then use it as a target for the outline pass.

3

I have a gltf model.

4

https://raw.githack.com/gonnavis/three.js/78e6575126b4dc13b1b6a51e88bf5086c17d677f/examples/webgl_postprocessing_ssr.html

I don’t know how I did it yet, it comes from a wrong result in debugging, but it seems to meet the needs. (Should be related to blur)

image
image642×680 10.3 KB

EDIT:
Oh, on my pixelRatio 1 pc the contour is obvious. But it’s hard to see on high pixelRatio mobile.

EDIT 2:
This must be a result of selective feature.

	this.metalnessOnMaterial = new MeshBasicMaterial( {
		color: 'white'
	} );

	this.metalnessOffMaterial = new MeshBasicMaterial( {
		color: 'black'
	} );

image
image806×565 8.33 KB

1 Like