threejs - 为附近的物体创建“cel-shading”

Question

所以我试图“勾画”3D对象。标准问题，其答案是复制网格，将轮廓颜色着色，缩放，然后将其设置为仅渲染“指向错误方向”的面 - 对我们来说意味着设置方：THREE.BackSide在材料中。例如https://stemkoski.github.io/Three.js/Outline.html

但是看看我发生了什么

这是我想做的

我有一堆靠近在一起的物体 - 它们在彼此的轮廓内部“。”

关于我应该做什么的任何建议？我想要看到的是渲染帧上到处都是这些形状触摸背景或彼此，你有轮廓。

Answer 1

你想要发生什么？在您的示例中是一个网格还是一堆相交的网格。如果它是一堆相交的网格你想让它们有一个轮廓吗？其他网格怎么样？我的观点是你需要一些方法来定义哪些＆＃34;组＆＃34;如果您使用多个网格，网格会得到一个轮廓。

对于多个网格和一个轮廓，常见的解决方案是将单个组中的所有网格绘制到渲染目标以生成轮廓，然后对轮廓进行后处理以展开它。最后将轮廓应用于场景。我不知道一个three.js示例，但the concept is explained here和there's also many references here

可能有效的另一个解决方案应该是可以将轮廓外壳移回Z中，这样就不会相交了。要么一直回来（在剪辑空间中Z = 1）要么回到一些可设定的数量。使用组进行绘制，以便前面的对象集合具有阻挡后面的组的轮廓将更难。

例如，如果I take this sample囚犯849链接到

并将OutlineEffect.js中的vertexShaderChunk更改为此

  var vertexShaderChunk = `

    #include <fog_pars_vertex>

    uniform float outlineThickness;

    vec4 calculateOutline( vec4 pos, vec3 objectNormal, vec4 skinned ) {

      float thickness = outlineThickness;
      const float ratio = 1.0; // TODO: support outline thickness ratio for each vertex
      vec4 pos2 = projectionMatrix * modelViewMatrix * vec4( skinned.xyz + objectNormal, 1.0 );
    // NOTE: subtract pos2 from pos because BackSide objectNormal is negative
      vec4 norm = normalize( pos - pos2 );

   // ----[ added ] ----

      // compute a clipspace value
      vec4 pos3 = pos + norm * thickness * pos.w * ratio;

      // do the perspective divide in the shader
      pos3.xyz /= pos3.w;

      // just return screen 2d values at the back of the clips space
      return vec4(pos3.xy, 1, 1);

    }

  `;

如果删除对reflectionCube的所有引用并将清除颜色设置为白色renderer.setClearColor( 0xFFFFFF );

，则会更容易看到

原件：

后：