Added outlined-pixel pass example

[KodyJKing]

This is a pixelization effect with outlines that add a bit of a pixel art feel.

https://www.youtube.com/watch?v=-WHW48SlvsI

[WestLangley]

EDIT: new live link https://raw.githack.com/KodyJKing/three.js/outlined-pixel-example/examples/webgl_postprocessing_pixel.html

[Mugen87]

There is already: https://threejs.org/examples/webgl_postprocessing_pixel

Would this PR be an improvement over the existing approach? I don't think the project needs two shaders for pixelated effects.

[gkjohnson]

I think the example is much more compelling than the existing one personally especially for people who might be looking to make retro-style games. The addition of normal and depth edge sharpening is really nice and gives a more stylized video game sprite-like effect -- it looks nice.

The down side is that it requires a lot more shader texture sampling to achieve those edges. If performance impact is a concern then maybe the effect could be adjusted so no depth or normal sampling is done if either corresponding edge strength parameter equals zero. Otherwise I'd think this would be a neat replacement for the existing pixel effect.

[Mugen87]

@KodyJKing As a next step I suggest you replace the existing webgl_postprocessing_pixel example with your code. Since you have implemented the effect as a pass, PixelShader can be removed.

[haroldiedema]

I just wanted to say that this is bloody awesome and runs smooth as butter on my 'el-cheapo' Galaxy A50. Very nicely done! ❤️❤️

[KodyJKing]

@Mugen87 I replaced webgl_postprocessing_pixel and removed the PixelShader. However, I'm thinking PixelShader still has a use case because my RenderPixelatedPass handles the initial render of the scene and expects to be the first pass in the effect composer. If someone wanted to render the scene and apply various effects before pixelization, my pass wouldn't work for them.

[Mugen87]

I understand but I still think a single pixel shader implementation is sufficient. We have to maintain all this code and thus make compromises.

Besides, a basic pixelated effect is not hard to implement. Most users should figure out by themselves how to do it.

[Mugen87]

@mrdoob This PR looks good.

[drcmda]

@Mugen87 @KodyJKing this looks 😍, just a detail: this is not a correct import, it should just be three:

} from '../../../build/three.module.js';

and the normalRenderTarget should probably be RGBAFormat

[Mugen87]

Closing in favor of #24873.

[DefinitelyMaybe]

Hey @KodyJKing !

Loving the pixel effect! thank you so much for working on this :1st_place_medal:

[KodyJKing]

Oh, I haven't checked in on this in a while. Thanks @Mugen87 for getting it ready to merge.