fog rendering
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 - fog rendering
//!
//! Zig-API translation of examples/shaders/shaders_fog_rendering.c (raylib 6.2).
//! Example contributed by Chris Camacho (@chriscamacho) and reviewed by Ramon Santamaria (@raysan5)
//! Example licensed under an unmodified zlib/libpng license.
//! Copyright (c) 2019-2025 Chris Camacho (@chriscamacho) and Ramon Santamaria (@raysan5)
//!
//! NOTE: Shaders used in this example are #version 330 (OpenGL 3.3).
const std = @import("std");
const rl = @import("raylib");
const rlights = @import("rlights");
const glsl_version = 330;
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 - fog rendering");
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 = 2.0, .z = 6.0 }, // 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
};
// Load models and texture
var model_a = try rl.loadModelFromMesh(rl.genMeshTorus(0.4, 1.0, 16, 32));
defer rl.unloadModel(model_a);
const model_b = try rl.loadModelFromMesh(rl.genMeshCube(1.0, 1.0, 1.0));
defer rl.unloadModel(model_b);
const model_c = try rl.loadModelFromMesh(rl.genMeshSphere(0.5, 32, 32));
defer rl.unloadModel(model_c);
const texture = try rl.loadTexture("resources/texel_checker.png");
defer rl.unloadTexture(texture);
// Load shader and set up some uniforms
const shader = try rl.loadShader(
std.fmt.comptimePrint("resources/shaders/glsl{d}/lighting.vs", .{glsl_version}),
std.fmt.comptimePrint("resources/shaders/glsl{d}/fog.fs", .{glsl_version}),
);
defer rl.unloadShader(shader);
shader.loc(.matrix_model).* = rl.getShaderLocation(shader, "matModel");
shader.loc(.vector_view).* = rl.getShaderLocation(shader, "viewPos");
// Ambient light level
const ambient: rl.Vector4 = .{ .x = 0.2, .y = 0.2, .z = 0.2, .w = 1.0 };
const ambient_loc = rl.getShaderLocation(shader, "ambient");
rl.setShaderValue(shader, ambient_loc, ambient);
const fog_color = rl.colorNormalize(.gray);
const fog_color_loc = rl.getShaderLocation(shader, "fogColor");
rl.setShaderValue(shader, fog_color_loc, fog_color);
var fog_density: f32 = 0.15;
const fog_density_loc = rl.getShaderLocation(shader, "fogDensity");
rl.setShaderValue(shader, fog_density_loc, fog_density);
// Assign texture to default model material
// NOTE: All models share the same shader
for ([_]rl.Model{ model_a, model_b, model_c }) |model| {
const material = &model.materials.?[0];
material.map(.diffuse).texture = texture;
material.shader = shader;
}
// Using just 1 point lights
_ = rlights.createLight(.point, .{ .x = 0, .y = 2, .z = 6 }, rl.math.vector3Zero(), .white, shader);
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.isKeyDown(.up)) {
fog_density += 0.001;
if (fog_density > 1.0) fog_density = 1.0;
}
if (rl.isKeyDown(.down)) {
fog_density -= 0.001;
if (fog_density < 0.0) fog_density = 0.0;
}
rl.setShaderValue(shader, fog_density_loc, fog_density);
// Rotate the torus
model_a.transform = rl.math.matrixMultiply(model_a.transform, rl.math.matrixRotateX(-0.025));
model_a.transform = rl.math.matrixMultiply(model_a.transform, rl.math.matrixRotateZ(0.012));
// Update the light shader with the camera view position
rl.setShaderValue(shader, shader.loc(.vector_view).*, camera.position);
// Draw
rl.beginDrawing();
defer rl.endDrawing();
rl.clearBackground(.gray);
{
rl.beginMode3D(camera);
defer rl.endMode3D();
// Draw the three models
rl.drawModel(model_a, rl.math.vector3Zero(), 1.0, .white);
rl.drawModel(model_b, .{ .x = -2.6, .y = 0, .z = 0 }, 1.0, .white);
rl.drawModel(model_c, .{ .x = 2.6, .y = 0, .z = 0 }, 1.0, .white);
var i: i32 = -20;
while (i < 20) : (i += 2) rl.drawModel(model_a, .{ .x = @floatFromInt(i), .y = 0, .z = 2 }, 1.0, .white);
}
rl.drawText(rl.textFormat("Use KEY_UP/KEY_DOWN to change fog density [{d:.2}]", .{fog_density}), 10, 10, 20, .ray_white);
}
}/*******************************************************************************************
*
* raylib [shaders] example - fog rendering
*
* 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)
*
* Example originally created with raylib 2.5, last time updated with raylib 3.7
*
* Example contributed by Chris Camacho (@chriscamacho) 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) 2019-2025 Chris Camacho (@chriscamacho) and Ramon Santamaria (@raysan5)
*
********************************************************************************************/
#include "raylib.h"
#include "raymath.h"
#define RLIGHTS_IMPLEMENTATION
#include "rlights.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;
SetConfigFlags(FLAG_MSAA_4X_HINT); // Enable Multi Sampling Anti Aliasing 4x (if available)
InitWindow(screenWidth, screenHeight, "raylib [shaders] example - fog rendering");
// Define the camera to look into our 3d world
Camera camera = { 0 };
camera.position = (Vector3){ 2.0f, 2.0f, 6.0f }; // Camera position
camera.target = (Vector3){ 0.0f, 0.5f, 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
// Load models and texture
Model modelA = LoadModelFromMesh(GenMeshTorus(0.4f, 1.0f, 16, 32));
Model modelB = LoadModelFromMesh(GenMeshCube(1.0f, 1.0f, 1.0f));
Model modelC = LoadModelFromMesh(GenMeshSphere(0.5f, 32, 32));
Texture texture = LoadTexture("resources/texel_checker.png");
// Assign texture to default model material
modelA.materials[0].maps[MATERIAL_MAP_DIFFUSE].texture = texture;
modelB.materials[0].maps[MATERIAL_MAP_DIFFUSE].texture = texture;
modelC.materials[0].maps[MATERIAL_MAP_DIFFUSE].texture = texture;
// Load shader and set up some uniforms
Shader shader = LoadShader(TextFormat("resources/shaders/glsl%i/lighting.vs", GLSL_VERSION),
TextFormat("resources/shaders/glsl%i/fog.fs", GLSL_VERSION));
shader.locs[SHADER_LOC_MATRIX_MODEL] = GetShaderLocation(shader, "matModel");
shader.locs[SHADER_LOC_VECTOR_VIEW] = GetShaderLocation(shader, "viewPos");
// Ambient light level
Vector4 ambient = (Vector4){ 0.2f, 0.2f, 0.2f, 1.0f };
int ambientLoc = GetShaderLocation(shader, "ambient");
SetShaderValue(shader, ambientLoc, &ambient, SHADER_UNIFORM_VEC4);
Vector4 fogColor = ColorNormalize(GRAY);
int fogColorLoc = GetShaderLocation(shader, "fogColor");
SetShaderValue(shader, fogColorLoc, &fogColor, SHADER_UNIFORM_VEC4);
float fogDensity = 0.15f;
int fogDensityLoc = GetShaderLocation(shader, "fogDensity");
SetShaderValue(shader, fogDensityLoc, &fogDensity, SHADER_UNIFORM_FLOAT);
// NOTE: All models share the same shader
modelA.materials[0].shader = shader;
modelB.materials[0].shader = shader;
modelC.materials[0].shader = shader;
// Using just 1 point lights
CreateLight(LIGHT_POINT, (Vector3){ 0, 2, 6 }, Vector3Zero(), WHITE, shader);
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 (IsKeyDown(KEY_UP))
{
fogDensity += 0.001f;
if (fogDensity > 1.0f) fogDensity = 1.0f;
}
if (IsKeyDown(KEY_DOWN))
{
fogDensity -= 0.001f;
if (fogDensity < 0.0f) fogDensity = 0.0f;
}
SetShaderValue(shader, fogDensityLoc, &fogDensity, SHADER_UNIFORM_FLOAT);
// Rotate the torus
modelA.transform = MatrixMultiply(modelA.transform, MatrixRotateX(-0.025f));
modelA.transform = MatrixMultiply(modelA.transform, MatrixRotateZ(0.012f));
// Update the light shader with the camera view position
SetShaderValue(shader, shader.locs[SHADER_LOC_VECTOR_VIEW], &camera.position.x, SHADER_UNIFORM_VEC3);
//----------------------------------------------------------------------------------
// Draw
//----------------------------------------------------------------------------------
BeginDrawing();
ClearBackground(GRAY);
BeginMode3D(camera);
// Draw the three models
DrawModel(modelA, Vector3Zero(), 1.0f, WHITE);
DrawModel(modelB, (Vector3){ -2.6f, 0, 0 }, 1.0f, WHITE);
DrawModel(modelC, (Vector3){ 2.6f, 0, 0 }, 1.0f, WHITE);
for (int i = -20; i < 20; i += 2) DrawModel(modelA,(Vector3){ (float)i, 0, 2 }, 1.0f, WHITE);
EndMode3D();
DrawText(TextFormat("Use KEY_UP/KEY_DOWN to change fog density [%.2f]", fogDensity), 10, 10, 20, RAYWHITE);
EndDrawing();
//----------------------------------------------------------------------------------
}
// De-Initialization
//--------------------------------------------------------------------------------------
UnloadModel(modelA); // Unload the model A
UnloadModel(modelB); // Unload the model B
UnloadModel(modelC); // Unload the model C
UnloadTexture(texture); // Unload the texture
UnloadShader(shader); // Unload shader
CloseWindow(); // Close window and OpenGL context
//--------------------------------------------------------------------------------------
return 0;
}From raylib 6.2. The original on GitHub.