Three.js - DoubleSide Material same lightning

This is somewhat a follow-up on this ThreeJS material with shadows but no lights

The question is really simple. I have foliage in my scene that is made up of a couple of planes in a cross, and I need both sides of the plane lit equally, but still being affected by shadow.

With an unmodified shader, the scene looks like this:

As you can see, the front and back side of the planes are not equally lit, causing the "hard edges" to show.

Based on the answer from @WestLangely in the SO question mentioned above, I was able to create the desired effect like so:

THREE.ShaderLib[ 'lambert' ].fragmentShader = THREE.ShaderLib[ 'lambert' ].fragmentShader.replace( `vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + totalEmissiveRadiance;`, ` #ifdef DOUBLE_SIDED     reflectedLight.indirectDiffuse = getAmbientLightIrradiance( ambientLightColor );     reflectedLight.indirectDiffuse *= BRDF_Diffuse_Lambert( diffuseColor.rgb );      reflectedLight.directDiffuse = diffuseColor.rgb;     reflectedLight.directDiffuse *= BRDF_Diffuse_Lambert( diffuseColor.rgb ) * getShadowMask();      vec3 outgoingLight = (reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + totalEmissiveRadiance).rgb * ( 1.0 - 0.45 * ( 1.0 - getShadowMask() ) ); #else     vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + totalEmissiveRadiance; #endif ` ); 

Which produced the following result:

As you can see, the "hard edges" are gone, and the foliage looks a lot better now.

However, something is causing them not to be properly affected by lights anymore. Making the environment dark and adding a simple PointLight, gives the following result:

The dark foliage meshes shown above should be properly lit as a whole.

I'm sure there is a better way to go about this, but my knowledge of GLSL only goes so far, especially when it comes to modifying Three.js shaders.

TL;DR: How can I make a material be equally lit on both sides, providing THREE.DoubleSide is set as side on the material, while the entire mesh is still affected by shadows?

Thanks in advance!

0 Answers

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati