color correction

★★☆☆by Jordi Santonja (@JordSant)

There is no browser build of this example yet.

Is it the same as C?

Desktop:verified The Zig version renders a final frame that is byte-identical to the C example.
Browser:not checked yet The browser comparison does not cover this example yet.

ZigC (original)

//! raylib [shaders] example - color correction
//!
//! Zig-API translation of examples/shaders/shaders_color_correction.c (raylib 6.2).
//! Example contributed by Jordi Santonja (@JordSant) and reviewed by Ramon Santamaria (@raysan5)
//! Example licensed under an unmodified zlib/libpng license.
//! Copyright (c) 2025 Jordi Santonja (@JordSant)
//!
//! 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

const std = @import("std");
const rl = @import("raylib");
const gui = @import("raygui");

const glsl_version = 330;

const texture_paths = [_][:0]const u8{
    "resources/parrots.png",
    "resources/cat.png",
    "resources/mandrill.png",
    "resources/fudesumi.png",
};

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

    rl.initWindow(screen_width, screen_height, "raylib [shaders] example - color correction");
    defer rl.closeWindow(); // Close window and OpenGL context

    var textures: [texture_paths.len]rl.Texture2D = undefined;
    var textures_loaded: usize = 0;
    defer for (textures[0..textures_loaded]) |texture| rl.unloadTexture(texture);
    for (&textures, texture_paths) |*texture, path| {
        texture.* = try rl.loadTexture(path);
        textures_loaded += 1;
    }

    const shdr_color_correction = try rl.loadShader(null, std.fmt.comptimePrint("resources/shaders/glsl{d}/color_correction.fs", .{glsl_version}));
    defer rl.unloadShader(shdr_color_correction);

    var image_index: i32 = 0;
    var reset_button_clicked = false;

    var contrast: f32 = 0.0;
    var saturation: f32 = 0.0;
    var brightness: f32 = 0.0;

    // Get shader locations
    const contrast_loc = rl.getShaderLocation(shdr_color_correction, "contrast");
    const saturation_loc = rl.getShaderLocation(shdr_color_correction, "saturation");
    const brightness_loc = rl.getShaderLocation(shdr_color_correction, "brightness");

    // Set shader values (they can be changed later)
    rl.setShaderValue(shdr_color_correction, contrast_loc, contrast);
    rl.setShaderValue(shdr_color_correction, saturation_loc, saturation);
    rl.setShaderValue(shdr_color_correction, brightness_loc, brightness);

    rl.setTargetFPS(60); // Set our game to run at 60 frames-per-second

    // Main game loop
    while (!rl.windowShouldClose()) { // Detect window close button or ESC key
        // Update
        // Select texture to draw
        if (rl.isKeyPressed(.one)) {
            image_index = 0;
        } else if (rl.isKeyPressed(.two)) {
            image_index = 1;
        } else if (rl.isKeyPressed(.three)) {
            image_index = 2;
        } else if (rl.isKeyPressed(.four)) {
            image_index = 3;
        }

        // Reset values to 0
        if (rl.isKeyPressed(.r) or reset_button_clicked) {
            contrast = 0.0;
            saturation = 0.0;
            brightness = 0.0;
        }

        // Send the values to the shader
        rl.setShaderValue(shdr_color_correction, contrast_loc, contrast);
        rl.setShaderValue(shdr_color_correction, saturation_loc, saturation);
        rl.setShaderValue(shdr_color_correction, brightness_loc, brightness);

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

        rl.clearBackground(.ray_white);

        {
            rl.beginShaderMode(shdr_color_correction);
            defer rl.endShaderMode();

            const texture = textures[@intCast(image_index)];
            rl.drawTexture(texture, 580 / 2 - @divTrunc(texture.width, 2), @divTrunc(rl.getScreenHeight(), 2) - @divTrunc(texture.height, 2), .white);
        }

        rl.drawLine(580, 0, 580, rl.getScreenHeight(), .{ .r = 218, .g = 218, .b = 218, .a = 255 });
        rl.drawRectangle(580, 0, rl.getScreenWidth(), rl.getScreenHeight(), .{ .r = 232, .g = 232, .b = 232, .a = 255 });

        // Draw UI info text
        rl.drawText("Color Correction", 585, 40, 20, .gray);

        rl.drawText("Picture", 602, 75, 10, .gray);
        rl.drawText("Press [1] - [4] to Change Picture", 600, 230, 8, .gray);
        rl.drawText("Press [R] to Reset Values", 600, 250, 8, .gray);

        // Draw GUI controls
        _ = gui.toggleGroup(.{ .x = 645, .y = 70, .width = 20, .height = 20 }, "1;2;3;4", &image_index);

        _ = gui.sliderBar(.{ .x = 645, .y = 100, .width = 120, .height = 20 }, "Contrast", rl.textFormat("{d:.0}", .{contrast}), &contrast, -100.0, 100.0);
        _ = gui.sliderBar(.{ .x = 645, .y = 130, .width = 120, .height = 20 }, "Saturation", rl.textFormat("{d:.0}", .{saturation}), &saturation, -100.0, 100.0);
        _ = gui.sliderBar(.{ .x = 645, .y = 160, .width = 120, .height = 20 }, "Brightness", rl.textFormat("{d:.0}", .{brightness}), &brightness, -100.0, 100.0);

        reset_button_clicked = gui.button(.{ .x = 645, .y = 190, .width = 40, .height = 20 }, "Reset") != 0;

        rl.drawFPS(710, 10);
    }
}

