复杂形状字符轮廓答案

【问题标题】：Complex shape character outline复杂形状字符轮廓
【发布时间】：2013-07-18 08:46:24
【问题描述】：

假设我有这个角色，我想让用户选择它，所以当它被选中时，我想在它周围显示一个轮廓。

角色是一个带有一些网格的 object3D。我试图克隆并设置一个背面材质，但它不起作用，问题是形状中的每个立方体都是单独渲染背面的，所以轮廓是错误的。

是否需要为轮廓创建另一个网格，有更简单的方法吗？

【问题讨论】：

您可以克隆并设置普通材质，然后稍微缩放克隆并将其移离相机。所以轮廓只是实际模型后面的更大模型。只是一个想法，我记得读过一些游戏就是这样做的......
好吧，谢谢你。我会尝试从相机中移动克隆来测试你的方式，但问题是我的角色比这更复杂，而且他们在地上行走我猜只是因为相机是从顶部看的，轮廓克隆会去地下，把一切都搞砸！
你最终设法让它工作了吗？我对解决方案非常感兴趣。
我提供赏金是因为我真的很想知道如何做到这一点。与 Ashkan 一样，使用背面材料创建克隆会出现问题，因为形状很复杂。我怀疑需要做的是这样的： 1.首先需要渲染背景 2.然后，在一个单独的透明层上，具有平面颜色的角色模型，比原来的稍大， 3.在另一个透明层上用它的正常材质/纹理对角色进行分层 4. 最后，角色层需要放在轮廓层的顶部，它们组合在一起需要放在背景中
Ashkan - 请记得点击复选标记“接受”答案。谢谢。

标签： javascript three.js outline

【解决方案1】：

@spassvolgel 写的是正确的；

我怀疑需要做的事情是这样的：1.首先需要渲染背景2.然后，在一个单独的透明层上，使用平面颜色的角色模型，比原来的稍大，3.在另一个透明层上，角色及其正常的材质/纹理 4. 最后，角色层需要放在轮廓层的顶部，它们的组合需要放在背景中

您只需创建多个场景并将它们与顺序渲染通道组合：

renderer.autoClear = false;
. . . 

renderer.render(scene, camera); // the entire scene
renderer.clearDepth();
renderer.render(scene2, camera); // just the selected item, larger, in a flat color
renderer.render(scene3, camera); // the selected item again

三个.js.r.129

【讨论】：

非常感谢！这看起来很有希望。赏金将很快到期，但我没有时间深入研究代码，所以我将奖励给你。再次感谢！
感谢您的回答，演示也很棒。但仍有一些事情困扰着我。我的问题的重点是对象不是单个网格......
@AshkanGhodrat 您是否无法使用这种方法来处理具有子网格的对象？
好吧，我无法修改你的 meshGroup 代码，但你认为它解决了这张图片的问题吗？ s30.postimg.org/oxpnl0xsx/shaders.jpg
我认为您应该发布一个新问题，并明确说明您的附加要求。

【解决方案2】：

您可以通过将轮廓对象渲染到（理想情况下）目标帧缓冲区大小的纹理，然后使用该纹理渲染帧缓冲区大小的四边形并让片段着色器模糊或执行其他操作来获得良好的结果图像变换。我有一个使用原始 WebGL 的示例 here，但您可以轻松制作自定义 ShaderMaterial。

【讨论】：

【解决方案3】：

我在 gamedev.stackexchange.com/ 上发现了一些有用的东西。他们谈论模板缓冲区。不过，我不知道如何将其应用于 THREE.js..

https://gamedev.stackexchange.com/questions/59361/opengl-get-the-outline-of-multiple-overlapping-objects

【讨论】：

【解决方案4】：

我还没有找到答案，但我想演示当我创建多个网格时会发生什么，并在每个网格后面放置另一个网格

side: THREE.BackSide

http://jsfiddle.net/GwS9c/8/

如您所见，这不是您想要的效果。我想在所有三个网格后面有一个干净的轮廓，不重叠。我的着色器编程水平真的不存在，但在大多数在线资源上，人们都说要使用这种克隆网格的方法。

【讨论】：

我认为着色器的结果不会有太大的不同，除非你写一些复杂的着色器，我不能：D，是的，背面不是这个问题的最佳主意......跨度>

【解决方案5】：

适用于任何复杂几何的通用解决方案可能是通过三个.js 中的ShaderMaterial class 应用片段着色器。不确定您的经验水平，但如果您需要，可以找到着色器简介here。

可以在here 中找到使用着色器突出几何图形的一个很好的示例。在他们的顶点着色器中，他们计算顶点的法线和用于表示发光效果强度的参数：

uniform vec3 viewVector;
uniform float c;
uniform float p;
varying float intensity;
void main() 
{
    vec3 vNormal = normalize( normalMatrix * normal );
    vec3 vNormel = normalize( normalMatrix * viewVector );
    intensity = pow( c - dot(vNormal, vNormel), p );

    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

这些参数被传递给片段着色器，用于修改几何体周围像素的颜色值：

uniform vec3 glowColor;
varying float intensity;
void main() 
{
    vec3 glow = glowColor * intensity;
    gl_FragColor = vec4( glow, 1.0 );
}

【讨论】：

看这张图，这是我的着色器问题s30.postimg.org/oxpnl0xsx/shaders.jpg