Shadowing still gives shadow acne

[throni3git]

Hello und a big ThankYouAll for three.js :)

I'm trying to achieve beautiful shadowed render graphics und i have followed the recent changes in shadowmapping ( #7321 and #6420 ). Anyway, using the current master build, i still get shininess through shadow and shadow acne artifacts. This seems to be an issue with multiple lights (of type Spot / Directional)

I've forked a jsfiddle from mrdoob with a spotlight and a directional light. Have a look at http://jsfiddle.net/wgwoqncy/4/

Spotlights shining through shadows:

Shadow Acne with two SpotLights:

Shadow Acne with a SpotLight and a DirectionalLight:

Greetings,
Thomas

[mrdoob]

Yes. We still haven't solved this...

[mrdoob]

Using a single light (DirectionalLight, SpotLight or PointLight) with shadowDarkness set to 1 and an ambient light (AmbientLight or HemisphereLight) gives the best results at the moment.

[throni3git]

Yes, this is my solution so far. Good to know, you're on it :) Thanks

[WestLangley]

@throni3git The shadow acne is caused by self-shadowing. That is what shadowBias helps correct. Adjust the spotlight bias. The trade-off is peter-panning.

[makc]

that https://cloud.githubusercontent.com/assets/14586717/10541353/a6e631da-7410-11e5-9a66-531a080204f6.jpg looks like minibrot

[bhouston]

There must be more advanced ways to solve our shadow acne problem. Most modern game development systems do not show the degree of shadow acne ThreeJS currently has. There must be an automated solution. It is on my list of things to get to.

[mrdoob]

@bhouston I think it's just a matter of moving away from the shadowMask concept. As you suggested, storing whether is shadow or not in the light per fragment sounds like a better approach.

[mrdoob]

Fixed! http://jsfiddle.net/wgwoqncy/5/

[bhouston]

Dude!

[mrdoob]

Things look a lot better now.

webgl_shadowmap_pointlight is now extra sexy 😊

[bhouston]

It fails on Linux Intel drivers:

THREE.WebGLShader: gl.getShaderInfoLog() fragment 0:158(63): error: sampler arrays indexed with non-constant expressions is forbidden in GLSL 1.30 and later
0:159(63): error: sampler arrays indexed with non-constant expressions is forbidden in GLSL 1.30 and later
0:160(63): error: sampler arrays indexed with non-constant expressions is forbidden in GLSL 1.30 and later
0:161(63): error: sampler arrays indexed with non-constant expressions is forbidden in GLSL 1.30 and later
0:162(63): error: sampler arrays indexed with non-constant expressions is forbidden in GLSL 1.30 and later
0:163(63): error: sampler arrays indexed with non-constant expressions is forbidden in GLSL 1.30 and later
0:164(63): error: sampler arrays indexed with non-constant expressions is forbidden in GLSL 1.30 and later
0:165(63): error: sampler arrays indexed with non-constant expressions is forbidden in GLSL 1.30 and later
0:166(63): error: sampler arrays indexed with non-constant expressions is forbidden in GLSL 1.30 and later

Interesting, I'm pretty sure @tschw figured out how to address that in this comment:

#7426 (comment)

[makc]

@mrdoob

Fixed! http://jsfiddle.net/wgwoqncy/5/

are you sure? it looks like this over here:

[bhouston]

I think it may be possible to not cast shadows on faces facing away from the light that is shadowing them. Or at least extend the bias in those cases. That should help with this situation.

[mrdoob]

@makc what your os/hardware?

[bhouston]

I have shadow acne on the back side as well with Windows 10, Chrome latest and GeForce 660:

[makc]

@mrdoob

[mrdoob]

@makc no errors in the console?

[mrdoob]

@bhouston well, yes, I guess saying that I fixed the shadow acne was not correct. however, it's WAY less noticeable 😇

[makc]

@mrdoob total silence after THREE.WebGLRenderer 74dev. maybe some undefined behavior?

[MasterJames]

On mobile Android chrome it's just flat and dark no lights?

[mrdoob]

On mobile Android chrome it's just flat and dark no lights?

Any example? Or only the ones with shadows?

[MasterJames]

This is from your link http://jsfiddle.net/wgwoqncy/5/
I'm pondering it has something to do with the rawgit's delivery or what I don't know. I'm not clear on how to get debug or log from it (Android 5.0.0 Galaxy Note3 ~ Chrome 46.0.2490.76) without using something like "weinre", etc.

There is a weird long purple shadow that can't be helping here, it seems to come from nowhere. Oh wait that's expected? Ambient only there?
I've tried commenting out the various lights (via scene.add and each attribute) but that made no difference (even with a reboot). I goes black without Ambient so the other lights are a noshow somehow?

[bhouston]

To debug Chrome on an Android device you have to follow these instructions:

https://developer.chrome.com/devtools/docs/remote-debugging

[MasterJames]

Thanks for that. It needed redoing more then a few timed before it showed up under chrome://inspect

[MasterJames]

And here is the console errors.

Uncaught TypeError: Cannot read property 'getOption' of undefined
THREE.WebGLRenderer 74dev
THREE.WebGLRenderer: OES_texture_float_linear extension not supported.
Uncaught TypeError: Cannot read property 'setOption' of undefined

[mrdoob]

@makc @MasterJames can you guys try again with the latest in dev?

[MasterJames]

Yes that's got it!
New confidence in "one for all" phylosophy.

[mrdoob]

Good to know. My Nexus 5 still crashes. I think I'll have to move a few things around...