Backface Directional Lighting

Questions
,
1

So I have a bunch of instanced intersecting planes as a foliage system.

Looks pretty good, I’m mostly happy with it, however I have one issue. In it’s simplest form I use 2 intersecting square planes with a material set to THREE.DoubleSide. It seems that the directional light gets a little confused. If the directional light is hitting the back side of the plane the lighting is as if the geometry was rotated 180 degrees and is darker on the side facing the light. I was hoping since I set all the normals to (0,1,0) this wouldn’t be the case.

I’m assuming this is expected behavior but I’m not sure what the proper workaround is. Only thing I can think of is to set the material to THREE.FrontSide and create duplicate plane geometry facing the opposing way and merging. I am hesitant to do this as it will double the amount of geometry and also I’m sure there could be some z-fighting with planes overlapping like that.

Is there a better way?

5 Likes
2

Can you please share a screenshot that shows how the lighting looks like?

3

I believe TitansOfTime is talking about this:

image
image1007×658 395 KB

Back side of the plane gets darker and I’ve ran into the same issue :sweat:
I feel like grass, regardless of the plane’s Y rotation or whether its frontface or backface, should have a unified lighting, like in this image:
image
or this:
image

Just like OP, I’ve tried setting all vertex normals to [0, 1, 0] (recommended in this nvidia page https://developer.nvidia.com/sites/all/modules/custom/gpugems/books/GPUGems/gpugems_ch07.html). I expected such normals to even out the lighting on both sides of the plane, but it didnt do much for me.

Using renderer.gammaInput = true; renderer.gammaOutput = true; renderer.gammaFactor = 2.2; settings gives me this:

image
image1226×357 366 KB

These renderer settings makes it look much better, evens out the lighting by a lot, however it still feels like a hack rather than a solution.

Is there a better way?

3 Likes
4

Nice, that helps a lot!

1 Like
5

DolphinIQ, out of curiosity, are you using instancing in your example?

6

For this demo I made several thousands of plane buffer geometries in a loop and then merged them with BufferGeometryUtils. For serious apps I plan to use models made in 3D software.

I don’t really get instancing or why is it better than a big buffer geometry; would appreciate some directions/sources for dummies tho :sweat_smile:

7

Instancing will work in the end similar to merging but the memory footprint usage will be WAY smaller. When merging, my grass takes up about 600MB. With instancing it takes up about 8MB.

Pretty good explanation here: https://medium.com/@pailhead011/instancing-with-three-js-36b4b62bc127

If you want to go down this path (Recommended), I can probably help a bit. Learned the hard way.

2 Likes
8

As I was discussing privately with @titansoftime, I’ve modified Instancing Lambert example and the backface detection/rendering looks fine.

So it does not seem like a instancing related problem. Probably need to re-calculate normals after quaternion rotations, that would be my guess.

9

Here’s a simplified fiddle demonstrating the lighting issue I am experiencing (merged BufferGeometry).

https://jsfiddle.net/titansoftime/rosncw0m/

10

So, the “problem” here is that lambert shader reverts normal for backfaces. So, this is the expected behavior. lights_lambert_vertex - meshlambert_frag

The ideal workaround would be to create a custom shader adapting these to your needs. In this case, probably removing all the vLightBack calculation and just using vLightFront independant of which side is being drawn.

A hacky way to do it, is just replacing the reflectedLight.directDiffuse using onBeforeCompile to just account for vLightFront. Modified JSFiddle

But keep in mind that all the extra back light logic is still being calculated, and given the amount of instances… it would be worth removing all of that.

2 Likes
11

That’s it, perfect! Thank you!

Exactly what I was looking for.

I used this to remove the (now) unnecessary calculations:

shader.fragmentShader = shader.fragmentShader.replace('vLightBack += saturate( -dotNL ) * directLightColor_Diffuse;',"\n");

2 Likes
12

Just a thought…

Is something that maybe should be an option in the API itself?

Not sure how common this issue is.

13

Hi again :sweat_smile:
Do you perhaps know where in the meshStandardMaterial shader code can I find the equivalent of

#ifdef DOUBLE_SIDED
reflectedLight.directDiffuse = ( gl_FrontFacing ) ? vLightFront : vLightBack;
#else
reflectedLight.directDiffuse = vLightFront;
#endif

from the meshLambertMaterial? In other words, i’d like to apply the same logic to the standard material, but im getting lost in all the #includes :sweat:

14

normal_fragment_begin

Assuming you don’t need tangent and flat shading, just replace include with normal declaration:

shader.fragmentShader = shader.fragmentShader.replace(
  '#include <normal_fragment_begin>',
  'vec3 normal = normalize( vNormal );'
);

JSFiddle Example

3 Likes
15

Hope everyone’s well.
Today i migrated from version r122 to r145. I see that perturbNormal2Arb function now gets 4 values instead of 3. 4h value is now faceDirection.
I use meshphongmaterial and altough i add the line like below;

shader.fragmentShader = shader.fragmentShader.replace(
‘#include <normal_fragment_begin>’,
[
‘float faceDirection = gl_FrontFacing ? 1.0 : - 1.0;’,
‘vec3 normal = normalize( vNormal );’
].join(‘\n’)
);

my grasses are not working like before. I shared some images below;
R122

image
image802×349 87.1 KB

R145

image
image833×371 45.9 KB

Do you have any idea how to solve this issue? Grass needs to be looking like the r122 version and also needs to work with lights. Any help would be appreciated.

Thanks
Mert

1 Like
16

It’s hard to tell what i’m looking at, the lower one also seems like having a sorting issue and using transparency.

For grass and such if you want to use lighting it’s always required to alter the normals, even if there was a dublicate for both sides, there is only one direction the light comes from.

The lighting spots on the second also look weird with sharp light spots
image

17

Well working version here with r122: https://jamir.io
I will check my vertex sorting function but i dont think it is related with that.
Light wasnt affecting with different rotations of planes when i replace like the above code. If it was working on r122 it should also work on r145. There must be a change on r145 that affects the initial vnormal value maybe?

18

Can you reproduce your issue in a simple codepen or fiddle?

19

So I just went from r142 to r146dev and am noticing the same thing.

My (@sciecode) “Backside Fix” broke =[

Something must have changed in the built in shaders.

Edit* Yes, the Lambert fragment shaders (at least) are now very different. This line is completely gone it seems:

#ifdef DOUBLE_SIDED\n\t\treflectedLight.directDiffuse = ( gl_FrontFacing ) ? vLightFront : vLightBack;\n\t#else\n\t\treflectedLight.directDiffuse = vLightFront;\n\t#endif

And outgoingLight is now set here instead of reflectedLight.directDiffuse. It’s completely different.

Not really sure where to start on this one. I’ll start messin with it.

1 Like
20

MeshLambertMaterial is no longer based on goroud shading ( vertex interpolated ) it is now based on phong shaded (fragment interpolated) MeshLambertMaterial: convert to per-fragment shading

So if you guys still want to use that bit that adjusted normals, you’ll need to replace old MeshLambertMaterial with the new MeshGoroudMaterial.

Fix will still work with on that variant, which, in reality, is the exact same code.

1 Like