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

【问题标题】：Outline object (normal scale + stencil mask) three.js轮廓对象（正常比例+模板蒙版）three.js
【发布时间】：2014-06-04 16:44:54
【问题描述】：

一段时间以来，我一直试图弄清楚如何在我的游戏中制作对象选择大纲。（所以玩家可以在鼠标悬停时看到物体超过其他一切）

结果应该是这样的：

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

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

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

我不知道如何堆叠渲染通道以使遮罩起作用。 :(

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

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

感谢您的建议！

【问题讨论】：

也许另一种方法对您有用：stackoverflow.com/questions/17739760/…
@WestLangley 哦，哇。我完全错过了这一点。这看起来就像我需要的东西。我会尝试一下。我简直不能感谢你！很高兴你经常出现堆栈溢出。
@WestLangley 仔细检查，这对我没有帮助。我不仅需要将对象复制到第二个场景，还需要复制所有动态灯光，这会增加很多开销。所有这些都是为了在其他人面前绘制整个对象，这甚至不是我最初想要的。我真的只需要画出轮廓，这意味着要找出遮罩的工作原理。或者使用某种光栅过滤器。
没关系，明白了。我会发布解决方案。
查看我对您发布的解决方案的评论。这仅适用于范围较窄的网格类型，并不是一个完整的解决方案。

标签： three.js webgl

【解决方案1】：

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

【讨论】：

【解决方案2】：

这是一个带有工作解决方案的 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

【讨论】：

不错！您不需要 3 个摄像头（至少在此演示中），并且不需要将摄像头添加到场景中。此外，通过指定四元数，您可以省略更新渲染循环中 2 个网格的旋转。见jsfiddle.net/g593q/7
@WestLangley 不错！我只是想弄清楚那个旋转部分。非常感谢。 :) 现在最后要解决的是从一个蒙皮网格到另一个蒙皮网格的骨骼动画数据。
如果您有新问题，请发新帖。
这是原始帖子的另一个更简单的解决方案：jsfiddle.net/g593q/8
此解决方案仅适用于具有漂亮、圆形、连接面的网格。将 Torus Knot 更改为 BoxGeometry，您会发现它无法正确找到边缘。问题出在您编写的着色器上，它只会在法线方向上偏移顶点，当您的边之间发生较大程度的变化时，它会留下一个“洞”，就像一个盒子一样。