How It's Done: Making "Shaders" (Part 1)

NOTE!!!!!!

Due to a recent update, Compatibility has been removed.

It is recommended that you use ColorGradingEffect.

Introduction

While it is good to use Future for realistic lighting, sometimes you don't like realism and instead opt-into some cartoon-like lighting for good pleasure.

Well, I’m here to help you with that by using only three services (two rather):

  1. Lighting (main)
  2. MaterialService (main)
  3. Terrain (optional, for clouds.)

Lighting

This is the primary part of creating shaders if you don't care about materials.

Here, you can adjust any kinds of parameters.

This is what it looks like:

Appearance

  • Ambient - Controls the overall color of the place, can go over 255.
Example


Default (138,138,138)

Strawberry-like Red (500,0,0)

MY EYES!!! (9999999…,9999999…,9999999…)

  • Outdoor - Controls the color of the outdoors.
Comparison (500,0,0)
  1. Ambient:
  2. Outdoor:
  • Brightness - Controls the overall brightness (Depends on Technology).
Comparison
  1. Compatibility (Upgraded Legacy):
  2. Voxel:
  3. ShadowMap:
  4. Future (same thing):
  • ColorShift - Controls the color of a selected group (Top/Bottom), can go over 255.
Comparison

!!! These properties only work on Voxel and Compatibility.

  • Enviornment - Diffuse and Specular, both limited to 0 - 1.
Comparison
  • Diffuse - Controls how light (skybox-only) scatters around the dark:
  1. Without Diffuse:


  2. With Diffuse:


  • Specular - Controls how light (skybox-only) scatters around the light:
  1. Without Specular:
  2. With Specular:
  • GlobalShadows - Self-explanatory; removes any shadows except for the humanoids’.

!!! To remove humanoid shadows, either manually turn off all shadows or create a script that automatically removes all forms of shadows from the humanoids.

  • Technology - Controls how the lighting works.
Comparison
  1. Compatibility


  2. Voxel


  3. ShadowMap


  4. Future

Data

We will only be focusing on two parameters (three actually) here.
  • ClockTime/TimeOfDay - Controls the time (one is a number while other is a string).
Examples
  1. DayTime (14)


  2. NightTime (0)
  • GeographicLatitude - Controls the offset of the time.
Examples
  1. 0


  2. 230


Exposure

Self-explanatory; unlike Brightness, Exposure lightens up everywhere.
Examples
  1. -1

  2. 0

  3. 1

Fog

To get the Fog tab, remove "Atmosphere".
  • FogColor - Self-explanatory; can go over 255.
  • FogEnd - Controls how far the fog should be.
  • FogStart - Controls how far the fog should start.

Now that we’ve learned the parameters, let’s see what we can do with them!

Examples

Juice World-inspired lighting:




Viewport-like lighting:




Toon shading:



If you want to learn more about Lighting, check the documentation here.

MaterialService

If you like shaders with custom materials then use this one.

Here, you can change materials.


This is what it looks like:




To get the pre-2022 materials, untick Use2022Materials inside Material Pack.

Comparison (taken from a video)







To make a variant of an already-existing material:

  1. Insert a MaterialVariant inside MaterialService.
  2. Select the Base Material.
  3. Adjust the look (use image ids for texture maps, adjust the size and pattern).

To change the variant of a certain part:

  1. Select the part.
  2. Go to MaterialVariant.
  3. Change the Variant.

To replace the material with the variant:

  1. Go to MaterialService.
  2. Search for a material to replace.
  3. Change the Variant.

Here is an example of those steps being used:

If you want to learn more, check the documentation here.

Clouds

Clouds can also be used to enhance the "shader", since clouds affect the shadows; they should affect the overall look as well.

You can also change the color of the clouds for an added bonus, like in this example here:


The cloud color is -2147483648, -2147483648, -2147483648


Congratulations! You’ve now learned how “shaders” are made.
Now, you can flex about the fact that you’ve basically used several bugs features to achieve your desired effect!

If you want to learn more about how different types of “shaders” are made, then be sure to check the topic here.

31 Likes

Pretty “In-Depth”. Helped me understand Lighting a bit more!

Could you please add how to make those Lighting Presets like “Toon” and “Juice World”?

1 Like

For Toon, you need to use brightness and set every single part’s material to neon.
For Juice World, delete atmosphere and use fog-color as it can go over 255 (make sure to set both fog distances to the same number like math.huge).

1 Like

It controls the reflections, if you set it to 0 on this scene:

, then there shouldn’t be any specular highlights on the reflective Foil or Metal part.

1 Like

they’re both set to 1 for showcase purposes only.

1 Like