How To: Cel Shading Effect

How To: Cel Shading Effect

Also called cell shading and cartoon shading, you might have seen this cool effect before in some showcases:


Below I’ll show you how to change your lighting settings to get this effect.

Instructions

  1. Open Lighting in the properties window
    View > PropertiesView > Explorer > Lighting
  2. Change the FogStart and FogEnd to very large values (~100000)
    (Properties) Lighting > FogStart, FogEnd
  3. Change the FogColor to about <250000, 250000, 250000> (plus or minus ~50,000 still works and gives slightly different effects)
    (Properties) Lighting > FogColor
  4. That’s it! Your game should have the effect shown above! You can also try playing around with other Lighting settings to get the best effect for you game.
    (Properties) Lighting > ???

Pictures

Cel Shading 4

84 Likes

But what if you want a single thing cell shade like a skin or something.

3 Likes

You can’t create shaders in Roblox Studio, so this effect isn’t real cel shading. It’s just a bug feature that causes something similar to what a normal cel shader would do.

You can create a 3D model that looks somewhat like cel shading using reversed normals (and some other stuff) in blender, I assume that’s what you’re talking about.

Edit:

The video above is real cel shading. Visually it looks pretty similar.

6 Likes

It seems like it does not work for me.

4 Likes

DaezSama and I talked about their problem. I had forgotten to mention it doesn’t work that well with Roblox’s materials. It works best with smooth plastic or plastic.

5 Likes

some devices show weird effect after trying ur tutorial. i discovered this before but when I tried it on my other pc it produces a weird glitchy effect

5 Likes

For some reason it looks different in the actual game.

5 Likes

That’s weird. It probably changes a lot based on graphic settings, since it’s some weird behavior of HDR. Maybe that’s what’s going on?

3 Likes

I just realized that I had another lighting script interfering.

3 Likes

Hi, I was wondering what other lighting settings you altered to get that effect, I tried it out and I get this weird effect around the sun:

If I place a ball that also doesn’t look right:

Any way to fix this? Thanks!

5 Likes

That looks like the new baseplate, which has some lighting effects. The lighting effects are in Lighting and can be removed/modified to probably fix the problem.

Edit:

Interesting. It might have to do with some of the other lighting settings.

3 Likes

I already removed those, but I will try creating a place using the old baseplate, thanks!

4 Likes

Here are some notes for this:

  • It works depending by Graphics Mode you’ve set (and maybe computer equipment you have). In my observations on Windows 10 laptop, this won’t work with Vulkan or OpenGL. (shadows also won’t work with OpenGL, which I assume to be a bug that might be not related, the laptop’s fault or it’s just ROBLOX’s decision on performance, oh well then)
  • Post-processing effects are not affected by cel shading effect (method? method.) except for lights.

6 Likes

I (kind of?) got it working!



First I changed the FogColor into 300000, 300000, 300000 to make the blobs of color a little bigger, this still left me with the annoying big sun glare though, to fix that I changed the Brightness to zero. Now the sunlight is gone, and I only have lights I placed myself. This also fixed the weird 3 colored effect you can see on the ball in my first reply.
If anyone wants to achieve this effect but without the light showing on some surfaces like the baseplate, if it’s a dark color you can change the material to neon.

Thanks for the help!

14 Likes

Some notes to keep in mind when trying to cel shade:

  • If you have an Atmosphere under Lighting, you cannot access Fog settings. Remove Atmospheres if you have any.
  • This effect will only look good if you have a part-based map and not a terrain-based one.
  • Changing the FogColor property to values ranging from 1200000,1200000,1200000 to 1500000,1500000,1500000 will give a lighter effect intensity.
  • This effect won’t affect assets much with complex/multicolor textures.

At least these are what I experienced/experimented on my attempts.

6 Likes

I always figured it was based on a bug. I published a module on an older account that uses a method like this one but it was a global function and scripted. I think I multiplied a variable to change the intensity of the shading.

Edit (found it lol):

local Lighting = game:GetService("Lighting")
local cel = {}

function cel.shade(i) -- to reset, cel.shade(0)
	local mult = (i * 5998)
	Lighting.FogStart = 100000
	Lighting.FogEnd = 100000
	Lighting.FogColor = Color3.new(mult, mult, mult)
end

return cel

Can’t remember for the life of me what the Color3.new() is for or if it does anything.

2 Likes

Whats worked for me is turning down the exposure compensation and the brightness up a bit (about 4) and changing the lighting mode to Voxel

3 Likes

tried it and doesnt work on mac, but works on my windows computer

PSA: Be careful when relying on this effect. It may make mobile players unable to see.

I discovered this effect unfortunately doesn’t work on all devices. It works perfect on my desktop, however the effect does not work on my laptop when it is rendering off of integrated graphics, so perhaps this is a Nvidia-only effect? The game renders normally, which isn’t so bad but it makes the visual style I worked hard on tweaking imperfect.

In addition, this is a warning to those using this effect, it may make your game unplayable on some mobile devices. I’m not sure which exact ones and why, but when I tested my game on my Samsung S23, the whole world rendered black! I have to include a check to disable the effect on mobile devices for this reason.

Desktop:


Samsung S23:

6 Likes

Are you the maker of Vampire Hunters 2 ??? :OO

1 Like