texture outline

★★★☆by Serenity Skiff (@GoldenThumbs)

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 - texture outline
//!
//! Zig-API translation of examples/shaders/shaders_texture_outline.c (raylib 6.2).
//! Example contributed by Serenity Skiff (@GoldenThumbs) and reviewed by Ramon Santamaria (@raysan5)
//! Example licensed under an unmodified zlib/libpng license.
//! Copyright (c) 2021-2025 Serenity Skiff (@GoldenThumbs) and Ramon Santamaria (@raysan5)

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

const glsl_version = 330;

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

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

    const texture = try rl.loadTexture("resources/fudesumi.png");
    defer rl.unloadTexture(texture);

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

    var outline_size: f32 = 2.0;
    const outline_color = [4]f32{ 1.0, 0.0, 0.0, 1.0 }; // Normalized RED color
    const texture_size = [2]f32{ @floatFromInt(texture.width), @floatFromInt(texture.height) };

    // Get shader locations
    const outline_size_loc = rl.getShaderLocation(shdr_outline, "outlineSize");
    const outline_color_loc = rl.getShaderLocation(shdr_outline, "outlineColor");
    const texture_size_loc = rl.getShaderLocation(shdr_outline, "textureSize");

    // Set shader values (they can be changed later)
    rl.setShaderValue(shdr_outline, outline_size_loc, outline_size);
    rl.setShaderValue(shdr_outline, outline_color_loc, outline_color);
    rl.setShaderValue(shdr_outline, texture_size_loc, texture_size);

    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
        outline_size += rl.getMouseWheelMove();
        if (outline_size < 1.0) outline_size = 1.0;

        rl.setShaderValue(shdr_outline, outline_size_loc, outline_size);

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

        rl.clearBackground(.ray_white);

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

            rl.drawTexture(texture, @divTrunc(rl.getScreenWidth(), 2) - @divTrunc(texture.width, 2), -30, .white);
        }

        rl.drawText("Shader-based\ntexture\noutline", 10, 10, 20, .gray);
        rl.drawText("Scroll mouse wheel to\nchange outline size", 10, 72, 20, .gray);
        rl.drawText(rl.textFormat("Outline size: {d} px", .{@as(i32, @intFromFloat(outline_size))}), 10, 120, 20, .maroon);

        rl.drawFPS(710, 10);
    }
}

/*******************************************************************************************
*
*   raylib [shaders] example - texture outline
*
*   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
*
*   Example originally created with raylib 4.0, last time updated with raylib 4.0
*
*   Example contributed by Serenity Skiff (@GoldenThumbs) 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) 2021-2025 Serenity Skiff (@GoldenThumbs) and Ramon Santamaria (@raysan5)
*
********************************************************************************************/

#include "raylib.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;

    InitWindow(screenWidth, screenHeight, "raylib [shaders] example - texture outline");

    Texture2D texture = LoadTexture("resources/fudesumi.png");

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

    float outlineSize = 2.0f;
    float outlineColor[4] = { 1.0f, 0.0f, 0.0f, 1.0f };     // Normalized RED color
    float textureSize[2] = { (float)texture.width, (float)texture.height };

    // Get shader locations
    int outlineSizeLoc = GetShaderLocation(shdrOutline, "outlineSize");
    int outlineColorLoc = GetShaderLocation(shdrOutline, "outlineColor");
    int textureSizeLoc = GetShaderLocation(shdrOutline, "textureSize");

    // Set shader values (they can be changed later)
    SetShaderValue(shdrOutline, outlineSizeLoc, &outlineSize, SHADER_UNIFORM_FLOAT);
    SetShaderValue(shdrOutline, outlineColorLoc, outlineColor, SHADER_UNIFORM_VEC4);
    SetShaderValue(shdrOutline, textureSizeLoc, textureSize, SHADER_UNIFORM_VEC2);

    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
        //----------------------------------------------------------------------------------
        outlineSize += GetMouseWheelMove();
        if (outlineSize < 1.0f) outlineSize = 1.0f;

        SetShaderValue(shdrOutline, outlineSizeLoc, &outlineSize, SHADER_UNIFORM_FLOAT);
        //----------------------------------------------------------------------------------

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

            ClearBackground(RAYWHITE);

            BeginShaderMode(shdrOutline);

                DrawTexture(texture, GetScreenWidth()/2 - texture.width/2, -30, WHITE);

            EndShaderMode();

            DrawText("Shader-based\ntexture\noutline", 10, 10, 20, GRAY);
            DrawText("Scroll mouse wheel to\nchange outline size", 10, 72, 20, GRAY);
            DrawText(TextFormat("Outline size: %i px", (int)outlineSize), 10, 120, 20, MAROON);

            DrawFPS(710, 10);

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

    // De-Initialization
    //--------------------------------------------------------------------------------------
    UnloadTexture(texture);
    UnloadShader(shdrOutline);

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

    return 0;
}

From raylib 6.2. The original on GitHub.