0

I am trying to identify the visible faces of a mesh within a certain area on screen (defined by an SVG path) in three.js

There is no guarantee that either the path or the mesh will not be concave.

I am able to:

  1. filter the faces within the area (by mapping the vertices to their 2d position and using elementFromPoint
  2. filter faces facing camera like this camera.getWorldDirection().dot(face.normal) < 0)

but I am not able to filter out faces that are hidden by other faces.

That means that if I the mesh is - say - a vase, I would end up selecting both the visible faces on the outside of the vase, and the ones inside, that are not visible, but face towards the camera.

What would the method be to filter out faces not visible to the camera?

simone
  • 4,667
  • 4
  • 25
  • 47
  • I don't think there is a simple solution to this problem. You can try rendering your mesh to a seperate buffer (`THREE.WebGLRenderTarget`) using `THREE.MeshDepthMaterial`, and then [use it](https://stackoverflow.com/questions/18167797/three-js-retrieve-data-from-webglrendertarget-water-sim) to determine if certain face is hidden. – StrandedKitty Aug 13 '19 at 11:04
  • How are you filtering and performing the dot calculations on the faces? Are you using a Raycaster? – M - Aug 13 '19 at 17:18
  • @marquizzo I do not use a raycaster - just the camera vector calculation explained in the question: it works well, and it's fast – simone Aug 14 '19 at 06:34
  • @simone It sounds like you're performing the same calculations that a renderer already does. 1. Filter faces within area = *frustum culling* 2. Filter faces facing camera = *backface culling* 3. Filter faces hidden by others = *z-culling*. I don't know the math involved, but maybe [this article](https://en.wikipedia.org/wiki/Z-buffering#Z-culling) can point you in the right direction. – M - Aug 14 '19 at 17:06

0 Answers0