three.js - 轮廓对象(正常比例+模板掩模)三.js

Question

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

结果应该是这样的:

我想使用的解决方案如下:

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

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

我不知道如何堆叠渲染 channel 以使 mask 发挥作用。 :(

这是 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 中拥有第一遍吗？为什么我需要复制通行证？我知道有很多问题。但是没有足够的资源可供学习，我已经搜索了好几天了。

感谢您的建议!

Answer 1

这是一个 js fiddle 工作解决方案。不客气。 :)

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

仅使用两个渲染 channel 进行更新(归功于 WestLangley): http://jsfiddle.net/Eskel/g593q/9/

缺少的部分是:

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