How can I create a beautiful outline for meshes aka "Cell Shading"

I tried to create a cube in the sandbox to quickly test the rendering of faces, and unfortunately, the faces inside the objects are not rendered. The effect is similar to the built-in “renderOutline” property.

Oh, you probably need a magic trick or a bit of voodoo! :slight_smile:

Duplicate the mesh, place it in the same spot, scale it up a bit, and use a transparent emissive color.


index.zip (940 Bytes)

Thanks for the interesting solution, but if the model is complex, for example, 1 million vertices, then creating a copy of the models will require a lot of resources.

Not if you use instances. The geometry is then only stored once.

1 Like

Can you share a playground(s) of your test(s) ? You should be able to have other edges rendered like I did on my red cube

Problem is a cube will indeed overlap itself a bit after a scaling, but a lot of shapes won’t fit (for example just take a table with 4 legs, scaling will have the legs going outside, and you don’t have a overlay on the inside of the legs)

Yeah but you cannot put another material on an instance, so it means for this trick you need to have a single material, with custom per-instance shading

@Tricotou I was so close to the optimal solution, so close!! :smiley:

I tried it, but it doesn’t work, because a translucent instance/material will change the overall color of the model, and it still seems like it’s inside another model.

Here it is. Babylon.js Playground

Ok so I didn’t get the point with the external library, but here is the default edgeRendering :

Thank you all for your interest in this topic and for your help in finding solutions. I realized that I did not try to adjust the line width for edgeRendering. For now, I’ll focus on this method and try to write a functional for adaptive line thickness variation - the closer to the border, the thinner the edge.

Why doesn’t edgeRendering have an “adaptive line thickness” setting!(((
There is a Wireframe, where the width of the lines is adaptive…

But this example(https://playground.babylonjs.com/#V1DU10#2) haunts me and I will definitely dig into shaders again!

1 Like

What exactly do you want to reproduce here ? :thinking:
(Manual camera version : here )