threejs为靠近的对象创建"cel-shading“

Question

因此，我正在尝试“勾勒”3D对象。标准问题，对于这个问题的答案是，你复制网格，给它上色，放大它，然后设置它只渲染“指向错误方向”的面-对我们来说，这意味着在材质中设置side:THREE.BackSide。例如这里https://stemkoski.github.io/Three.js/Outline.html

但是看看我会发生什么

这是我想做的

​

我有一堆靠得很近的物体--它们可以“进入”彼此的轮廓。

对我应该做什么有什么建议吗？我想要看到的是渲染的帧上到处都是这些形状与背景或彼此接触的地方，在那里你有轮廓。

Answer 1

你希望发生什么？在你的例子中是一个网格，还是一堆相交的网格。如果是一堆相交的网格，你想让它们有一个轮廓吗？其他网格呢？我的观点是，如果你使用多个网格，你需要一些方法来定义哪些“组”的网格有一个单一的轮廓。

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

另一种可能可行的解决方案是，可以将轮廓外壳移回Z，这样就不会相交。可以一直返回(剪辑空间中的Z=1)，也可以返回一些可设置的量。使用组进行绘制，以便前面的对象集合具有阻止后面的组的轮廓，将会更加困难。

例如，如果prisoner849链接到的I take this sample

并将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 );，则更容易看到

原件：

​

​

之后：

​

​