"Cavity" shader effect like Blender 2.8 viewport for Babylon.js?

I’ve fallen in love with the look of the “Cavity” real-time viewport option in Blender 2.8 - it really makes model topology “pop” and would be a good look for some stylised scenes. So the question for the shader and NME gurus out there is can we achieve this effect with Babylon.js? Here’s a screen grab (sorry not the best example):

I guess this is mainly flat shading that you can turn on inside Blender
Pinging @JCPalmer

1 Like

Thanks @Deltakosh

It accentuates / bumps up the contrast between adjacent ridges and valleys in the scene. I like that it also “softens” sharp edges. Normally to achieve that effect you’d need to add a small rounded bevel on all sharp edges so that the edge catches the light, but this cavity shader does it without needing to add extra geometry.

Seems like this sort of a adds a light from above, directed down. Parts of a mesh that are underneath are darker when turned on, while parts on top are lighter.

I do not think this can be done by adding a directional light, since it adds its light equally to all faces, I think. Therefore, cannot be implemented in STD Materials.

An environment texture would work for PBR materials though. As you are using Blender, you can make a custom environment textures with it. Generate a cavity.hdr file from a scene, then use the new tool to turn it into cavity.env.

Here is a .blend file from @PatrickRyan, which is a conversion of the maya scene used to do the studio environment.

https://github.com/BabylonJS/MeshesLibrary/blob/master/hdri/studioLighting/blender/studioLighting.blend

It seems it is not really straightforward…

See: https://developer.blender.org/T55333

There are two parts:

  1. An SSAO pass using Alchemy Obscurance algorithm: https://faculty.digipen.edu/~gherron/references/References/AmbientOcclusion/VV11AlchemyAO.pdf
  2. An additional screen space pass: Screen Space Curvature in Workbench Engine for better surface detail visualization. Right-Click Select — Blender.Community

Step 2 is not too difficult (there is a .blend file that describes the computation), but step 1 may be more involved…

For step 1, maybe the existing SSAO2 pipeline can be used.

[EDIT]
For completeness, and if someone wants to tackle this, here are the relevant changes done in Blender to support this feature (the SSAO2 pipeline does not use the same algorithm than the one used in 1.):

  1. rBf1fd5ed74fb0
  2. https://developer.blender.org/D3617

[/EDIT]

3 Likes

Thanks for looking into it @JCPalmer and @Evgeni_Popov.

I implemented the step 2, based on Blender sources:

https://playground.babylonjs.com/#YF8D42#1

I added the same two sliders than in Blender:

I did not implement the part which check that we don’t cross object boundaries (left as an exercice for the reader ;)), but it still does work well:

[EDIT] Fixed the PG [/EDIT]

7 Likes

Hello,
And here is the ghost version :smile: (when we resize the canvas) :


:blush:

1 Like

This is so awesome! Love it, thanks @Evgeni_Popov! :sunglasses:

@Evgeni_Popov you are my hero !!! :slight_smile:

I vote to add this as a new postprocess in the engine!

4 Likes

I ll do today then !!! :slight_smile:

1 Like

or @Evgeni_Popov if you d like to feel free :slight_smile: ???

Feel tree to do it, I’m currently finishing the update of the edges renderer :wink:

2 Likes

Since this is going to be added to the list for out of the box, One thing I was doing check with this is to see if it might be animatable to create the illusion that there is a strobe light. Those ridge & valley are going to be properties, right?

Ok so after a closer look, I ll wait on this one to go in Prepass for ssao by CraigFeldspar · Pull Request #8455 · BabylonJS/Babylon.js · GitHub so that I could reuse the new prepass renderer :slight_smile:

@CraigFeldspar should be done soon with it he only has a few neats to fix

2 Likes

Yes, ridge & valley are properties that allow to make the effect more or less visible, but you can’t make the effect very strong, say like having the lines being 4 or 5 pixels wide.

So, it is possible to animate the properties, but not very much:

https://playground.babylonjs.com/#YF8D42#2

2 Likes

Thanks, for looking at this. Your example got me to modify your other example which is much more appropriate. It looks pretty good. https://playground.babylonjs.com/#YF8D42#3 . I wonder how a whole scene of stuff will turn out?

Think of a strobe light on a dance floor, or on stage at a concert where people look like they are moving in slow motion. I might need a mesh to “act” as the light source to “sell” it, as opposed to people thinking there is an app failure.

Am not going to try it yet, if it is being put into a “proper”, predefined post process.

Thanks again.

1 Like

The strobe effect is pretty cool indeed!

2 Likes

Just a question about post processes as they relate to using WebXR. Are sub-cameras for WebXR being merged using a post-process? If they are, could this prepass feature be used to avoid conflict?