← ziglang.inraylib-zigGitHub

hybrid rendering

★★★★by Buğra Alptekin Sarı (@BugraAlptekinSari)

There is no browser build of this example yet.

Is it the same as C?

//! raylib [shaders] example - hybrid rendering
//!
//! Zig-API translation of examples/shaders/shaders_hybrid_rendering.c (raylib 6.2).
//! Example contributed by Buğra Alptekin Sarı (@BugraAlptekinSari) and reviewed by Ramon Santamaria (@raysan5)
//! Example licensed under an unmodified zlib/libpng license.
//! Copyright (c) 2022-2025 Buğra Alptekin Sarı (@BugraAlptekinSari)

const rl = @import("raylib");

const glsl_version = 330; // Desktop GLSL version

/// Ray march shader uniform locations
const RayLocs = struct {
    cam_pos: i32,
    cam_dir: i32,
    screen_center: i32,
};

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

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

    // This Shader calculates pixel depth and color using raymarch
    const shdr_raymarch = try rl.loadShader(null, rl.textFormat("resources/shaders/glsl{d}/hybrid_raymarch.fs", .{glsl_version}));
    defer rl.unloadShader(shdr_raymarch);

    // This Shader is a standard rasterization fragment shader with the addition of depth writing
    // You are required to write depth for all shaders if one shader does it
    const shdr_raster = try rl.loadShader(null, rl.textFormat("resources/shaders/glsl{d}/hybrid_raster.fs", .{glsl_version}));
    defer rl.unloadShader(shdr_raster);

    // Fill the struct with shader locs
    const march_locs: RayLocs = .{
        .cam_pos = rl.getShaderLocation(shdr_raymarch, "camPos"),
        .cam_dir = rl.getShaderLocation(shdr_raymarch, "camDir"),
        .screen_center = rl.getShaderLocation(shdr_raymarch, "screenCenter"),
    };

    // Transfer screenCenter position to shader. Which is used to calculate ray direction
    const screen_center: rl.Vector2 = .{ .x = screen_width / 2.0, .y = screen_height / 2.0 };
    rl.setShaderValue(shdr_raymarch, march_locs.screen_center, screen_center);

    // Use Customized function to create writable depth texture buffer
    const target = try loadRenderTextureDepthTex(screen_width, screen_height);
    defer unloadRenderTextureDepthTex(target);

    // Define the camera to look into our 3d world
    var camera: rl.Camera = .{
        .position = .{ .x = 0.5, .y = 1.0, .z = 1.5 }, // Camera position
        .target = .{ .x = 0.0, .y = 0.5, .z = 0.0 }, // Camera looking at point
        .up = .{ .x = 0.0, .y = 1.0, .z = 0.0 }, // Camera up vector (rotation towards target)
        .fovy = 45.0, // Camera field-of-view Y
        .projection = .perspective, // Camera projection type
    };

    // Camera FOV is pre-calculated in the camera distance
    const cam_dist = 1.0 / @tan(camera.fovy * 0.5 * rl.deg2rad);

    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
        rl.updateCamera(&camera, .orbital);

        // Update Camera Postion in the ray march shader
        rl.setShaderValue(shdr_raymarch, march_locs.cam_pos, camera.position);

        // Update Camera Looking Vector. Vector length determines FOV
        const cam_dir = rl.math.vector3Scale(rl.math.vector3Normalize(rl.math.vector3Subtract(camera.target, camera.position)), cam_dist);
        rl.setShaderValue(shdr_raymarch, march_locs.cam_dir, cam_dir);

        // Draw
        // Draw into our custom render texture (framebuffer)
        {
            rl.beginTextureMode(target);
            defer rl.endTextureMode();

            rl.clearBackground(.white);

            // Raymarch Scene
            rl.gl.enableDepthTest(); // Manually enable Depth Test to handle multiple rendering methods
            {
                rl.beginShaderMode(shdr_raymarch);
                defer rl.endShaderMode();

                rl.drawRectangleRec(.{ .x = 0, .y = 0, .width = screen_width, .height = screen_height }, .white);
            }

            // Rasterize Scene
            rl.beginMode3D(camera);
            defer rl.endMode3D();

            rl.beginShaderMode(shdr_raster);
            defer rl.endShaderMode();

            rl.drawCubeWiresV(.{ .x = 0.0, .y = 0.5, .z = 1.0 }, .{ .x = 1.0, .y = 1.0, .z = 1.0 }, .red);
            rl.drawCubeV(.{ .x = 0.0, .y = 0.5, .z = 1.0 }, .{ .x = 1.0, .y = 1.0, .z = 1.0 }, .purple);
            rl.drawCubeWiresV(.{ .x = 0.0, .y = 0.5, .z = -1.0 }, .{ .x = 1.0, .y = 1.0, .z = 1.0 }, .dark_green);
            rl.drawCubeV(.{ .x = 0.0, .y = 0.5, .z = -1.0 }, .{ .x = 1.0, .y = 1.0, .z = 1.0 }, .yellow);
            rl.drawGrid(10, 1.0);
        }

        // Draw into screen our custom render texture
        rl.beginDrawing();
        defer rl.endDrawing();

        rl.clearBackground(.ray_white);

        rl.drawTextureRec(target.texture, .{ .x = 0, .y = 0, .width = screen_width, .height = -screen_height }, .{ .x = 0, .y = 0 }, .white);

        rl.drawFPS(10, 10);
    }
}