/*******************************************************************************************
*
*   raylib [shaders] example - color correction
*
*   Example complexity rating: [★★☆☆] 2/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
*
*   Example originally created with raylib 6.0, last time updated with raylib 6.0
*
*   Example contributed by Jordi Santonja (@JordSant) 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) 2025 Jordi Santonja (@JordSant)
*
********************************************************************************************/

#include "raylib.h"

#define RAYGUI_IMPLEMENTATION
#include "raygui.h"                 // Required for GUI controls

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

#define MAX_TEXTURES 4

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

    InitWindow(screenWidth, screenHeight, "raylib [shaders] example - color correction");

    Texture2D texture[MAX_TEXTURES] = {
        LoadTexture("resources/parrots.png"),
        LoadTexture("resources/cat.png"),
        LoadTexture("resources/mandrill.png"),
        LoadTexture("resources/fudesumi.png")
    };

    Shader shdrColorCorrection = LoadShader(0, TextFormat("resources/shaders/glsl%i/color_correction.fs", GLSL_VERSION));

    int imageIndex = 0;
    int resetButtonClicked = 0;

    float contrast = 0.0f;
    float saturation = 0.0f;
    float brightness = 0.0f;

    // Get shader locations
    int contrastLoc = GetShaderLocation(shdrColorCorrection, "contrast");
    int saturationLoc = GetShaderLocation(shdrColorCorrection, "saturation");
    int brightnessLoc = GetShaderLocation(shdrColorCorrection, "brightness");

    // Set shader values (they can be changed later)
    SetShaderValue(shdrColorCorrection, contrastLoc, &contrast, SHADER_UNIFORM_FLOAT);
    SetShaderValue(shdrColorCorrection, saturationLoc, &saturation, SHADER_UNIFORM_FLOAT);
    SetShaderValue(shdrColorCorrection, brightnessLoc, &brightness, SHADER_UNIFORM_FLOAT);

    SetTargetFPS(60);               // Set our game to run at 60 frames-per-second
    //--------------------------------------------------------------------------------------

    // Main game loop
    while (!WindowShouldClose())    // Detect window close button or ESC key
    {
        // Update
        //----------------------------------------------------------------------------------
        // Select texture to draw
        if (IsKeyPressed(KEY_ONE)) imageIndex = 0;
        else if (IsKeyPressed(KEY_TWO)) imageIndex = 1;
        else if (IsKeyPressed(KEY_THREE)) imageIndex = 2;
        else if (IsKeyPressed(KEY_FOUR)) imageIndex = 3;

        // Reset values to 0
        if (IsKeyPressed(KEY_R) || resetButtonClicked)
        {
            contrast = 0.0f;
            saturation = 0.0f;
            brightness = 0.0f;
        }

        // Send the values to the shader
        SetShaderValue(shdrColorCorrection, contrastLoc, &contrast, SHADER_UNIFORM_FLOAT);
        SetShaderValue(shdrColorCorrection, saturationLoc, &saturation, SHADER_UNIFORM_FLOAT);
        SetShaderValue(shdrColorCorrection, brightnessLoc, &brightness, SHADER_UNIFORM_FLOAT);
        //----------------------------------------------------------------------------------

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

            ClearBackground(RAYWHITE);

            BeginShaderMode(shdrColorCorrection);

                DrawTexture(texture[imageIndex], 580/2 - texture[imageIndex].width/2, GetScreenHeight()/2 - texture[imageIndex].height/2, WHITE);

            EndShaderMode();

            DrawLine(580, 0, 580, GetScreenHeight(), (Color){ 218, 218, 218, 255 });
            DrawRectangle(580, 0, GetScreenWidth(), GetScreenHeight(), (Color){ 232, 232, 232, 255 });

            // Draw UI info text
            DrawText("Color Correction", 585, 40, 20, GRAY);

            DrawText("Picture", 602, 75, 10, GRAY);
            DrawText("Press [1] - [4] to Change Picture", 600, 230, 8, GRAY);
            DrawText("Press [R] to Reset Values", 600, 250, 8, GRAY);

            // Draw GUI controls
            //------------------------------------------------------------------------------
            GuiToggleGroup((Rectangle){ 645, 70, 20, 20 }, "1;2;3;4", &imageIndex);

            GuiSliderBar((Rectangle){ 645, 100, 120, 20 }, "Contrast", TextFormat("%.0f", contrast), &contrast, -100.0f, 100.0f);
            GuiSliderBar((Rectangle){ 645, 130, 120, 20 }, "Saturation", TextFormat("%.0f", saturation), &saturation, -100.0f, 100.0f);
            GuiSliderBar((Rectangle){ 645, 160, 120, 20 }, "Brightness", TextFormat("%.0f", brightness), &brightness, -100.0f, 100.0f);

            resetButtonClicked = GuiButton((Rectangle){ 645, 190, 40, 20 }, "Reset");
            //------------------------------------------------------------------------------

            DrawFPS(710, 10);

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

    // De-Initialization
    //--------------------------------------------------------------------------------------
    for (int i = 0; i < MAX_TEXTURES; i++) UnloadTexture(texture[i]);
    UnloadShader(shdrColorCorrection);

    CloseWindow();        // Close window and OpenGL context
    //--------------------------------------------------------------------------------------

    return 0;
}

From raylib 6.2. The original on GitHub.