Shadows break stereoscopic/3D rendering with post-processing

[brianchirls]

There are certain cases where post-processing is necessary with stereoscopic rendering, e.g.:

• cardboard distortion effect when it's not supported natively by the browser in Web VR
• SSAO

Here's what currently happens in these cases, for each eye:

1. Set the render target to the buffer that will be post-processed
2. Set the scissor and viewport to half the screen (either left or right)
3. When WebGLShadowMap.render gets called, sets its own render target and viewport, but it stores the previously set viewport
4. When WebGLShadowMap.render is done, it sets the viewport back to half screen.
5. When WebGLRenderer.render continues, it sets the render target again, but setRenderTarget sets the viewport to the full size of the render target.
6. WebGLRenderer renders the scene at full size, across both eyes, breaking the output.

Somewhere at or after step 5, we need to be able to set the viewport back to the half screen values set in step 2.

While we're at it, as a bonus, it'd be nice to have a way to only render the shadow map one time. Repeating for the second eye is redundant.

(cc @borismus)

[borismus]

Thanks for logging this. Related to some issues folks have been filing against webvr-boilerplate:

• Setting renderer.shadowMap.enabled = true breaks VR split-screenmode borismus/webvr-boilerplate#40
• WebVRManager doesn't play nicely with THREE.Mirror borismus/webvr-boilerplate#36

[brianchirls]

You're welcome, and thanks for sharing those other issues. I had a hard time believing I was the only one in the world who tried using shadows in Web VR. ;-)

[mrdoob]

Have you guys tried with the dev version? I fixed an issue with shadowmap and viewports the other day. faebb42

[brianchirls]

@mrdoob: Don't know, 'cause I can't get the dev version to run with webpack. self is undefined.

[mrdoob]

Oh well...

[brianchirls]

Is that something that's going to be fixed, or should I file a separate
issue for it?

On Tue, Dec 8, 2015 at 11:48 AM, Mr.doob notifications@github.com wrote:

Oh well...

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

[mrdoob]

I don't have experience using webpack. Hopefully someone that uses it figures out what the problem is and fixes it.

[brianchirls]

Okay, I'll file an issue and see what I can do to narrow down the problem.
Any idea if there's an issue or pull request that addresses why 'self' was
used in the first place?

Also, can you point to a commit with the changes that affect shadows and
viewport? I could test it separately and see if it solves the problem.

Thx
On Dec 8, 2015 2:12 PM, "Mr.doob" notifications@github.com wrote:

I don't have experience using webpack. Hopefully someone that uses it
figures out what the problem is and fixes it.

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

[mrdoob]

Also, can you point to a commit with the changes that affect shadows and viewport?

Already did that some posts ago...

[brianchirls]

So you did. Sorry, I wrote that email from my phone and didn't see it. I'll take a look.

[brianchirls]

@mrdoob I'm afraid that commit did not fix the bug. The problem seems to be in step 5 (see above), which happens in WebGLRenderer.render.

[mrdoob]

I see... Do you mind providing a jsfiddle/example I can use to fix the issue?

[brianchirls]

Here you go: https://jsbin.com/kesodi/edit?js,output

I'm actually kinda curious to see what this'll look like in cardboard when it's working.

[mrdoob]

Shadows seem to work fine for that example on my Nexus 5. What's the issue?

[brianchirls]

That's supposed to be stereoscopic. i.e. there should be one monolith in each eye. Try turning shadows off and then see what the output looks like.