/// Load custom render texture, create a writable depth texture buffer
fn loadRenderTextureDepthTex(width: i32, height: i32) error{LoadFailed}!rl.RenderTexture2D {
    const id = rl.gl.loadFramebuffer(); // Load an empty framebuffer
    if (id == 0) {
        rl.traceLog(.warning, "FBO: Framebuffer object can not be created", .{});
        return error.LoadFailed;
    }

    rl.gl.enableFramebuffer(id);
    defer rl.gl.disableFramebuffer();

    const target: rl.RenderTexture2D = .{
        .id = id,
        // Create color texture (default to RGBA)
        .texture = .{
            .id = rl.gl.loadTexture(null, width, height, rl.gl.pixelformat_uncompressed_r8g8b8a8, 1),
            .width = width,
            .height = height,
            .mipmaps = 1,
            .format = .uncompressed_r8g8b8a8,
        },
        // Create depth texture buffer (instead of raylib default renderbuffer)
        .depth = .{
            .id = rl.gl.loadTextureDepth(width, height, false),
            .width = width,
            .height = height,
            .mipmaps = 1,
            .format = @fromBackingInt(@intCast(19)), // DEPTH_COMPONENT_24BIT?
        },
    };

    // Attach color texture and depth texture to FBO
    rl.gl.framebufferAttach(target.id, target.texture.id, rl.gl.attachment_color_channel0, rl.gl.attachment_texture2d, 0);
    rl.gl.framebufferAttach(target.id, target.depth.id, rl.gl.attachment_depth, rl.gl.attachment_texture2d, 0);

    // Check if fbo is complete with attachments (valid)
    if (rl.gl.framebufferComplete(target.id)) rl.traceLog(.info, "FBO: [ID {d}] Framebuffer object created successfully", .{target.id});

    return target;
}

/// Unload render texture from GPU memory (VRAM)
fn unloadRenderTextureDepthTex(target: rl.RenderTexture2D) void {
    // Color texture attached to FBO is deleted
    rl.gl.unloadTexture(target.texture.id);
    rl.gl.unloadTexture(target.depth.id);

    // NOTE: Depth texture is automatically
    // queried and deleted before deleting framebuffer
    rl.gl.unloadFramebuffer(target.id);
}
/*******************************************************************************************
*
*   raylib [shaders] example - hybrid rendering
*
*   Example complexity rating: [★★★★] 4/4
*
*   Example originally created with raylib 4.2, last time updated with raylib 4.2
*
*   Example contributed by Buğra Alptekin Sarı (@BugraAlptekinSari) 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) 2022-2025 Buğra Alptekin Sarı (@BugraAlptekinSari)
*
********************************************************************************************/

