Depth Displacement effect

[juniorxsound]

Added a depth displacement effect example inspired by Pixi.js displacement filter

• Added effects/displacement example
• Added js/effects/DepthDisplacement.js
• Added a color image (textures/depth_effect_color.png) and depth map (textures/depth_effect_depthmap.png)

[looeee]

Live version

[looeee]

This is pretty cool, but I suspect it would look better with a picture that has more depth. Here is the Pixi.js example for contrast.

[juniorxsound]

@looeee Thanks and I totally agree

I think having a depth-map with more planes (background/mid-ground/foreground) would work better (as the Pixi.js example shows), let me try and commit a new set of textures and see whether it makes the example more compelling

[looeee]

Updated live version

BTW you can make live versions using rawgit.com

This looks better, although I think the depth map still needs to be cleaned up. There's lots of artefacts as you move to the extreme left or right. Or is that a limitation of this technique?

[juniorxsound]

Thanks for the live versions 🙌 I'll make sure to update them in future commits

It is a result of the technique, however, the DepthDisplacementEffect has a method for setting the amount of displacement applied using effect.setDisplacement( amount );. Perhaps, it would make sense to slightly lower the number on the example so the artifacts are not as visible.

[juniorxsound]

Live version

[Mugen87]

@mrdoob Are you interested in such an effect? The demo from the mentioned article implements depth displacement with Pixi.js. Do you want a similar effect in three.js?

Also note @WestLangley view (see #14479 (comment)). The code would fit well in the forum's Showcase category.

I don't feel strong about both option. In any event, the PR would require some subsequent works (creating TS files, module migration) if it is going to be merged. I can support here if @juniorxsound has no time.

[juniorxsound]

@Mugen87 Happy to put in the work if it is going to be merged 🙌🏽

[Mugen87]

Also note @WestLangley view (see #14479 (comment)). The code would fit well in the forum's Showcase category.

In the meanwhile, it's better to share this code as a showcase in the forum. Or at Shadertoy like suggested in #14479 (comment).

In any event, PixiJS is probably a better choice than three.js if you want to create this kind of effect (the mentioned demo uses a the built-in PIXI.filters.DisplacementFilter class).