Лучший способ получить эффект Outline с анимированной сеткой - PullRequest
Новая
       102

Лучший способ получить эффект Outline с анимированной сеткой

2 голосов
/ 17 января 2020

Каков наилучший способ получить эффект контура с анимированной кожей меня sh?

ThreeJS Outline issue

Пример с моделью, приостановленной на Speci c Поза: 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/

Насколько я понимаю Это происходит из-за преобразований, выполняемых в графической карте, поэтому в коде нет ссылки на позиции вершин. Эта проблема также влияет на Raycaster.

Я прочитал несколько попыток и экспериментов. Некоторые из них используют светящийся материал, другие используют два или даже три экземпляра me sh с несколькими проходами рендеринга, чтобы сделать контур (например: http://jsfiddle.net/Nv7Up/).

Минусы с использованием светящийся материал:

  • Толщина контура будет изменяться при изменении расстояния до камеры.
  • Контур может быть не полностью виден, если перед выбранным объектом находится другой объект.
  • Объекты с несколькими сетками могут выглядеть немного странно (хотя я мог бы жить с этим).

Минусы при использовании нескольких сеток:

  • Может быть, хорошо для простых объектов с низкими полигонами, но ад для пользовательских объектов с несколькими сетками? Например: армия солдат со случайными аксессуарами, такими как мечи, щиты и т. Д. c. Не уверен, насколько сложным будет или какая производительность будет стоить, чтобы клонировать каждый объект со скином с его пользовательскими свойствами.
  • Вместо использования нескольких сеток было бы проще использовать оригинальный me sh и визуализировать его. во вторичной сцене, чтобы получить маску или контур?

Вопросы:

  1. Можно ли получить текущий эффект Три JS Outline, работающий должным образом с анимированным SkinnedMe sh?
  2. Если преобразованная информация о вершине находится на графической карте, возможно ли, чтобы контурный шейдер получал либо информацию о вершине, либо отрендеренное изображение непосредственно из нее?
  3. Если вышеописанное невозможно, есть ли способ применить преобразования SkinnedMe sh к вершинам, чтобы шейдер имел правильную информацию о позе?

1 Ответ

1 голос
/ 19 января 2020

Можно ли заставить текущий * 3 JS эффект Outline работать правильно с анимированным SkinnedMe sh?

Да, однако необходимо усовершенствовать внутренний вершинный шейдер. Я добавил соответствующие блоки шейдеров в эту обновленную скрипку (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

...