Better lights and shadow maps [ working example attached ]

[ghost]

Hi
I've experimented with three.js few days, and it seems to bee very cool.
But one thing bothers me, there is something not right with shadows.
In reality shadow doesn't exist, it is just place where light does not reach, but in three.js lights are first calculated and after that shadows are casted.

So I've tried different approach, first created new material, called it MeshPhong2Material
It uses exactly same code as MeshPhongMaterial, except shadows and spot lights.

I disabled spot lighting code in fragment shader, and then put spot light calculations directly to the loop where shadows are casted, changed it a bit, and added several uniforms for light information.
So no need to cast any shadows, to not put light on shadowed areas is enough, and thats it.

The result you can see on screens below. On the scene are 4 spot light, colors of those are more-less: red,green,blue and white, shadow maps are 2048 x 2048px
As a side effect most acne problems dissapeared , for free.
shadowDarknes parameter is not needed anymore.
Another good thing, it seems to be about 30% faster on my laptop's Nvidia NVS 3100M than current shadows, with this scene at least, 22fps vs 16fps,
this is because light is not calculated anymore in shadowed areas.

This method fits closer to real lights, as you can see there are colored shadows, exactly like in nature with this kind of lights.

What i've done is now just a proof of concept, code is a 'dirty hack', for experiments only.
It works now only with spot lights. Spot lights without shadows do not work.
I am not sure how to to put it in three.js in the proper way, maybe add new material, new light type, or just flag in existing ones.

There is problem with current three.js structure, shadows are a plugin which like separate thing, to make it work with lighting requires to add additional uniforms with lighting information, because current shadowmap does not know to which light it bellongs.

It would be nice to see this method as an alternative to current shadows.
What do you think?

Here is working example: http://cypd.vot.pl/shadowexperiment/
Just play a bit with settings, most difference is when 2 light are enabled, you can control the camera using mouse.

4 lights,
original shader:

modified shader:

2 lights
original shader:

modified shader:

regards
CypD

[satori99]

Wow. The improvement over existing shadows is impressive.

Expecially in regards to shadow acne. It is practically gone completely in your demo. And it's crazy fast!

Nice work.

[titansoftime]

Holy crap!

[RemusMar]

The method gives better results for objects who cast and receive shadows at the same time.
And those colored shadows look very nice.
Good job!

[jonnenauha]

Nice 👍

[mrdoob]

This looks great! 😮
I've one concern though. How about the case of VR, were one would like to compute the shadows once and not twice?

[rohan-deshpande]

Very interesting. Will try this out for sure!

[nanni83]

I have tried it out, but acne issue (shadow artifacts) doesn't get fixed. Is there any extra property needed to be set for this. I am using spotlight as per your code. Please help.

Thanks

[ghost]

@mrdoob

I've one concern though. How about the case of VR, were one would like to compute the shadows once and not twice?

I think in case of VR there will be no problem, because depth textures you need render only once, and then render two normal images , one for each eye. So i think it is not much different from what is now.

@nanni83
I will publish full source code if you wish. This way it will be the most convenient.
Notice that shadow acne still exist in my example, only difference is that acne is not visible so much on this scene. So it may be dependent on the scale of objects and far and near parameters for shadow cameras. And I changed parameter shadowBias=0.00002, but i don't think it makes much difference here.

[mrdoob]

I think in case of VR there will be no problem, because depth textures you need render only once, and then render two normal images , one for each eye. So i think it is not much different from what is now.

Ah! Sounds great then!

Regarding implementation, I would replace the current code altogether 😀

[prafullit]

It's awesome.

[mrdoob]

@Cypd Any chance you could re-implement this on top of the dev branch? THREE.ShadowMap is now much simpler!

[tschw]

Related #7153

[ghost]

For some reasons no, or not yet at least . So if someone wants to do it first, feel free and do it, don't wait for me ;)

[mrdoob]

Done!