image kernel

★★★★by Karim Salem (@kimo-s)

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 [textures] example - image kernel
//!
//! NOTE: Images are loaded in CPU memory (RAM); textures are loaded in GPU memory (VRAM)
//!
//! Zig-API translation of examples/textures/textures_image_kernel.c (raylib 6.2).
//! Example contributed by Karim Salem (@kimo-s) and reviewed by Ramon Santamaria (@raysan5)
//! Example licensed under an unmodified zlib/libpng license.
//! Copyright (c) 2015-2025 Karim Salem (@kimo-s)

const rl = @import("raylib");

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

    rl.initWindow(screen_width, screen_height, "raylib [textures] example - image kernel");
    defer rl.closeWindow(); // Close window and OpenGL context

    var image = try rl.loadImage("resources/cat.png"); // Loaded in CPU memory (RAM)

    var gaussian_kernel = [_]f32{
        1.0, 2.0, 1.0,
        2.0, 4.0, 2.0,
        1.0, 2.0, 1.0,
    };

    var sobel_kernel = [_]f32{
        1.0, 0.0, -1.0,
        2.0, 0.0, -2.0,
        1.0, 0.0, -1.0,
    };

    var sharpen_kernel = [_]f32{
        0.0,  -1.0, 0.0,
        -1.0, 5.0,  -1.0,
        0.0,  -1.0, 0.0,
    };

    normalizeKernel(&gaussian_kernel);
    normalizeKernel(&sharpen_kernel);
    normalizeKernel(&sobel_kernel);

    var cat_sharpend = rl.imageCopy(image);
    rl.imageKernelConvolution(&cat_sharpend, &sharpen_kernel);

    var cat_sobel = rl.imageCopy(image);
    rl.imageKernelConvolution(&cat_sobel, &sobel_kernel);

    var cat_gaussian = rl.imageCopy(image);
    for (0..6) |_| rl.imageKernelConvolution(&cat_gaussian, &gaussian_kernel);

    const crop: rl.Rectangle = .{ .x = 0, .y = 0, .width = 200, .height = 450 };
    rl.imageCrop(&image, crop);
    rl.imageCrop(&cat_gaussian, crop);
    rl.imageCrop(&cat_sobel, crop);
    rl.imageCrop(&cat_sharpend, crop);

    // Images converted to texture, GPU memory (VRAM)
    const texture = try rl.loadTextureFromImage(image);
    defer rl.unloadTexture(texture);
    const cat_sharpend_texture = try rl.loadTextureFromImage(cat_sharpend);
    defer rl.unloadTexture(cat_sharpend_texture);
    const cat_sobel_texture = try rl.loadTextureFromImage(cat_sobel);
    defer rl.unloadTexture(cat_sobel_texture);
    const cat_gaussian_texture = try rl.loadTextureFromImage(cat_gaussian);
    defer rl.unloadTexture(cat_gaussian_texture);

    // Once images have been converted to texture and uploaded to VRAM,
    // they can be unloaded from RAM
    rl.unloadImage(image);
    rl.unloadImage(cat_gaussian);
    rl.unloadImage(cat_sobel);
    rl.unloadImage(cat_sharpend);

    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
        // Draw
        rl.beginDrawing();
        defer rl.endDrawing();

        rl.clearBackground(.ray_white);

        rl.drawTexture(cat_sharpend_texture, 0, 0, .white);
        rl.drawTexture(cat_sobel_texture, 200, 0, .white);
        rl.drawTexture(cat_gaussian_texture, 400, 0, .white);
        rl.drawTexture(texture, 600, 0, .white);
    }
}

/// Scale the kernel so its weights sum to 1 (left as is when they sum to 0).
fn normalizeKernel(kernel: []f32) void {
    var sum: f32 = 0.0;
    for (kernel) |weight| sum += weight;

    if (sum != 0.0) {
        for (kernel) |*weight| weight.* /= sum;
    }
}

