How to make cartoony like lighting and shadows?

Questions
1

I’m trying to make 3d projection that would look like this
example

So far I achieved this https://playground.babylonjs.com/#GQNKJA#1
but there are few issues idk how to fix or how to solve:

  1. The ground is not uniformly lit, there is whiter space at the bottom
  2. The transition between lit and unlit part of the sphere is not sharp
  3. Matching the colors - the shadows are either too dark or the object are too light
2

1)Simple understanding,the bright spot is highlight(specular).

2)Your scene is too bright and you set the ambientColor,it will make the unlit part of the sphere to be lit.

3)I don’t know what effect you want to set.
If you think that the shadow it too dark.We can set shadowGenerator.darkness bigger.Or we can use some filter function.
darkness: https://playground.babylonjs.com/#GQNKJA#5
shadow filter function:https://playground.babylonjs.com/#GQNKJA#6(It shows only minor different with none filter.

I don’t know if I understand your question correctly.Hope it can help you.

1 Like
3

There are many solutions to these problems.Like the first question,we also can use pbrMaterial,set the roughness higher and set the light radius bigger to make the bright spot blur.
Forgive me for not listing all the solutions.If it can not resolve your problems,welcome to continue the discussion。

4

Thank you, https://playground.babylonjs.com/#GQNKJA#8 that’s exactly what I was trying to achieve. Now I can just play with the colors.

5

These videos on our official channel are also super cool examples of cartoon shading :smiley:
Create Your Own Toon Shader with Babylon.js! Part 1 - YouTube
Node Material: Ink Shader Tutorial - YouTube

3 Likes