Using OutlinePass (THREE.js r102) with skinned mesh

问题

/examples/js/postprocessing/OutlinePass.js from THREE.js r102 does not appear to work with skinned meshes. Specifically, the rendered outline always stays in the mesh's rest position.

Is there some way to get this working (that is, to update the outline to reflect the current pose of an animated mesh)? OutlinePass does not appear to be documented (mod the comments in the code itself).

Is there some other accepted method of outlining animated meshes? I'm in the process of migrating some code from r7x, where I ended up accomplishing this by manually creating a copy of the mesh and applying a shader material that scales along the normals. I can do that again, but if there's a simpler/better supported method to accomplish the same effect I'd rather use it instead of reproducing a method that breaks every new major release.

A simple jsfiddle illustrating the issue:

https://jsfiddle.net/L69pe5q2/3/

This is the code from the jsfiddle. The mesh I use is the SimpleSkinning.gltf example from the three.js distribution. In the jsfiddle I load it from a dataURI so it doesn't complain about XSS loading, and I've edited the base64-encoded data out (and replaced it with [FOO]) in the code below, purely for readability.

The OutlinePass is created and added to the composer in initComposer().

var camera, light, renderer, composer, mixer, loader, clock;
var scene, mesh, outlinePass;
var height = 480,
  width = 640;
var clearColor = '#666666';

load();

function load() {
  loader = new THREE.GLTFLoader();
  clock = new THREE.Clock();
  scene = new THREE.Scene();
  loader.load('data:text/plain;base64,[FOO]', function(obj) {
    scene.add(obj.scene);
    mixer = new THREE.AnimationMixer(obj.scene);
    var clip = THREE.AnimationClip.findByName(obj.animations,
      'Take 01');
    var a = mixer.clipAction(clip);
    a.reset();
    a.play();

    mesh = obj.scene;
    mesh.position.set(-7, 2.5, -7);

    init();
    animate();
  });
}

function init() {
  initCamera();
  initScene();
  initRenderer();
  initComposer();

  outlinePass.selectedObjects = [mesh];
}

function initCamera() {
  camera = new THREE.PerspectiveCamera(30, width / height, 1, 10000);
  camera.position.set(7, 0, 7);
  camera.lookAt(0, 0, 0);
}

function initScene() {
  light = new THREE.AmbientLight(0xffffff)
  scene.add(light);

}

function initRenderer() {
  renderer = new THREE.WebGLRenderer({
    width: width,
    height: height,
    antialias: false,
  });
  renderer.setSize(width, height);
  renderer.setClearColor(clearColor);
  document.body.appendChild(renderer.domElement);
}

function initComposer() {
  var renderPass, copyPass;

  composer = new THREE.EffectComposer(renderer);

  renderPass = new THREE.RenderPass(scene, camera);
  composer.addPass(renderPass);

  outlinePass = new THREE.OutlinePass(new THREE.Vector2(width, height),
    scene, camera);
  composer.addPass(outlinePass);
  outlinePass.edgeStrength = 10;
  outlinePass.edgeThickness = 4;
  outlinePass.visibleEdgeColor.set('#ff0000');

  copyPass = new THREE.ShaderPass(THREE.CopyShader);
  copyPass.renderToScreen = true;
  composer.addPass(copyPass);
}

function animate() {
  var delta = clock.getDelta();
  requestAnimationFrame(animate);
  update(delta);
  render(delta);
}

function update(delta) {
  if (mixer) mixer.update(delta);
}

function render(delta) {
  composer.render();
}

来源：https://stackoverflow.com/questions/55407977/using-outlinepass-three-js-r102-with-skinned-mesh

标签

three.js