Lighting and Shaders

[RicardoTM05]

Hello,

I recently added grass to my scene, and I was wondering how should I approach the lighting here.

While at the right angles it mostly looks ok. When the grass intercepts with the sky it turns dark:

My guess is that the postprocess has no idea the grass exists, so it is not taken into account. How should I approach this?

Thanks in advance.

[shotamatsuda]

The clouds correctly (but visibly) avoid the grass, so the depth seems fine and the atmosphere shader should be aware of them. I'm afraid the normal buffer doesn't include the grass, which might be why it's incorrectly lit.

Do you mind displaying the normal buffer to check if the grass appears in it?

[RicardoTM05]

Hey, thanks for answering.

The clouds correctly (but visibly) avoid the grass, so the depth seems fine and the atmosphere shader should be aware of them. I'm afraid the normal buffer doesn't include the grass, which might be why it's incorrectly lit.

Sorry, I've been busy these days. I'm using a CustomShaderMaterial from CSM with a MeshStandardMaterial as base, then I inject the shader.

Do you mind displaying the normal buffer to check if the grass appears in it?

Sorry, I don't know how to do that, but if you instruct me on how to do it I'll happily do.

I've been doing some testing, and it seems to be fine when I test it on the WorldOriginRebasing example:

However, since I'm using clouds, I need to use the postprocess lighting instead (because the grass has to be shaded by them). And that's when things get bad.

As soon as I add:
<AerialPerspective skyLight sunLight/>

The grass becomes transparent:

The clouds correctly cast shadows on the grass:

So yeah, the only problem is it getting transparent, it looks like if the grass had an "overlay" effect applied to it. It also happens with other objects:

I can share the grass as a react module if you want to give it a closer look.

Thanks in advance, have a great day.

[shotamatsuda]

Supposing your grass uses an instanced mesh, I'm quite sure it isn't rendered in the normal buffer. postprocessing renders the normal buffer using RenderPass.overrideMaterials option that breaks instance vertices. There is a workaround for this case documented in postprocessing. I'm not sure it works in every situation, but worth a try.

If that doesn't help, you'll need to create a custom material for rendering the view normals of your grass and add an exception in NormalPass, similar to how Object3D.customDepthMaterial works, so that it is rendered using the custom material.

Ideally, the normal buffer should be rendered using MRT (multiple render targets), which is supported in WebGL2. However, the shader-chunk-based architecture of WebGLRenderer prevents a general solution. This is much improved in the node-based TSL architecture of WebGPURenderer I'm currently working on adding support for, where such a workaround is no longer needed.

By the way, your screenshots look great!