← ziglang.inraylib-zigGitHub

cel shading

★★★☆by Gleb A (@ggrizzly)

There is no browser build of this example yet.

Is it the same as C?

//! raylib [shaders] example - cel shading
//!
//! Zig-API translation of examples/shaders/shaders_cel_shading.c (raylib 6.2).
//! Example contributed by Gleb A (@ggrizzly) and reviewed by Ramon Santamaria (@raysan5)
//! Example licensed under an unmodified zlib/libpng license.
//! Copyright (c) 2026 Gleb A (@ggrizzly)

const std = @import("std");
const rl = @import("raylib");
const rlights = @import("rlights");

const glsl_version = 330;

pub fn main() !void {
    // Initialization
    const screen_width = 800;
    const screen_height = 450;

    rl.setConfigFlags(.{ .msaa_4x_hint = true });
    rl.initWindow(screen_width, screen_height, "raylib [shaders] example - cel shading");
    defer rl.closeWindow();

    var camera: rl.Camera = .{
        .position = .{ .x = 9.0, .y = 6.0, .z = 9.0 },
        .target = .{ .x = 0.0, .y = 1.0, .z = 0.0 },
        .up = .{ .x = 0.0, .y = 1.0, .z = 0.0 },
        .fovy = 45.0,
        .projection = .perspective,
    };

    // Load model
    const model = try rl.loadModel("resources/models/old_car_new.glb");
    defer rl.unloadModel(model);

    // Load cel shader
    const cel_shader = try rl.loadShader(
        std.fmt.comptimePrint("resources/shaders/glsl{d}/cel.vs", .{glsl_version}),
        std.fmt.comptimePrint("resources/shaders/glsl{d}/cel.fs", .{glsl_version}),
    );
    defer rl.unloadShader(cel_shader);
    cel_shader.loc(.vector_view).* = rl.getShaderLocation(cel_shader, "viewPos");

    // Apply cel shader to model, keep copy of default shader
    const material = &model.materials.?[0];
    const default_shader = material.shader;
    material.shader = cel_shader;

    // numBands: controls toon quantization steps (2 = hard binary, 20 = near-smooth)
    var num_bands: f32 = 10.0;
    const num_bands_loc = rl.getShaderLocation(cel_shader, "numBands");
    rl.setShaderValue(cel_shader, num_bands_loc, num_bands);

    // Inverted-hull outline shader: draws back faces extruded along normals
    const outline_shader = try rl.loadShader(
        std.fmt.comptimePrint("resources/shaders/glsl{d}/outline_hull.vs", .{glsl_version}),
        std.fmt.comptimePrint("resources/shaders/glsl{d}/outline_hull.fs", .{glsl_version}),
    );
    defer rl.unloadShader(outline_shader);
    const outline_thickness_loc = rl.getShaderLocation(outline_shader, "outlineThickness");

    // Single directional white light, angled so toon bands are visible on the model sides.
    // Spins opposite to CAMERA_ORBITAL (0.5 rad/s) so lighting changes as you watch.
    // The unused slots stay zero lights, updated like the C example does.
    var lights: [rlights.max_lights]rlights.Light = .{
        rlights.createLight(.directional, .{ .x = 50.0, .y = 50.0, .z = 50.0 }, rl.math.vector3Zero(), .white, cel_shader),
        .{},
        .{},
        .{},
    };

    var cel_enabled = true;
    var outline_enabled = true;

    rl.setTargetFPS(60);

    // Main game loop
    while (!rl.windowShouldClose()) {
        // Update
        rl.updateCamera(&camera, .orbital);

        rl.setShaderValue(cel_shader, cel_shader.loc(.vector_view).*, camera.position);

        // [Z] Toggle cel shading on/off
        if (rl.isKeyPressed(.z)) {
            cel_enabled = !cel_enabled;
            material.shader = if (cel_enabled) cel_shader else default_shader;
        }

        // [C] Toggle outline on/off
        if (rl.isKeyPressed(.c)) outline_enabled = !outline_enabled;

        // [Q/E] Decrease/increase toon band count (press or hold to repeat)
        if (rl.isKeyPressed(.e) or rl.isKeyPressedRepeat(.e)) num_bands = rl.math.clamp(num_bands + 1.0, 2.0, 20.0);
        if (rl.isKeyPressed(.q) or rl.isKeyPressedRepeat(.q)) num_bands = rl.math.clamp(num_bands - 1.0, 2.0, 20.0);
        rl.setShaderValue(cel_shader, num_bands_loc, num_bands);

        // Spin light opposite to CAMERA_ORBITAL (0.5 rad/s), angled 45 degrees off vertical
        const t: f32 = @floatCast(rl.getTime());
        lights[0].position = .{ .x = @sin(-t * 0.3) * 5.0, .y = 5.0, .z = @cos(-t * 0.3) * 5.0 };

        for (lights) |light| light.update(cel_shader);

        // Draw
        rl.beginDrawing();
        defer rl.endDrawing();

        rl.clearBackground(.ray_white);

        {
            rl.beginMode3D(camera);
            defer rl.endMode3D();

            if (outline_enabled) {
                // Outline pass: cull front faces, draw extruded back faces as silhouette
                const thickness: f32 = 0.005;
                rl.setShaderValue(outline_shader, outline_thickness_loc, thickness);

                rl.gl.setCullFace(rl.gl.cull_face_front);

                material.shader = outline_shader;

                rl.drawModel(model, rl.math.vector3Zero(), 0.75, .white);

                material.shader = if (cel_enabled) cel_shader else default_shader;

                rl.gl.setCullFace(rl.gl.cull_face_back);
            }

            rl.drawModel(model, rl.math.vector3Zero(), 0.75, .white);
            rl.drawSphereEx(lights[0].position, 0.2, 50, 50, .yellow); // Light position indicator
            rl.drawGrid(10, 10.0);
        }

        rl.drawFPS(10, 10);
        rl.drawText(rl.textFormat("Cel: {s}  [Z]", .{if (cel_enabled) "ON" else "OFF"}), 10, 65, 20, if (cel_enabled) .dark_green else .dark_gray);
        rl.drawText(rl.textFormat("Outline: {s}  [C]", .{if (outline_enabled) "ON" else "OFF"}), 10, 90, 20, if (outline_enabled) .dark_green else .dark_gray);
        rl.drawText(rl.textFormat("Bands: {d:.0}  [Q/E]", .{num_bands}), 10, 115, 20, .dark_gray);
    }
}
/*******************************************************************************************
*
*   raylib [shaders] example - cel shading
*
*   Example complexity rating: [★★★☆] 3/4
*
*   NOTE: This example requires raylib OpenGL 3.3 or ES2 versions for shaders support,
*         OpenGL 1.1 does not support shaders, recompile raylib to OpenGL 3.3 version
*
*   NOTE: Shaders used in this example are #version 330 (OpenGL 3.3)
*
*   Example originally created with raylib 6.0, last time updated with raylib 6.0
*
*   Example contributed by Gleb A (@ggrizzly) and reviewed by Ramon Santamaria (@raysan5)
*
*   Example licensed under an unmodified zlib/libpng license, which is an OSI-certified,
*   BSD-like license that allows static linking with closed source software
*
*   Copyright (c) 2026 Gleb A (@ggrizzly)
*
********************************************************************************************/

