#three.js #glsl #shader #mask
#three.js #glsl #шейдер #маска
Вопрос:
Я пытаюсь воспроизвести пример Сении Задворных, представленный здесьhttps://medium.com/@Zadvorsky/webgl-masking-composition-75b82dd4cdfd
Его демо основано на three.js r80, поэтому я сослался на r101 и попытался удалить большинство несвязанных частей и просто создать сцену с сеткой и маской png сверху.
Вот мой код:http://jsfiddle.net/mmalex/y2kt3Lrf /
После комментария // composer.addPass(maskPass) отображается сетка. Но не похоже, что у uniform sampler2D tDiffuse есть вывод render pass.
Я ожидаю увидеть помощник grid и базовый HTML-контент под canvas, где маска делает canvas прозрачным.
ОБНОВЛЕНИЕ, работает сейчас, благодаря @Mugen87: http://jsfiddle.net/mmalex/y2kt3Lrf /
Ответ №1:
В вашей скрипке несоответствие файлов. Если я использую последнюю версию three.js и соответствующие классы постобработки, ваш код работает нормально:
three.js устарел параметр renderTarget and forceClear из WebGLrenderer.render() with R102 . Когда изменение было сделано, было необходимо изменить много файлов в каталоге examples, чтобы избежать предупреждений и даже поломок. Таким образом, использование новейших классов постобработки с более старой three.js версией не работает.
Поскольку изменения перечислены в примечании к выпуску, я предлагаю вам ознакомиться с соответствующими ссылками на источники для получения более подробной информации.