R3F Outline Issues

Questions
, ,
1

Hello,

I would like to outline some objects. Unfortunately I have encountered a few problems. My setup looks like this: Outlines (forked) - CodeSandbox

  1. as soon as the EffectComposer is activated, the background becomes brighter.

  2. the edge color can not be chosen freely. In my example it should be green, but it is simply white/grey.

  3. when I outline a group, skinned meshes are neglected. (this demo shows that it should work but I am not sure how to do that)

What am I doing wrong?

Best

2
  1. visibleEdgeColor=“green” hiddenEdgeColor=“green” works for me

for the others you have to look into the postprocessing examples. or better ask in the pp channel on pmndrs discord where the author is active.

3

Oh sorry, I posted the wrong link to my setup. This is the correct one which shows the problems: Outlines (forked) - CodeSandbox

Setting the color to “green” is working but hex colors are not working.

4

I believe that because the outline pass is additive, it really only matches the given color well for fully-saturated colors. E.g. RGB = 1, 1, 0 will work, but RGB = 1, 1, 0.5 may not. Perhaps that could be changed/fixed, I’m not sure.

5

Ah yes, the blending has to be adjusted with the blending argument. These components are just dumb piped into PP, it works the same as the originals.

6

I tested all blendFunctions. 0-18 won’t give me the correct result and >19 lead to an error.

Do you have any idea what’s the problem with 1.? Even without Outline the background color changes if I enable the EffectComposer: Outlines (forked) - CodeSandbox

7

I’m not aware of any way to set an exact color for the outline. The effect may need to be customized, or you could file an issue or feature request on the post processing module.

For the background color — Any use of post processing will change how and where color management works, and works differently in three.js post processing VS. the separate pmndrs/postprocessing project. I think the quick fix would be to do convertSRGBToLinear() on your background color when using it with post processing.

8

Could you please let me know how to get correct colors. I tried all blending options. I am on 0.157.0. But the outline color always differs from the color I state to the props. In addition to that the outline color is different if either another object or the background is behind the line.