#include "raylib.h"
#include "raymath.h"
#include "rlgl.h"

#include <math.h>       // Required for: sinf(), cosf()

#define RLIGHTS_IMPLEMENTATION
#include "rlights.h"

#if defined(PLATFORM_DESKTOP)
    #define GLSL_VERSION            330
#else   // PLATFORM_ANDROID, PLATFORM_WEB
    #define GLSL_VERSION            100
#endif

//------------------------------------------------------------------------------------
// Program main entry point
//------------------------------------------------------------------------------------
int main(void)
{
    // Initialization
    //--------------------------------------------------------------------------------------
    const int screenWidth = 800;
    const int screenHeight = 450;

    SetConfigFlags(FLAG_MSAA_4X_HINT);
    InitWindow(screenWidth, screenHeight, "raylib [shaders] example - cel shading");

    Camera camera = { 0 };
    camera.position = (Vector3){ 9.0f, 6.0f, 9.0f };
    camera.target = (Vector3){ 0.0f, 1.0f, 0.0f };
    camera.up = (Vector3){ 0.0f, 1.0f, 0.0f };
    camera.fovy = 45.0f;
    camera.projection = CAMERA_PERSPECTIVE;

    // Load model
    Model model = LoadModel("resources/models/old_car_new.glb");

    // Load cel shader
    Shader celShader = LoadShader(
        TextFormat("resources/shaders/glsl%i/cel.vs", GLSL_VERSION),
        TextFormat("resources/shaders/glsl%i/cel.fs", GLSL_VERSION));
    celShader.locs[SHADER_LOC_VECTOR_VIEW] = GetShaderLocation(celShader, "viewPos");

    // Apply cel shader to model, keep copy of default shader
    Shader defaultShader = model.materials[0].shader;
    model.materials[0].shader = celShader;

    // numBands: controls toon quantization steps (2 = hard binary, 20 = near-smooth)
    float numBands = 10.0f;
    int numBandsLoc = GetShaderLocation(celShader, "numBands");
    SetShaderValue(celShader, numBandsLoc, &numBands, SHADER_UNIFORM_FLOAT);

    // Inverted-hull outline shader: draws back faces extruded along normals
    Shader outlineShader = LoadShader(
        TextFormat("resources/shaders/glsl%i/outline_hull.vs", GLSL_VERSION),
        TextFormat("resources/shaders/glsl%i/outline_hull.fs", GLSL_VERSION));
    int outlineThicknessLoc = GetShaderLocation(outlineShader, "outlineThickness");

    // Single directional white light, angled so toon bands are visible on the model sides.
    // Spins opposite to CAMERA_ORBITAL (0.5 rad/s) so lighting changes as you watch.
    Light lights[MAX_LIGHTS] = { 0 };
    lights[0] = CreateLight(LIGHT_DIRECTIONAL, (Vector3){ 50.0f, 50.0f, 50.0f }, Vector3Zero(), WHITE, celShader);

    bool celEnabled = true;
    bool outlineEnabled = true;

    SetTargetFPS(60);
    //--------------------------------------------------------------------------------------

    // Main game loop
    while (!WindowShouldClose())
    {
        // Update
        //----------------------------------------------------------------------------------
        UpdateCamera(&camera, CAMERA_ORBITAL);

        float cameraPos[3] = { camera.position.x, camera.position.y, camera.position.z };
        SetShaderValue(celShader, celShader.locs[SHADER_LOC_VECTOR_VIEW], cameraPos, SHADER_UNIFORM_VEC3);

        // [Z] Toggle cel shading on/off
        if (IsKeyPressed(KEY_Z))
        {
            celEnabled = !celEnabled;
            if (celEnabled) model.materials[0].shader = celShader; // Apply cel shader to model
            else model.materials[0].shader = defaultShader; // Apply default shader to model
        }

        // [C] Toggle outline on/off
        if (IsKeyPressed(KEY_C)) outlineEnabled = !outlineEnabled;

        // [Q/E] Decrease/increase toon band count (press or hold to repeat)
        if (IsKeyPressed(KEY_E) || IsKeyPressedRepeat(KEY_E)) numBands = Clamp(numBands + 1.0f, 2.0f, 20.0f);
        if (IsKeyPressed(KEY_Q) || IsKeyPressedRepeat(KEY_Q)) numBands = Clamp(numBands - 1.0f, 2.0f, 20.0f);
        SetShaderValue(celShader, numBandsLoc, &numBands, SHADER_UNIFORM_FLOAT);

        // Spin light opposite to CAMERA_ORBITAL (0.5 rad/s), angled 45 degrees off vertical
        float t = (float)GetTime();
        lights[0].position = (Vector3){ sinf(-t*0.3f)*5.0f, 5.0f, cosf(-t*0.3f)*5.0f };

        for (int i = 0; i < MAX_LIGHTS; i++) UpdateLightValues(celShader, lights[i]);
        //----------------------------------------------------------------------------------

        // Draw
        //----------------------------------------------------------------------------------
        BeginDrawing();

            ClearBackground(RAYWHITE);

            BeginMode3D(camera);

                if (outlineEnabled)
                {
                    // Outline pass: cull front faces, draw extruded back faces as silhouette
                    float thickness = 0.005f;
                    SetShaderValue(outlineShader, outlineThicknessLoc, &thickness, SHADER_UNIFORM_FLOAT);

                    rlSetCullFace(RL_CULL_FACE_FRONT);

                    model.materials[0].shader = outlineShader;

                    DrawModel(model, Vector3Zero(), 0.75f, WHITE);

                    if (celEnabled) model.materials[0].shader = celShader; // Apply cel shader to model
                    else model.materials[0].shader = defaultShader; // Apply default shader to model

                    rlSetCullFace(RL_CULL_FACE_BACK);
                }

                DrawModel(model, Vector3Zero(), 0.75f, WHITE);
                DrawSphereEx(lights[0].position, 0.2f, 50, 50, YELLOW);  // Light position indicator
                DrawGrid(10, 10.0f);

            EndMode3D();

            DrawFPS(10, 10);
            DrawText(TextFormat("Cel: %s  [Z]", celEnabled? "ON" : "OFF"), 10, 65, 20, celEnabled? DARKGREEN : DARKGRAY);
            DrawText(TextFormat("Outline: %s  [C]", outlineEnabled? "ON" : "OFF"), 10, 90, 20, outlineEnabled? DARKGREEN : DARKGRAY);
            DrawText(TextFormat("Bands: %.0f  [Q/E]", numBands), 10, 115, 20, DARKGRAY);

        EndDrawing();
        //----------------------------------------------------------------------------------
    }

    // De-Initialization
    //--------------------------------------------------------------------------------------
    UnloadModel(model);
    UnloadShader(celShader);
    UnloadShader(outlineShader);

    CloseWindow();
    //--------------------------------------------------------------------------------------

    return 0;
}

From raylib 6.2. The original on GitHub.