用动画蒙皮网格物体获得轮廓效果的最佳方法是什么?
模型以特定姿势暂停的示例: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/)。
使用发光材料的缺点:
使用多个网格的缺点:
问题:
是否可以使当前的ThreeJS Outline效果与动画SkinnedMesh一起正常工作?
是的,但是必须增强内部顶点着色器。我已经添加了相应的着色器区块在这个更新的小提琴(morphtarget_pars_vertex
,skinbase_vertex
,skinning_pars_vertex
,begin_vertex
,morphtarget_vertex
,skinning_vertex
,project_vertex
)。
https://jsfiddle.net/35vrtm42/
但是请注意,马动画是基于变形目标的。
使用此增强功能,你只需告诉OutlinePass
即可启用相应的动画类型。对于小提琴,有必要这样做。
outlinePass.depthMaterial.morphTargets = true;
outlinePass.prepareMaskMaterial.morphTargets = true;
如果你的模型使用骨骼动画,则只需将morphTargets
属性替换为即可skinning
。
three.js R112
抱歉,Mugen87,我进行了“换肤”替换,但使用冲锋队示例时出现以下错误:
THREE.WebGLProgram: shader error: 1286 35715 false gl.getProgramInfoLog No compiled vertex shader when at least one graphics shader is attached.
参见:jsfiddle.net/Eketol/5z3u047m抱歉,仍然缺少着色器块。让我更新答案:jsfiddle.net/6k1x8bfq
现在完美。再次感谢!
顺便说一句:在下一个版本中
R113
,着色器修改已完成。因此,您可以直接从repo / npm包中使用该文件。