#include "raylib.h"

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

#include <math.h>   // Required for: tanf()

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

//----------------------------------------------------------------------------------
// Types and Structures Definition
//----------------------------------------------------------------------------------
typedef struct {
    unsigned int camPos;
    unsigned int camDir;
    unsigned int screenCenter;
} RayLocs;

//------------------------------------------------------------------------------------
// Module Functions Declaration
//------------------------------------------------------------------------------------
// Load custom render texture, create a writable depth texture buffer
static RenderTexture2D LoadRenderTextureDepthTex(int width, int height);
// Unload render texture from GPU memory (VRAM)
static void UnloadRenderTextureDepthTex(RenderTexture2D target);

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

    InitWindow(screenWidth, screenHeight, "raylib [shaders] example - hybrid rendering");

    // This Shader calculates pixel depth and color using raymarch
    Shader shdrRaymarch = LoadShader(0, TextFormat("resources/shaders/glsl%i/hybrid_raymarch.fs", GLSL_VERSION));

    // This Shader is a standard rasterization fragment shader with the addition of depth writing
    // You are required to write depth for all shaders if one shader does it
    Shader shdrRaster = LoadShader(0, TextFormat("resources/shaders/glsl%i/hybrid_raster.fs", GLSL_VERSION));

    // Declare Struct used to store camera locs
    RayLocs marchLocs = { 0 };

    // Fill the struct with shader locs
    marchLocs.camPos = GetShaderLocation(shdrRaymarch, "camPos");
    marchLocs.camDir = GetShaderLocation(shdrRaymarch, "camDir");
    marchLocs.screenCenter = GetShaderLocation(shdrRaymarch, "screenCenter");

    // Transfer screenCenter position to shader. Which is used to calculate ray direction
    Vector2 screenCenter = {.x = screenWidth/2.0f, .y = screenHeight/2.0f};
    SetShaderValue(shdrRaymarch, marchLocs.screenCenter , &screenCenter , SHADER_UNIFORM_VEC2);

    // Use Customized function to create writable depth texture buffer
    RenderTexture2D target = LoadRenderTextureDepthTex(screenWidth, screenHeight);

    // Define the camera to look into our 3d world
    Camera camera = {
        .position = (Vector3){ 0.5f, 1.0f, 1.5f },    // Camera position
        .target = (Vector3){ 0.0f, 0.5f, 0.0f },      // Camera looking at point
        .up = (Vector3){ 0.0f, 1.0f, 0.0f },          // Camera up vector (rotation towards target)
        .fovy = 45.0f,                                // Camera field-of-view Y
        .projection = CAMERA_PERSPECTIVE              // Camera projection type
    };

    // Camera FOV is pre-calculated in the camera distance
    float camDist = 1.0f/(tanf(camera.fovy*0.5f*DEG2RAD));

    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
        //----------------------------------------------------------------------------------
        UpdateCamera(&camera, CAMERA_ORBITAL);

        // Update Camera Postion in the ray march shader
        SetShaderValue(shdrRaymarch, marchLocs.camPos, &(camera.position), RL_SHADER_UNIFORM_VEC3);

        // Update Camera Looking Vector. Vector length determines FOV
        Vector3 camDir = Vector3Scale( Vector3Normalize( Vector3Subtract(camera.target, camera.position)) , camDist);
        SetShaderValue(shdrRaymarch, marchLocs.camDir, &(camDir), RL_SHADER_UNIFORM_VEC3);
        //----------------------------------------------------------------------------------

        // Draw
        //----------------------------------------------------------------------------------
        // Draw into our custom render texture (framebuffer)
        BeginTextureMode(target);
            ClearBackground(WHITE);

            // Raymarch Scene
            rlEnableDepthTest(); // Manually enable Depth Test to handle multiple rendering methods
            BeginShaderMode(shdrRaymarch);
                DrawRectangleRec((Rectangle){ 0,0, (float)screenWidth, (float)screenHeight },WHITE);
            EndShaderMode();

            // Rasterize Scene
            BeginMode3D(camera);
                BeginShaderMode(shdrRaster);
                    DrawCubeWiresV((Vector3){ 0.0f, 0.5f, 1.0f }, (Vector3){ 1.0f, 1.0f, 1.0f }, RED);
                    DrawCubeV((Vector3){ 0.0f, 0.5f, 1.0f }, (Vector3){ 1.0f, 1.0f, 1.0f }, PURPLE);
                    DrawCubeWiresV((Vector3){ 0.0f, 0.5f, -1.0f }, (Vector3){ 1.0f, 1.0f, 1.0f }, DARKGREEN);
                    DrawCubeV((Vector3) { 0.0f, 0.5f, -1.0f }, (Vector3){ 1.0f, 1.0f, 1.0f }, YELLOW);
                    DrawGrid(10, 1.0f);
                EndShaderMode();
            EndMode3D();
        EndTextureMode();

        // Draw into screen our custom render texture
        BeginDrawing();
            ClearBackground(RAYWHITE);

            DrawTextureRec(target.texture, (Rectangle) { 0, 0, (float)screenWidth, (float)-screenHeight }, (Vector2) { 0, 0 }, WHITE);

            DrawFPS(10, 10);
        EndDrawing();
        //----------------------------------------------------------------------------------
    }

    // De-Initialization
    //--------------------------------------------------------------------------------------
    UnloadRenderTextureDepthTex(target);
    UnloadShader(shdrRaymarch);
    UnloadShader(shdrRaster);

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

    return 0;
}

