OutlineEffect renders incorrectly

Hi all, I’ve been trying to implement a cel-shading effect for my game in multiple ways - one of these ways was to use the OutlineEffect from here - https://github.com/mrdoob/three.js/blob/master/examples/js/effects/OutlineEffect.js

The effect loads fine without issues and it does display… incorrectly, however. It seems to just pull apart the faces of my mesh and offsetting them, which leaves with gaps which are not ideal, obviously.
See examples here:
chrome_2019-04-02_15-50-39
chrome_2019-04-02_16-09-19

This is also confirmed for meshes that aren’t imported -
image

there are 2 ways, generally speaking, to do outlines:

  1. Using geometry (geometry shader, or vertex shader)
  2. Screen-space post processing

What that shader does is move vertices along normal vector. Here’s a sample of the second technique:
image

There are several ways of doing that, I do an opaque pass, followed by a mask + blur, you end up with the silhouette being cut out (transparent) and blurred edges spill over the mask, forming glow-like appearance.

1 Like

Tweaking the settings, globaly or per object, can help here. They are not documented but when you open de file you can find some comments describing them at the top.

I’d rather avoid using postprocessing as I’ve had troubles getting it to work - also the blurring isn’t what I need. I’d like to simulate solid black lines on edges to simulate a cel-shading effect.
Thanks for the input, though :slight_smile:

@Fedor_van_Eldijk thanks! I’ve had a play with these but I still have the issues.