three.js - 轮廓对象(正常比例+模具蒙版)three.js

一段时间以来，我一直在努力弄清楚如何在游戏中进行对象选择。 (因此，玩家可以将鼠标悬停在其他所有物体上看到该物体)

结果如下所示:

我想使用的解决方案是这样的:

第1层:以常规阴影绘制模型。

第2层:以红色绘制副本，并使用顶点着色器沿法线缩放。

mask :绘制模型的黑色/白色平面颜色，以将其用作第二层的模板 mask ，以隐藏内部并显示第1层。

问题来了。我真的找不到关于口罩的任何好的学习资料。我可以从轮廓形状中减去内部吗？我究竟做错了什么？

我不知道如何堆叠渲染 channel 以使蒙版起作用。 :(

这是jsfiddle demo

renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, renderTargetParameters)

composer    = new THREE.EffectComposer(renderer, renderTarget)
// composer   = new THREE.EffectComposer(renderer)

normal      = new THREE.RenderPass(scene, camera)
outline     = new THREE.RenderPass(outScene, camera)
mask        = new THREE.MaskPass(maskScene, camera)
// mask.inverse = true
clearMask   = new THREE.ClearMaskPass
copyPass    = new THREE.ShaderPass(THREE.CopyShader)
copyPass.renderToScreen = true

composer.addPass(normal)
composer.addPass(outline)
composer.addPass(mask)
composer.addPass(clearMask)
composer.addPass(copyPass)

另外我也不知道是使用渲染目标还是渲染器作为 Composer 的源。 :(我应该首先获得 Composer 的通行证吗？为什么我需要复制通行证？我知道了很多问题。但是没有足够的资源可以学习，我已经在谷歌上搜索了好几天。

感谢您的任何建议!

最佳答案

这是工作解决方案的js fiddle 。别客气。 :)

http://jsfiddle.net/Eskel/g593q/6/

仅使用两个渲染过程进行更新(贷记给WestLangley):
http://jsfiddle.net/Eskel/g593q/9/

缺少的部分是:

composer.renderTarget1.stencilBuffer = true
composer.renderTarget2.stencilBuffer = true
outline.clear = false

关于three.js - 轮廓对象(正常比例+模具蒙版)three.js，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23183507/