Alpha materials with post processing effects not working

Questions
1

I’m trying to have a clipmapped plane in a scene with post processing effects, however the post processing effects are rendering the entire plane rather than the alpha clipped map. So if I add an effect like depth of field, SAO, outlines, etc. it renders incorrectly behind the transparent plane.

Setting the material to transparent:
material.alphaTest = 0.5; material.alphaMap = alphaMap; material.side = THREE.DoubleSide;

This makes it transparent as expected, however, we can see all post processing is ignored behind the plane:

image
image399×712 41.3 KB

If I just render the depth pass the alpha mapped mesh appears solid rather than honoring the alphaMap, example rendering DepthTexture only:

image
image397×681 9.41 KB

Is there something I’m missing to make the DepthTexture honor the alpha map? Or let me know if I need to provide more details.
Thanks for any help!

Edit: Oh yeah, I’m using version 0.164.1

2

Try to set .customDepthMaterial of the mesh with that transparent map :thinking:

mesh.material.alphaTest = 0.5; 
mesh.material.alphaMap = alphaMap; 
mesh.material.side = THREE.DoubleSide;

// something like this
mesh.customDepthMaterial = new THREE.MeshDepthMaterial({
    depthPacking: THREE.RGBADepthPacking,
    alphaMap: alphaMap,
    alphaTest: 0.5
});
1 Like
3

I did actually try this earlier and it doesn’t seem to help, logging the loaded model it does look like the change propagated on the mesh object, but doesn’t change anything (depth texture still rendering the entire plane same as before).

image
image730×115 7.49 KB

image

4

Used this example as a base, got the interesting result even without the setting of customDepthMaterial

изображение
изображение953×860 75.8 KB

Demo: https://codepen.io/prisoner849/full/JjVqxKV

Any chance to provide a minimal working live-code example, that demonstrates the issue? jsfiddle, codepen, codesandbox etc.

5

Just a wild shot: try to change alphaMap: child.material.map to map: child.material.map :thinking:
As alphaMap uses green channel:

6

Ok I quickly modified that codepen sample to use the effect composer instead of the renderer and just stuck a bokeh effect on it so we can clearly see the transparency issue: https://codepen.io/phipho/pen/jORjbwJ

Hopefully this’ll help pin down the problem!

EDIT: Oh and the map vs alphaMap doesn’t make a difference (tried that one already too heh).
I’ve also tried modifying the fragment shader if(alpha < .5) discard; but this still doesn’t affect the effect composer depth even though it works everywhere else (e.g., the colors are discarded correctly just not in the depth map of the effect composer renderer).

7

Hmm… BokehPass, in its render function, overrides materials in the scene with MeshDepthMaterial

This is a limitation/bug/feature of BokehPass, I think :thinking:
At this point, overriding material knows nothing what maps were applied to what mesh, and even if you set bokehPass.materialDepth.alphaTest = 0.5, it won’t have any effect.

1 Like
8

Yeah ok, was hoping that wasn’t the case as my custom outline shader requires the depth texture pass as well as bloom, sao, bokeh, etc.
I’ll just have to see if there’s a way to get the uv and alpha texture data into the depth texture fragment or so…
Appreciate you looking into it!

1 Like
9

Would it be possible to use two-step rendering:

  • first you render the scene with composer.render(...) and without the transparent plane
  • then (without clearing the buffers) you render the transparent plane with renderer.render(...)
1 Like
10

Hmm, that may work for some uses, but probably not ideal as the objects with alpha maps wouldn’t have any of the effects of the rest of the scene.

11

They could be individually posteffected too, before merging with the rest already posteffected scene. Like, working with two render targets and then combining them in a final scene.

Anyway, for single render targets I could imagine a fundamental conflict between alpha transparency and depth maps, especially for alphas that are not 0 or 1. What would a depth map encode for a semitransparent area? The depth of the foreground semitransparent object? The depth of the background object? Or a blend of both depths (which will actually be interpreted as wrong depth)? I think that some posteffects would need volumetric (3D) data in order to process semitransparency well. Depth maps are flat (2D) data.

Most likely some specific set of postprocessing effects will have a specific solution. Another set might have a different solution. A global universal solution may not exist. Or it may?

12

Yeah, not sure about semi-transparent, I’m coming from just doing a lot of shader work in unity, and expected there would be 2 modes on material, transparency (semi-transparent) which isn’t specifically something I need in this current project, and clip maps (0 or 1) which are much more performant and what you typically try to use for things like vegetation/bushes/etc.

Understandably a lot of hidden complexities, anyway I’ll either adjust art style to not have that type of bushes/vegetation or figure something out, seems like there may be a way to get the uv and clip map data into the DepthTexture shader, but may not be worth it for this specific project.

1 Like