Creating a Depth Layer like Spline

Questions
, ,
1

I’d like to create, in BabylonJS, what is termed as a “depth layer” or “depth layer material” in Spline. In common parlance, this is a way to apply a color gradient to a 3D mesh. The effect appears to make a mesh glow in that gradient colour from the center of the mesh outwards (i.e. like a radial gradient in 3d space). Is this possible in BabylonJS and if so can it be done with built in Material or PBRMaterial or will I require a custom ShaderMaterial? You can see the effect I’m referring to here: https://youtube.com/shorts/Dkzuo712qT0?si=oSpKmlkq3-F05DRd

2

You may be able to use the depth renderer for this.

It will probably require a custom shader material, but maybe not. @Evgeni_Popov would know better than I.

3

Hi @Evgeni_Popov as per @docEdub is their any clarification on this?

4

You will need a custom material for this, but you could use NME if you are less confortable with shaders: Babylon.js docs

1 Like
5

This has got me stumped. I’m not sure how to best approach it here is a better example video of the awesome effect: Depth Layer / 3D Gradient

Here is what I’ve attempted so far, I can apply a gradient (with color stops) to the entire mesh. Whilst it looks cool, I can’t figure out how to make it “light” the internal structure of the mesh: Babylon.js Playground

Any ideas @sebavan @PirateJC or @Evgeni_Popov?

6

You can try something like this with a node material:

Try changing the DistanceFactor and FallOffFactor values to modify the spread and decrease of the effect. center allows you to define where the center point is from which the gradient is applied.

2 Likes
7

Thank you so much @Evgeni_Popov The playground looks awesome!!! Is it possible to incorporate multiple gradients?

8

I’m not sure how you want to combine the gradients, I’ve tried something in this PG:

In any case, I think you will have to experiment according to what you want to achieve.

The node material: https://nme.babylonjs.com/#ROVA9U#4

9

Thanks @Evgeni_Popov I’ll experiment. I’ve never used the Node Material Editor before so i’ll have to take some time to get familiar with it so I’m able to fine tune the material. Ideally I’d like to dynamically specify multiple colours and display them in a similar way to your playground. The colours would typically be specified as input parameters to a fragment shader.

10

agree! thanks!