postprocessing
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.
//! raylib [shaders] example - postprocessing
//!
//! Zig-API translation of examples/shaders/shaders_postprocessing.c (raylib 6.2).
//! Example licensed under an unmodified zlib/libpng license.
//! Copyright (c) 2015-2025 Ramon Santamaria (@raysan5)
//!
//! NOTE: Shaders used in this example are #version 330 (OpenGL 3.3).
const std = @import("std");
const rl = @import("raylib");
const glsl_version = 330;
/// A postprocessing effect: its display name and fragment shader file.
const Postpro = struct {
name: [:0]const u8,
file: [:0]const u8,
};
fn postpro(comptime name: [:0]const u8, comptime file: []const u8) Postpro {
return .{ .name = name, .file = std.fmt.comptimePrint("resources/shaders/glsl{d}/{s}.fs", .{ glsl_version, file }) };
}
// NOTE: All postpro shader use the base vertex shader (DEFAULT_VERTEX_SHADER)
const postpro_shaders = [_]Postpro{
postpro("GRAYSCALE", "grayscale"),
postpro("POSTERIZATION", "posterization"),
postpro("DREAM_VISION", "dream_vision"),
postpro("PIXELIZER", "pixelizer"),
postpro("CROSS_HATCHING", "cross_hatching"),
postpro("CROSS_STITCHING", "cross_stitching"),
postpro("PREDATOR_VIEW", "predator"),
postpro("SCANLINES", "scanlines"),
postpro("FISHEYE", "fisheye"),
postpro("SOBEL", "sobel"),
postpro("BLOOM", "bloom"),
postpro("BLUR", "blur"),
//postpro("FXAA", "fxaa"),
};
pub fn main() !void {
// Initialization
const screen_width = 800;
const screen_height = 450;
rl.setConfigFlags(.{ .msaa_4x_hint = true }); // Enable Multi Sampling Anti Aliasing 4x (if available)
rl.initWindow(screen_width, screen_height, "raylib [shaders] example - postprocessing");
defer rl.closeWindow(); // Close window and OpenGL context
// Define the camera to look into our 3d world
var camera: rl.Camera = .{
.position = .{ .x = 2.0, .y = 3.0, .z = 2.0 }, // Camera position
.target = .{ .x = 0.0, .y = 1.0, .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
};
const model = try rl.loadModel("resources/models/church.obj"); // Load OBJ model
defer rl.unloadModel(model);
const texture = try rl.loadTexture("resources/models/church_diffuse.png"); // Load model texture (diffuse map)
defer rl.unloadTexture(texture);
model.materials.?[0].map(.diffuse).texture = texture; // Set model diffuse texture
const position: rl.Vector3 = .{ .x = 0.0, .y = 0.0, .z = 0.0 }; // Set model position
// Load all postpro shaders
// NOTE: Defining null for vertex shader forces usage of internal default vertex shader
var shaders: [postpro_shaders.len]rl.Shader = undefined;
for (&shaders, postpro_shaders) |*shader, fx| shader.* = try rl.loadShader(null, fx.file);
defer for (shaders) |shader| rl.unloadShader(shader);
var current_shader: usize = 0;
// Create a RenderTexture2D to be used for render to texture
const target = try rl.loadRenderTexture(screen_width, screen_height);
defer rl.unloadRenderTexture(target);
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);
if (rl.isKeyPressed(.right)) {
current_shader = (current_shader + 1) % shaders.len;
} else if (rl.isKeyPressed(.left)) {
current_shader = (current_shader + shaders.len - 1) % shaders.len;
}
// Draw
{
rl.beginTextureMode(target); // Enable drawing to texture
defer rl.endTextureMode(); // End drawing to texture (now we have a texture available for next passes)
rl.clearBackground(.ray_white); // Clear texture background
rl.beginMode3D(camera); // Begin 3d mode drawing
defer rl.endMode3D(); // End 3d mode drawing, returns to orthographic 2d mode
rl.drawModel(model, position, 0.1, .white); // Draw 3d model with texture
rl.drawGrid(10, 1.0); // Draw a grid
}
rl.beginDrawing();
defer rl.endDrawing();
rl.clearBackground(.ray_white); // Clear screen background
// Render generated texture using selected postprocessing shader
{
rl.beginShaderMode(shaders[current_shader]);
defer rl.endShaderMode();
// NOTE: Render texture must be y-flipped due to default OpenGL coordinates (left-bottom)
const source: rl.Rectangle = .{
.x = 0,
.y = 0,
.width = @floatFromInt(target.texture.width),
.height = @floatFromInt(-target.texture.height),
};
rl.drawTextureRec(target.texture, source, .{ .x = 0, .y = 0 }, .white);
}
// Draw 2d shapes and text over drawn texture
rl.drawRectangle(0, 9, 580, 30, rl.fade(.light_gray, 0.7));
rl.drawText("(c) Church 3D model by Alberto Cano", screen_width - 200, screen_height - 20, 10, .gray);
rl.drawText("CURRENT POSTPRO SHADER:", 10, 15, 20, .black);
rl.drawText(postpro_shaders[current_shader].name, 330, 15, 20, .red);
rl.drawText("< >", 540, 10, 30, .dark_blue);
rl.drawFPS(700, 15);
}
}/*******************************************************************************************
*
* raylib [shaders] example - postprocessing
*
* 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), to test this example
* on OpenGL ES 2.0 platforms (Android, Raspberry Pi, HTML5), use #version 100 shaders
* raylib comes with shaders ready for both versions, check raylib/shaders install folder
*
* Example originally created with raylib 1.3, last time updated with raylib 4.0
*
* 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 Ramon Santamaria (@raysan5)
*
********************************************************************************************/
#include "raylib.h"
#if defined(PLATFORM_DESKTOP)
#define GLSL_VERSION 330
#else // PLATFORM_ANDROID, PLATFORM_WEB
#define GLSL_VERSION 100
#endif
#define MAX_POSTPRO_SHADERS 12
typedef enum {
FX_GRAYSCALE = 0,
FX_POSTERIZATION,
FX_DREAM_VISION,
FX_PIXELIZER,
FX_CROSS_HATCHING,
FX_CROSS_STITCHING,
FX_PREDATOR_VIEW,
FX_SCANLINES,
FX_FISHEYE,
FX_SOBEL,
FX_BLOOM,
FX_BLUR,
//FX_FXAA
} PostproShader;
//------------------------------------------------------------------------------------
// Global Variables Definition
//------------------------------------------------------------------------------------
static const char *postproShaderText[] = {
"GRAYSCALE",
"POSTERIZATION",
"DREAM_VISION",
"PIXELIZER",
"CROSS_HATCHING",
"CROSS_STITCHING",
"PREDATOR_VIEW",
"SCANLINES",
"FISHEYE",
"SOBEL",
"BLOOM",
"BLUR",
//"FXAA"
};
//------------------------------------------------------------------------------------
// Program main entry point
//------------------------------------------------------------------------------------
int main(void)
{
// Initialization
//--------------------------------------------------------------------------------------
const int screenWidth = 800;
const int screenHeight = 450;
SetConfigFlags(FLAG_MSAA_4X_HINT); // Enable Multi Sampling Anti Aliasing 4x (if available)
InitWindow(screenWidth, screenHeight, "raylib [shaders] example - postprocessing");
// Define the camera to look into our 3d world
Camera camera = { 0 };
camera.position = (Vector3){ 2.0f, 3.0f, 2.0f }; // Camera position
camera.target = (Vector3){ 0.0f, 1.0f, 0.0f }; // Camera looking at point
camera.up = (Vector3){ 0.0f, 1.0f, 0.0f }; // Camera up vector (rotation towards target)
camera.fovy = 45.0f; // Camera field-of-view Y
camera.projection = CAMERA_PERSPECTIVE; // Camera projection type
Model model = LoadModel("resources/models/church.obj"); // Load OBJ model
Texture2D texture = LoadTexture("resources/models/church_diffuse.png"); // Load model texture (diffuse map)
model.materials[0].maps[MATERIAL_MAP_DIFFUSE].texture = texture; // Set model diffuse texture
Vector3 position = { 0.0f, 0.0f, 0.0f }; // Set model position
// Load all postpro shaders
// NOTE 1: All postpro shader use the base vertex shader (DEFAULT_VERTEX_SHADER)
// NOTE 2: We load the correct shader depending on GLSL version
Shader shaders[MAX_POSTPRO_SHADERS] = { 0 };
// NOTE: Defining 0 (NULL) for vertex shader forces usage of internal default vertex shader
shaders[FX_GRAYSCALE] = LoadShader(0, TextFormat("resources/shaders/glsl%i/grayscale.fs", GLSL_VERSION));
shaders[FX_POSTERIZATION] = LoadShader(0, TextFormat("resources/shaders/glsl%i/posterization.fs", GLSL_VERSION));
shaders[FX_DREAM_VISION] = LoadShader(0, TextFormat("resources/shaders/glsl%i/dream_vision.fs", GLSL_VERSION));
shaders[FX_PIXELIZER] = LoadShader(0, TextFormat("resources/shaders/glsl%i/pixelizer.fs", GLSL_VERSION));
shaders[FX_CROSS_HATCHING] = LoadShader(0, TextFormat("resources/shaders/glsl%i/cross_hatching.fs", GLSL_VERSION));
shaders[FX_CROSS_STITCHING] = LoadShader(0, TextFormat("resources/shaders/glsl%i/cross_stitching.fs", GLSL_VERSION));
shaders[FX_PREDATOR_VIEW] = LoadShader(0, TextFormat("resources/shaders/glsl%i/predator.fs", GLSL_VERSION));
shaders[FX_SCANLINES] = LoadShader(0, TextFormat("resources/shaders/glsl%i/scanlines.fs", GLSL_VERSION));
shaders[FX_FISHEYE] = LoadShader(0, TextFormat("resources/shaders/glsl%i/fisheye.fs", GLSL_VERSION));
shaders[FX_SOBEL] = LoadShader(0, TextFormat("resources/shaders/glsl%i/sobel.fs", GLSL_VERSION));
shaders[FX_BLOOM] = LoadShader(0, TextFormat("resources/shaders/glsl%i/bloom.fs", GLSL_VERSION));
shaders[FX_BLUR] = LoadShader(0, TextFormat("resources/shaders/glsl%i/blur.fs", GLSL_VERSION));
int currentShader = FX_GRAYSCALE;
// Create a RenderTexture2D to be used for render to texture
RenderTexture2D target = LoadRenderTexture(screenWidth, screenHeight);
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);
if (IsKeyPressed(KEY_RIGHT)) currentShader++;
else if (IsKeyPressed(KEY_LEFT)) currentShader--;
if (currentShader >= MAX_POSTPRO_SHADERS) currentShader = 0;
else if (currentShader < 0) currentShader = MAX_POSTPRO_SHADERS - 1;
//----------------------------------------------------------------------------------
// Draw
//----------------------------------------------------------------------------------
BeginTextureMode(target); // Enable drawing to texture
ClearBackground(RAYWHITE); // Clear texture background
BeginMode3D(camera); // Begin 3d mode drawing
DrawModel(model, position, 0.1f, WHITE); // Draw 3d model with texture
DrawGrid(10, 1.0f); // Draw a grid
EndMode3D(); // End 3d mode drawing, returns to orthographic 2d mode
EndTextureMode(); // End drawing to texture (now we have a texture available for next passes)
BeginDrawing();
ClearBackground(RAYWHITE); // Clear screen background
// Render generated texture using selected postprocessing shader
BeginShaderMode(shaders[currentShader]);
// NOTE: Render texture must be y-flipped due to default OpenGL coordinates (left-bottom)
DrawTextureRec(target.texture, (Rectangle){ 0, 0, (float)target.texture.width, (float)-target.texture.height }, (Vector2){ 0, 0 }, WHITE);
EndShaderMode();
// Draw 2d shapes and text over drawn texture
DrawRectangle(0, 9, 580, 30, Fade(LIGHTGRAY, 0.7f));
DrawText("(c) Church 3D model by Alberto Cano", screenWidth - 200, screenHeight - 20, 10, GRAY);
DrawText("CURRENT POSTPRO SHADER:", 10, 15, 20, BLACK);
DrawText(postproShaderText[currentShader], 330, 15, 20, RED);
DrawText("< >", 540, 10, 30, DARKBLUE);
DrawFPS(700, 15);
EndDrawing();
//----------------------------------------------------------------------------------
}
// De-Initialization
//--------------------------------------------------------------------------------------
// Unload all postpro shaders
for (int i = 0; i < MAX_POSTPRO_SHADERS; i++) UnloadShader(shaders[i]);
UnloadTexture(texture); // Unload texture
UnloadModel(model); // Unload model
UnloadRenderTexture(target); // Unload render texture
CloseWindow(); // Close window and OpenGL context
//--------------------------------------------------------------------------------------
return 0;
}From raylib 6.2. The original on GitHub.