0

I’m building a program where you control a small avatar (this is a basic circle geometry or plane) that traverses through a scene filled with 3D Models and shapes. I’d like to achieve an effect similar to those found in many video games where you can see some sort of indication that the avatar is behind the various models and shapes. For example, here is an image to explain what i mean:

Example image to show desired effect

It doesn’t necessarily need to be the outline of the shape like in the example image. I’m open to any effect really that shows some sort of indication that the avatar is behind something but also cant be too performance heavy as I'd like to get this program running on mobile. Being able to customise the effect somewhat (e.g. color, thickness, etc) is also highly desirable. Any advice or suggestions would be greatly appreciated. There really doesn't seem to be much information that I can find to achieve an effect like this.

Also I thought it was worth mentioning that thus far I have attempted two things on my own. One is just rendering the avatar above everything. That turned out to look really silly and confusing. The other thing I attempted was to use an Outline post processing effect (from this library https://github.com/vanruesc/postprocessing). Which actually looked pretty great but proved to be too performance heavy to run optimally at all times (not to mention other problems with color blending and transparent / see-through shapes and models).

I understand this is kind of a shot in the dark but thought it didn't hurt to ask.

Liron Toledo
  • 21
  • 5
  • Outline: https://threejs.org/examples/?q=outline#webgl_postprocessing_outline Adjust the color of "hiddenEdgeColor". – prisoner849 Sep 14 '21 at 14:26
  • As I mentioned in the question. I tried using this method already but it was causing performance drops on certain devices (in particular crashes on iPhones) – Liron Toledo Sep 14 '21 at 14:29
  • You mentioned about trying the lib of postprocessing, that is not a part of three.js. Is the example I mentioned behaves the same way? – prisoner849 Sep 14 '21 at 14:37
  • If I understand the post processing library i linked correctly. It seems to be kind of like a wrapper around the post processing code from three.js (three.js post processing is a major dependency for this library). So I'm assuming that the results will be similar. Not to mention, I use this library already for many other post processing effects that might be effected if I try to use the three.js library at the same time (I have experienced issues trying to do this in the past) – Liron Toledo Sep 14 '21 at 14:44

0 Answers0