轮廓对象（正常比例+模板蒙版）three.js

Question

有一段时间，我一直试图弄清楚如何在游戏中做一个对象选择大纲。 （因此玩家可以在鼠标悬停时看到对象超过其他所有内容）

这是结果的样子：

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

1. 第1层：以常规着色绘制模型。
2. 第2层：绘制一个红色的副本，使用顶点着色器沿法线缩放。
3. 蒙版：绘制模型的黑/白平面颜色，将其用作第二层的模板蒙版，隐藏内部并显示第1层。

这就是问题所在。我无法找到任何有关面具的好学习资料。我可以从轮廓形状中减去内部吗？我做错了什么？

我无法弄清楚如何堆叠渲染过程以使蒙版工作。 ：（

这里是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)

此外，我不知道是否使用渲染目标或渲染器作为作曲家的来源。 :(我应该在作曲家的第一关？我为什么需要复制通过？我知道这么多问题。但是没有足够的资源可以学习，我已经谷歌搜索了好几天。

感谢您的任何建议！

Answer 1

这是一个工作解决方案的小提琴。别客气。 ：）

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

仅使用两个渲染过程进行更新（归功于WestLangley）： http://jsfiddle.net/Eskel/g593q/9/

缺少的部分是这些：

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

Answer 2

现在我觉得我从THREEx库中找到了一个更简单的解决方案。它预先缩放网格，因此您不需要实时着色器。 http://jeromeetienne.github.io/threex.geometricglow/examples/geometricglowmesh.html