温馨提示:本文翻译自stackoverflow.com,查看原文请点击:three.js - Best method to get Outline effect with animated skinned mesh
outline post-processing three.js

three.js - 动画蒙皮网格物体获得轮廓效果的最佳方法

发布于 2021-03-28 00:37:19

用动画蒙皮网格物体获得轮廓效果的最佳方法是什么?

ThreeJS提纲发行

模型以特定姿势暂停的示例:https : //jsfiddle.net/Eketol/uev9o0qp/

composer = new THREE.EffectComposer( renderer );
renderPass = new THREE.RenderPass(scene, camera);
renderPass.setSize(window.innerWidth, window.innerHeight);
composer.addPass(renderPass);

outlinePass = new THREE.OutlinePass( new THREE.Vector2( this.viewWidth, this.viewHeight ), scene, camera );
outlinePass.visibleEdgeColor.set( 0xff0000 );
outlinePass.hiddenEdgeColor.set( 0xffff00 );
outlinePass.edgeGlow = 0;
outlinePass.edgeThickness = 0.3; // Default is 1.
outlinePass.edgeStrength = 3; // Default is 3.
outlinePass.setSize(window.innerWidth, window.innerHeight);
composer.addPass(outlinePass);

动画模型的另一个示例:https//jsfiddle.net/Eketol/4xcd365w/

据我了解,这是由于图形卡中完成了转换,因此代码没有顶点位置的引用。此问题也影响到射线播放器。

我已经阅读了多次尝试和实验。其中一些使用辉光材质,另一些使用带有多个渲染通道的两个或什至三个网格实例来完成轮廓(例如:http : //jsfiddle.net/Nv7Up/)。

使用发光材料的缺点:

  • 当摄像机距离改变时,轮廓线厚度也会改变。
  • 如果所选对象前面有另一个对象,则轮廓可能不完全可见。
  • 具有多个网格的对象可能看起来有些奇怪(尽管我可以忍受)。

使用多个网格的缺点:

  • 对于具有低多边形的简单对象也许可以,但是对于具有多个网格的自定义对象来说该死吗?例如:一支由随机装备的士兵组成的装备,例如剑,盾等。不确定使用其自定义属性克隆每个蒙皮对象的复杂性或性能成本。
  • 与其使用多个网格,不如使用原始网格并将其渲染到辅助场景中以获取蒙版或轮廓会更容易吗?

问题:

  1. 是否可以使当前的ThreeJS Outline效果与动画SkinnedMesh一起正常工作?
  2. 如果转换后的顶点信息在图形卡上,轮廓着色器是否可以直接从中获取顶点信息或渲染图像?
  3. 如果上述方法不可行,是否有一种方法可以将SkinnedMesh转换应用于顶点,以便着色器具有正确的姿势信息?

查看更多

提问者
Eketol
被浏览
55
Mugen87 2020-01-20 21:39

是否可以使当前的ThreeJS Outline效果与动画SkinnedMesh一起正常工作?

是的,但是必须增强内部顶点着色器。我已经添加了相应的着色器区块在这个更新的小提琴(morphtarget_pars_vertexskinbase_vertexskinning_pars_vertexbegin_vertexmorphtarget_vertexskinning_vertexproject_vertex)。

https://jsfiddle.net/35vrtm42/

但是请注意,马动画是基于变形目标的。

使用此增强功能,你只需告诉OutlinePass即可启用相应的动画类型。对于小提琴,有必要这样做。

outlinePass.depthMaterial.morphTargets = true;
outlinePass.prepareMaskMaterial.morphTargets = true;

如果你的模型使用骨骼动画,则只需将morphTargets属性替换为即可skinning

three.js R112