What is the best method to get the outline effect with animated skinned mesh?
An example with the model paused at a specific pose: 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);
Another example with animated model: https://jsfiddle.net/Eketol/4xcd365w/
As far as I understand, this is due to the transformations being done in the graphics card, so the code doesn't have a reference of the vertex positions. This issue also affects to the raycaster.
I have read multiple attempts and experiments. Some of them use a glow material, others use two or even three mesh instances with multiple render passes to get the outline done (eg: http://jsfiddle.net/Nv7Up/).
Cons using glow material:
Cons using multiple meshes:
Questions:
Is it possible to get the current ThreeJS Outline effect working properly with animated SkinnedMesh?
Yes, however an enhancement of an internal vertex shader is necessary. I've added the respective shader chunks in this updated fiddle (morphtarget_pars_vertex
, skinbase_vertex
, skinning_pars_vertex
, begin_vertex
, morphtarget_vertex
, skinning_vertex
, project_vertex
).
https://jsfiddle.net/35vrtm42/
But notice that the horse animation is based on morph targets.
With this enhancement, you only have to tell the OutlinePass
to enable the respective animation type. For the fiddle, it was necessary to do this.
outlinePass.depthMaterial.morphTargets = true;
outlinePass.prepareMaskMaterial.morphTargets = true;
If your model uses skeletal animation, just replace the morphTargets
property with skinning
.
three.js R112
Sorry Mugen87, I made the 'skinning' replacements, but I get the following error with the stormtrooper example:
THREE.WebGLProgram: shader error: 1286 35715 false gl.getProgramInfoLog No compiled vertex shader when at least one graphics shader is attached.
See: jsfiddle.net/Eketol/5z3u047mSorry, a shader chunk was still missing. Let me update the answer: jsfiddle.net/6k1x8bfq
Perfect now. Thanks again!
BTW: With the next release
R113
, the shader modifications are already done. So you can use the file directly from the repo/npm package.