MaskPass doesn't work in Chrome on Windows

[mfdesigner]

This example, http://mrdoob.github.io/three.js/examples/#webgl_postprocessing_advanced, works in Chrome on MacOSX, Firefox on Windows, but not Chrome on windows. Try opening that page in three browsers side by side, and you can tell the masking is not working in Chrome on Windows. (especially obvious in the top-right corner where head is also blurred along with the background.)

I am using the latest chrome browser stable release and three.js r58.

[dubejf]

I don't see any difference between browsers on Windows with the latest version of the library. I assume it has been fixed.

[mfdesigner]

On 7/6/2015 3:06 PM, dubejf wrote:

I don't see any difference between browsers on Windows with the latest
version of the library. I assume it has been fixed.

—
Reply to this email directly or view it on GitHub
#3870 (comment).

The purpose of MaskPass is to apply dot-screen effect only to the
background not the head.
Obviously, all browsers on windows are now broken.

[Nesciosquid]

Seconding this. Spent six hours trying to figure out what I was missing re: getting MaskPass to work, only to realize it was totally borked.

[mrdoob]

@Nesciosquid Can you share a screenshot of how webgl_postprocessing_advanced.html looks on your machine?

[mrdoob]

Here's how it looks in Chrome/OSX...

[Nesciosquid]

Here's Chrome...

Firefox...

And Internet Explorer 11

[Nesciosquid]

All pretty much the same. Isn't the whole point of the mask not to apply the post-processing effects to the background as well as the target object?

I would expect, for example, that the head in the bottom-right frame to have the dot-matrix effect on it, but the background would not.

Maybe I'm misunderstanding how to use it. I thought the process was:

1. Set up a scene and a camera such that, when rendered, they will appear like the mask you want (white in areas which should be changed, black in others. I do this with meshes with MeshBasicMaterials set to white.)
2. Somewhere in your composer's rendering chain, add a MaskPass(maskScene, camera). This should update the stencil buffer (?) of the webgl context with the white pixels.
3. Add more shader passes, which should only affect pixels which weren't masked out.
4. Add a ClearMaskPass() to remove the mask.
5. Do any other rendering or effects passes you want.
6. Render in your animation loop

Am I fundamentally misunderstanding how MaskPass should be used?

[mrdoob]

If mask didn't work all the heads would be blurred. At the moment masking is being used to blur the background but not the head. So I guess is not totally borked?

If you want to apply the dot-matrix to the head only do this:

composer2.addPass( renderScene );
composer2.addPass( renderMask ); // moved one line up
composer2.addPass( effectDotScreen );
composer2.addPass( effectColorify1 );
composer2.addPass( clearMask );
composer2.addPass( renderMaskInverse );
composer2.addPass( effectColorify2 );
composer2.addPass( clearMask );
composer2.addPass( effectVignette );

[mrdoob]

Seems like it's working on Chrome/Windows after all...

[Nesciosquid]

Confirmed, working on Windows now. Not borked!

You are a wizard, and I clearly need to go practice my ShaderPasses more.

Thanks a bunch!

[mrdoob]

To be honest, I don't understand how MaskPass works internally 😇

[Nesciosquid]

Aha! I sorted it out.

Turns out, there was a difference in the stencilBuffer settings for this example, but not because of browser incompatibility or renderer settings. It was hidden in the way that example sets up the separate composers for the different sections.

When the composers in the example are constructed, they're each given a new WebGlRenderTarget, which has the stencilBuffer parameter explicitly set to true:

var rtParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: true };

var rtWidth  = width / 2;
var rtHeight = height / 2;

composerScene = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtWidth * 2, rtHeight * 2, rtParameters ) );

I had initially assumed that the WebGLRenderTarget setting had to do with the fact that the example renders into four different places, and so didn't think to copy the rtParameters.

There is a lot going on in this example, and I haven't been able to find any other (working, obvious) examples of using MaskPass correctly. Would it help to have a simplified version, since it's a tricky maneuver and requires setting up the composers in a very particular way?

[mrdoob]

Yep. A simpler example would be good to have.