问题
I'm trying to reproduce example of Szenia Zadvornykh presented here https://medium.com/@Zadvorsky/webgl-masking-composition-75b82dd4cdfd
His demo is based on three.js r80, so I referenced r101 and tried to remove most of unrelated parts, and just have scene with grid and png mask on top.
Here's my code: http://jsfiddle.net/mmalex/y2kt3Lrf/
Having commented // composer.addPass(maskPass) the grid shows up. But it does not seem like uniform sampler2D tDiffuse has the output of render pass.
I expect to see the grid helper and underlying HTML content under the canvas, where mask makes canvas transparent.
UPDATE, working now, thanks to @Mugen87: http://jsfiddle.net/mmalex/y2kt3Lrf/
回答1:
There is a mismatch of files in your fiddle. If I use the latest version of three.js and the respective post processing classes, your code works fine:
http://jsfiddle.net/pk24zby7/
three.js has deprecated the renderTarget and forceClear parameter from WebGLrenderer.render() with R102. When the change was done, it was necessary to change many files in the examples directory in order to avoid warnings and even breakage. So using the latest post-processing classes with an older three.js version does not work.
Since the change is listed in the release note, I suggest you read the respective PRs for more details.
来源：https://stackoverflow.com/questions/55393149/why-does-my-three-js-canvas-masking-not-work