//------------------------------------------------------------------------------------
// Module Functions Definition
//------------------------------------------------------------------------------------
// Load custom render texture, create a writable depth texture buffer
static RenderTexture2D LoadRenderTextureDepthTex(int width, int height)
{
    RenderTexture2D target = { 0 };

    target.id = rlLoadFramebuffer(); // Load an empty framebuffer

    if (target.id > 0)
    {
        rlEnableFramebuffer(target.id);

        // Create color texture (default to RGBA)
        target.texture.id = rlLoadTexture(0, width, height, PIXELFORMAT_UNCOMPRESSED_R8G8B8A8, 1);
        target.texture.width = width;
        target.texture.height = height;
        target.texture.format = PIXELFORMAT_UNCOMPRESSED_R8G8B8A8;
        target.texture.mipmaps = 1;

        // Create depth texture buffer (instead of raylib default renderbuffer)
        target.depth.id = rlLoadTextureDepth(width, height, false);
        target.depth.width = width;
        target.depth.height = height;
        target.depth.format = 19;       //DEPTH_COMPONENT_24BIT?
        target.depth.mipmaps = 1;

        // Attach color texture and depth texture to FBO
        rlFramebufferAttach(target.id, target.texture.id, RL_ATTACHMENT_COLOR_CHANNEL0, RL_ATTACHMENT_TEXTURE2D, 0);
        rlFramebufferAttach(target.id, target.depth.id, RL_ATTACHMENT_DEPTH, RL_ATTACHMENT_TEXTURE2D, 0);

        // Check if fbo is complete with attachments (valid)
        if (rlFramebufferComplete(target.id)) TRACELOG(LOG_INFO, "FBO: [ID %i] Framebuffer object created successfully", target.id);

        rlDisableFramebuffer();
    }
    else TRACELOG(LOG_WARNING, "FBO: Framebuffer object can not be created");

    return target;
}

// Unload render texture from GPU memory (VRAM)
static void UnloadRenderTextureDepthTex(RenderTexture2D target)
{
    if (target.id > 0)
    {
        // Color texture attached to FBO is deleted
        rlUnloadTexture(target.texture.id);
        rlUnloadTexture(target.depth.id);

        // NOTE: Depth texture is automatically
        // queried and deleted before deleting framebuffer
        rlUnloadFramebuffer(target.id);
    }
}

From raylib 6.2. The original on GitHub.