Почему не работает мой холст для маски Three.js?

Question

Я пытаюсь воспроизвести приведенный здесь пример Сзени Задворных https://medium.com/@Zadvorsky/webgl-masking-composition-75b82dd4cdfd

Его демо-версия основана на three.js r80, поэтому я ссылался на r101 и пытался удалить большинство не связанных между собой частей, и просто поместил сцену с сеткой и маской png сверху.

Вот мой код: http://jsfiddle.net/mmalex/y2kt3Lrf/

Прокомментировав // composer.addPass(maskPass), показывается сетка. Но не похоже, что uniform sampler2D tDiffuse имеет результат рендеринга прохода.

Я ожидаю увидеть помощника по сетке и базовый контент HTML под холстом, где маска делает холст прозрачным.

ОБНОВЛЕНИЕ , работает сейчас, благодаря @ Mugen87: http://jsfiddle.net/mmalex/y2kt3Lrf/

Answer 1

В вашей скрипке есть несоответствие файлов.Если я использую последнюю версию three.js и соответствующие классы постобработки, ваш код работает нормально:

http://jsfiddle.net/pk24zby7/

three.js устарел renderTarget и forceClearпараметр от WebGLrenderer.render() с R102.Когда изменение было сделано, было необходимо изменить много файлов в каталоге примеров, чтобы избежать предупреждений и даже поломок.Поэтому использование последних классов пост-обработки с более старой версией three.js не работает.

Поскольку это изменение указано в примечании к выпуску , я предлагаю вам прочитать соответствующие PR для получения дополнительной информации.подробности.