/*******************************************************************************************
*
*   raylib [textures] example - image kernel
*
*   Example complexity rating: [★★★★] 4/4
*
*   NOTE: Images are loaded in CPU memory (RAM); textures are loaded in GPU memory (VRAM)
*
*   Example contributed by Karim Salem (@kimo-s) and reviewed by Ramon Santamaria (@raysan5)
*
*   Example originally created with raylib 1.3, last time updated with raylib 1.3
*
*   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) 2015-2025 Karim Salem (@kimo-s)
*
********************************************************************************************/

#include "raylib.h"

//------------------------------------------------------------------------------------
// Module Functions Declaration
//------------------------------------------------------------------------------------
static void NormalizeKernel(float *kernel, int size);

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

    InitWindow(screenWidth, screenHeight, "raylib [textures] example - image kernel");

    Image image = LoadImage("resources/cat.png"); // Loaded in CPU memory (RAM)

    float gaussiankernel[] = {
        1.0f, 2.0f, 1.0f,
        2.0f, 4.0f, 2.0f,
        1.0f, 2.0f, 1.0f
    };

    float sobelkernel[] = {
        1.0f, 0.0f, -1.0f,
        2.0f, 0.0f, -2.0f,
        1.0f, 0.0f, -1.0f
    };

    float sharpenkernel[] = {
        0.0f, -1.0f, 0.0f,
       -1.0f, 5.0f, -1.0f,
        0.0f, -1.0f, 0.0f
    };

    NormalizeKernel(gaussiankernel, 9);
    NormalizeKernel(sharpenkernel, 9);
    NormalizeKernel(sobelkernel, 9);

    Image catSharpend = ImageCopy(image);
    ImageKernelConvolution(&catSharpend, sharpenkernel, 9);

    Image catSobel = ImageCopy(image);
    ImageKernelConvolution(&catSobel, sobelkernel, 9);

    Image catGaussian = ImageCopy(image);

    for (int i = 0; i < 6; i++)
    {
        ImageKernelConvolution(&catGaussian, gaussiankernel, 9);
    }

    ImageCrop(&image, (Rectangle){ 0, 0, (float)200, (float)450 });
    ImageCrop(&catGaussian, (Rectangle){ 0, 0, (float)200, (float)450 });
    ImageCrop(&catSobel, (Rectangle){ 0, 0, (float)200, (float)450 });
    ImageCrop(&catSharpend, (Rectangle){ 0, 0, (float)200, (float)450 });

    // Images converted to texture, GPU memory (VRAM)
    Texture2D texture = LoadTextureFromImage(image);
    Texture2D catSharpendTexture = LoadTextureFromImage(catSharpend);
    Texture2D catSobelTexture = LoadTextureFromImage(catSobel);
    Texture2D catGaussianTexture = LoadTextureFromImage(catGaussian);

    // Once images have been converted to texture and uploaded to VRAM,
    // they can be unloaded from RAM
    UnloadImage(image);
    UnloadImage(catGaussian);
    UnloadImage(catSobel);
    UnloadImage(catSharpend);

    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
        //----------------------------------------------------------------------------------
        // TODO: Update your variables here
        //----------------------------------------------------------------------------------

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

            ClearBackground(RAYWHITE);

            DrawTexture(catSharpendTexture, 0, 0, WHITE);
            DrawTexture(catSobelTexture, 200, 0, WHITE);
            DrawTexture(catGaussianTexture, 400, 0, WHITE);
            DrawTexture(texture, 600, 0, WHITE);

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

    // De-Initialization
    //--------------------------------------------------------------------------------------
    UnloadTexture(texture);
    UnloadTexture(catGaussianTexture);
    UnloadTexture(catSobelTexture);
    UnloadTexture(catSharpendTexture);

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

    return 0;
}

//------------------------------------------------------------------------------------
// Module Functions Definition
//------------------------------------------------------------------------------------
static void NormalizeKernel(float *kernel, int size)
{
    float sum = 0.0f;
    for (int i = 0; i < size; i++) sum += kernel[i];

    if (sum != 0.0f)
    {
        for (int i = 0; i < size; i++) kernel[i] /= sum;
    }
}

From raylib 6.2. The original on GitHub.