<Toon Shader>

[github-actions]

Description

Hi everyone,

I’ve been working on a new extension for GDevelop 3D that provides a complete set of tools to achieve a stylized, anime/cartoon look. Since GDevelop is expanding its 3D capabilities, I thought this would be a great addition for users who want to move away from the default realistic shading.

What does it do? This extension isn't just a simple shader; it's a collection of actions that handle several "Toon" effects:

Cel-Shading: Replaces smooth lighting with sharp steps. It supports custom gradient maps so users can define exactly how shadows look.
Dynamic Outlines: A robust outline system that uses vertex extrusion. The thickness stays consistent regardless of camera distance, and it works perfectly with skinned/animated meshes.
Rim Lighting: Adds that "edge glow" effect often seen in high-end anime games to make characters pop from the background.
Cartoon Specular: Clean, sharp highlights for materials like metal or eyes, with full control over light direction and sharpness.
Manga/Halftone Effects: Includes options for hatching and halftone dots inside shadows for a comic book aesthetic.
Emission Control: Easy way to make specific parts of a 3D model glow.

How to use the extension

Cartoon Outline

Overview

The Outline effect adds a solid colored line around the silhouette of your 3D models. This separates the character from the background, essential for the anime/manga aesthetic.

Action: Add/Change Outline

Command: Add/Change outline for OBJECT (...)

Parameters

1. Fill Color / Opacity: (Optional) Controls a secondary "Overlay" mesh on top of the main object if you want a tint. Usually, keep Opacity at 0.
2. Outline Color: The color of the line (usually Black).
3. Outline Thickness: How thick the line is.
   • Values: 2.0 to 5.0 are standard. 10.0+ for a thick marker style.
4. Is Animated?: CRITICAL.
   • Set to True if the object is a Skinned Mesh (has bones/animations).
   • Set to False for static props (crates, walls).
   • Why? Animated outlines are computationally expensive; only use when necessary.

Action: Remove Outline

Command: Remove outline from OBJECT

Deletes the outline meshes to free up performance.

Rim Lighting (Fresnel)

Overview

Rim Lighting enhances the silhouette of an object by adding a glow to the edges that are glancing away from the camera. This simulates backlighting or atmospheric scattering and is a staple of high-quality anime rendering

Action: Apply Rim Lighting

Command: Apply rim lighting to OBJECT (Color: COLOR, Intensity: NUM, Spread: NUM, Sharpness: NUM, Opacity: NUM)

Parameters

1. Color: The glow color (often white or light blue).
2. Intensity: Brightness multiplier (1.0 - 5.0).
3. Spread (Power): Controls how "wide" the rim is.
   • This is an exponent value.
   • Low Value (2.0): The rim covers almost the whole object.
   • High Value (8.0): The rim works only on the very faint edges.
4. Sharpness:
   • 0.0: Soft, realistic glow.
   • 1.0: Hard-edged band (Use this for Toon style).
5. Opacity:
   • Controls the transparency/strength of the effect (0.0 to 1.0).
   • Lower values allow for subtle, professional blending with the base material.

Visual Style

• Soft Rim: Good for "velvet" or ghostly materials.
• Sharp Rim: Looks like a second "light band" painted on the edge, perfect for Cel Shading.

Emission / Glow Effect

Overview

The Emission effect allows your 3D objects to emit light, creating a glowing appearance. This is calculated using the object's material emissive properties. It interacts with the scene by making the object appear bright regardless of lighting conditions, simulating a light source.

This effect is perfect for:

• Glowing Eyes: Making a character's eyes shine in the dark.
• Magic Effects: Staffs, spells, or portals.
• Sci-Fi Elements: Neon lights, buttons, or holograms.

Action: Apply Emission (Glow)

Command: Apply Emission to OBJECT (Color: COLOR, Intensity: NUMBER, Texture: IMAGE)

Parameters

1. Color: The tint of the glow.
   • Example: Red for enemies, Cyan for friendlies.
2. Intensity: The brightness multiplier.
   • Range: 0.0 (No glow) to 10.0+ (Blinding).
   • Recommended: Start with 1.0. High values (e.g., 5.0) will make the color appear white/washed out in the center, typical of real bright lights.
3. Texture (Optional): An Emissive Map.
   • This is the most powerful feature. If provided, only the non-black parts of this image will glow.
   • Use Case: For glowing eyes, upload an image where the face is black but the eyes are white. Apply it here, and the mesh will use the original texture for color, but the emission texture to decide where to glow.

Action: Remove Emission

Command: Remove Emission from OBJECT

removes all glow effects, resetting the emissive color to black.

There are other effects that cannot be fully discussed here, but through experience, you will learn how to use them.

Checklist

• I've followed all of the best practices.
• I confirm that this extension can be integrated to this GitHub repository, distributed and MIT licensed.
• I am aware that the extension may be updated by anyone, and do not need my explicit consent to do so.

Example file

MyExample.zip

Extension file

ToonShader.zip

---

Extension by @Carrotstudio0

You can update the extension on this "Pull Request" by commenting the update command: in the comment field, type !update, then drag and drop a zip file with your extension file in the commenting field, like how you initially submitted the extension. It should look like this:

!update [MyExtension.zip](https://github.com/GDevelopApp/GDevelop-extensions/files/12709661/MyExtension.zip)

It can take a few seconds for the file to fully upload and show as the above. Once it is like shown above, click "Comment" and let the bot do the rest!