skybox 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 [models] example - skybox rendering
//!
//! Zig-API translation of examples/models/models_skybox_rendering.c (raylib 6.2).
//! Example licensed under an unmodified zlib/libpng license.
//! Copyright (c) 2017-2025 Ramon Santamaria (@raysan5)
const std = @import("std");
const rl = @import("raylib");
const glsl_version = 330; // Desktop GLSL version
// Set this to true to use an HDR Texture
// NOTE: raylib must be built with HDR Support for this to work: SUPPORT_FILEFORMAT_HDR
const use_hdr = false;
pub fn main() !void {
// Initialization
const screen_width = 800;
const screen_height = 450;
rl.initWindow(screen_width, screen_height, "raylib [models] example - skybox rendering");
defer rl.closeWindow(); // Close window and OpenGL context
// Define the camera to look into our 3d world
var camera: rl.Camera = .{
.position = .{ .x = 1.0, .y = 1.0, .z = 1.0 }, // Camera position
.target = .{ .x = 4.0, .y = 1.0, .z = 4.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 skybox model
const cube = rl.genMeshCube(1.0, 1.0, 1.0);
const skybox = try rl.loadModelFromMesh(cube);
defer rl.unloadModel(skybox); // Unload skybox model
const material = &skybox.materials.?[0];
// Load skybox shader and set required locations
// NOTE: Some locations are automatically set at shader loading
material.shader = try rl.loadShader(
rl.textFormat("resources/shaders/glsl{d}/skybox.vs", .{glsl_version}),
rl.textFormat("resources/shaders/glsl{d}/skybox.fs", .{glsl_version}),
);
defer rl.unloadShader(material.shader);
const gamma: i32 = @intFromBool(use_hdr);
rl.setShaderValue(material.shader, rl.getShaderLocation(material.shader, "environmentMap"), @as(i32, @backingInt(rl.MaterialMapIndex.cubemap)));
rl.setShaderValue(material.shader, rl.getShaderLocation(material.shader, "doGamma"), gamma);
rl.setShaderValue(material.shader, rl.getShaderLocation(material.shader, "vflipped"), gamma);
// Load cubemap shader and setup required shader locations
const shdr_cubemap = try rl.loadShader(
rl.textFormat("resources/shaders/glsl{d}/cubemap.vs", .{glsl_version}),
rl.textFormat("resources/shaders/glsl{d}/cubemap.fs", .{glsl_version}),
);
defer rl.unloadShader(shdr_cubemap);
rl.setShaderValue(shdr_cubemap, rl.getShaderLocation(shdr_cubemap, "equirectangularMap"), 0);
var skybox_file_name = std.mem.zeroes([256:0]u8);
const cubemap = &material.map(.cubemap).texture;
if (use_hdr) {
_ = rl.textCopy(&skybox_file_name, "resources/dresden_square_2k.hdr");
cubemap.* = try loadSkyboxCubemap(shdr_cubemap, std.mem.sliceTo(&skybox_file_name, 0));
} else {
// TODO: WARNING: On PLATFORM_WEB it requires a big amount of memory to process input image
// and generate the required cubemap image to be passed to rlLoadTextureCubemap()
cubemap.* = try loadSkyboxCubemap(shdr_cubemap, "resources/skybox.png");
}
defer rl.unloadTexture(cubemap.*);
rl.disableCursor(); // Limit cursor to relative movement inside the window
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, .first_person);
// Load new cubemap texture on drag&drop
if (rl.isFileDropped()) {
const dropped_files = rl.loadDroppedFiles();
defer rl.unloadDroppedFiles(dropped_files); // Unload filepaths from memory
if (dropped_files.count == 1) { // Only support one file dropped
const path = std.mem.span(dropped_files.paths.?[0]);
if (rl.isFileExtension(path, ".png;.jpg;.hdr;.bmp;.tga")) {
// Unload current cubemap texture to load new one
rl.unloadTexture(cubemap.*);
cubemap.* = try loadSkyboxCubemap(shdr_cubemap, path);
_ = rl.textCopy(&skybox_file_name, path);
}
}
}
// Draw
rl.beginDrawing();
defer rl.endDrawing();
rl.clearBackground(.ray_white);
{
rl.beginMode3D(camera);
defer rl.endMode3D();
// We are inside the cube, we need to disable backface culling!
rl.gl.disableBackfaceCulling();
rl.gl.disableDepthMask();
rl.drawModel(skybox, .{ .x = 0, .y = 0, .z = 0 }, 1.0, .white);
rl.gl.enableBackfaceCulling();
rl.gl.enableDepthMask();
rl.drawGrid(10, 1.0);
}
const file_name = rl.getFileName(std.mem.sliceTo(&skybox_file_name, 0));
if (use_hdr) {
rl.drawText(rl.textFormat("Panorama image from hdrihaven.com: {s}", .{file_name}), 10, rl.getScreenHeight() - 20, 10, .black);
} else {
rl.drawText(rl.textFormat(": {s}", .{file_name}), 10, rl.getScreenHeight() - 20, 10, .black);
}
rl.drawFPS(10, 10);
}
}
/// Load the skybox cubemap from an image file: an HDR panorama is converted
/// with the cubemap shader (use_hdr), any other image is a cubemap layout.
fn loadSkyboxCubemap(shdr_cubemap: rl.Shader, file_name: [:0]const u8) !rl.TextureCubemap {
if (use_hdr) {
// Load HDR panorama (sphere) texture
const panorama = try rl.loadTexture(file_name);
defer rl.unloadTexture(panorama); // Texture not required anymore, cubemap already generated
// Generate cubemap (texture with 6 quads-cube-mapping) from panorama HDR texture
// NOTE 1: New texture is generated rendering to texture, shader calculates the sphere->cube coordinates mapping
// NOTE 2: It seems on some Android devices WebGL, fbo does not properly support a FLOAT-based attachment,
// despite texture can be successfully created.. so using PIXELFORMAT_UNCOMPRESSED_R8G8B8A8 instead of PIXELFORMAT_UNCOMPRESSED_R32G32B32A32
return genTextureCubemap(shdr_cubemap, panorama, 1024, .uncompressed_r8g8b8a8);
} else {
const image = try rl.loadImage(file_name);
defer rl.unloadImage(image);
return rl.loadTextureCubemap(image, .auto_detect);
}
}
/// Generate cubemap texture from HDR texture
fn genTextureCubemap(shader: rl.Shader, panorama: rl.Texture2D, size: i32, format: rl.PixelFormat) rl.TextureCubemap {
rl.gl.disableBackfaceCulling(); // Disable backface culling to render inside the cube
// STEP 1: Setup framebuffer
const rbo = rl.gl.loadTextureDepth(size, size, true);
const cubemap: rl.TextureCubemap = .{
.id = rl.gl.loadTextureCubemap(null, size, @backingInt(format), 1),
.width = size,
.height = size,
.mipmaps = 1,
.format = format,
};
const fbo = rl.gl.loadFramebuffer();
rl.gl.framebufferAttach(fbo, rbo, rl.gl.attachment_depth, rl.gl.attachment_renderbuffer, 0);
rl.gl.framebufferAttach(fbo, cubemap.id, rl.gl.attachment_color_channel0, rl.gl.attachment_cubemap_positive_x, 0);
// Check if framebuffer is complete with attachments (valid)
if (rl.gl.framebufferComplete(fbo)) rl.traceLog(.info, "FBO: [ID {d}] Framebuffer object created successfully", .{fbo});
// STEP 2: Draw to framebuffer
// NOTE: Shader is used to convert HDR equirectangular environment map to cubemap equivalent (6 faces)
rl.gl.enableShader(shader.id);
// Define projection matrix and send it to shader
const mat_fbo_projection = rl.math.matrixPerspective(90.0 * @as(f64, rl.deg2rad), 1.0, rl.gl.getCullDistanceNear(), rl.gl.getCullDistanceFar());
rl.gl.setUniformMatrix(shader.loc(.matrix_projection).*, mat_fbo_projection);
// Define view matrix for every side of the cubemap
const origin: rl.Vector3 = .{ .x = 0.0, .y = 0.0, .z = 0.0 };
const fbo_views = [6]rl.Matrix{
rl.math.matrixLookAt(origin, .{ .x = 1.0, .y = 0.0, .z = 0.0 }, .{ .x = 0.0, .y = -1.0, .z = 0.0 }),
rl.math.matrixLookAt(origin, .{ .x = -1.0, .y = 0.0, .z = 0.0 }, .{ .x = 0.0, .y = -1.0, .z = 0.0 }),
rl.math.matrixLookAt(origin, .{ .x = 0.0, .y = 1.0, .z = 0.0 }, .{ .x = 0.0, .y = 0.0, .z = 1.0 }),
rl.math.matrixLookAt(origin, .{ .x = 0.0, .y = -1.0, .z = 0.0 }, .{ .x = 0.0, .y = 0.0, .z = -1.0 }),
rl.math.matrixLookAt(origin, .{ .x = 0.0, .y = 0.0, .z = 1.0 }, .{ .x = 0.0, .y = -1.0, .z = 0.0 }),
rl.math.matrixLookAt(origin, .{ .x = 0.0, .y = 0.0, .z = -1.0 }, .{ .x = 0.0, .y = -1.0, .z = 0.0 }),
};
rl.gl.viewport(0, 0, size, size); // Set viewport to current fbo dimensions
// Activate and enable texture for drawing to cubemap faces
rl.gl.activeTextureSlot(0);
rl.gl.enableTexture(panorama.id);
for (fbo_views, 0..) |view, face| {
// Set the view matrix for the current cube face
rl.gl.setUniformMatrix(shader.loc(.matrix_view).*, view);
// Select the current cubemap face attachment for the fbo
// WARNING: This function by default enables->attach->disables fbo!!!
rl.gl.framebufferAttach(fbo, cubemap.id, rl.gl.attachment_color_channel0, rl.gl.attachment_cubemap_positive_x + @as(i32, @intCast(face)), 0);
rl.gl.enableFramebuffer(fbo);
// Load and draw a cube, it uses the current enabled texture
rl.gl.clearScreenBuffers();
rl.gl.loadDrawCube();
}
// STEP 3: Unload framebuffer and reset state
rl.gl.disableShader(); // Unbind shader
rl.gl.disableTexture(); // Unbind texture
rl.gl.disableFramebuffer(); // Unbind framebuffer
rl.gl.unloadFramebuffer(fbo); // Unload framebuffer (and automatically attached depth texture/renderbuffer)
// Reset viewport dimensions to default
rl.gl.viewport(0, 0, rl.gl.getFramebufferWidth(), rl.gl.getFramebufferHeight());
rl.gl.enableBackfaceCulling();
return cubemap;
}/*******************************************************************************************
*
* raylib [models] example - skybox rendering
*
* Example complexity rating: [★★☆☆] 2/4
*
* Example originally created with raylib 1.8, 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) 2017-2025 Ramon Santamaria (@raysan5)
*
********************************************************************************************/
#include "raylib.h"
#include "rlgl.h"
#include "raymath.h" // Required for: MatrixPerspective(), MatrixLookAt()
#if defined(PLATFORM_DESKTOP)
#define GLSL_VERSION 330
#else // PLATFORM_ANDROID, PLATFORM_WEB
#define GLSL_VERSION 100
#endif
//------------------------------------------------------------------------------------
// Module Functions Declaration
//------------------------------------------------------------------------------------
// Generate cubemap (6 faces) from equirectangular (panorama) texture
static TextureCubemap GenTextureCubemap(Shader shader, Texture2D panorama, int size, int format);
//------------------------------------------------------------------------------------
// Program main entry point
//------------------------------------------------------------------------------------
int main(void)
{
// Initialization
//--------------------------------------------------------------------------------------
const int screenWidth = 800;
const int screenHeight = 450;
InitWindow(screenWidth, screenHeight, "raylib [models] example - skybox rendering");
// Define the camera to look into our 3d world
Camera camera = { 0 };
camera.position = (Vector3){ 1.0f, 1.0f, 1.0f }; // Camera position
camera.target = (Vector3){ 4.0f, 1.0f, 4.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 skybox model
Mesh cube = GenMeshCube(1.0f, 1.0f, 1.0f);
Model skybox = LoadModelFromMesh(cube);
// Set this to true to use an HDR Texture
// NOTE: raylib must be built with HDR Support for this to work: SUPPORT_FILEFORMAT_HDR
bool useHDR = false;
// Load skybox shader and set required locations
// NOTE: Some locations are automatically set at shader loading
skybox.materials[0].shader = LoadShader(TextFormat("resources/shaders/glsl%i/skybox.vs", GLSL_VERSION),
TextFormat("resources/shaders/glsl%i/skybox.fs", GLSL_VERSION));
SetShaderValue(skybox.materials[0].shader, GetShaderLocation(skybox.materials[0].shader, "environmentMap"), (int[1]){ MATERIAL_MAP_CUBEMAP }, SHADER_UNIFORM_INT);
SetShaderValue(skybox.materials[0].shader, GetShaderLocation(skybox.materials[0].shader, "doGamma"), (int[1]){ useHDR? 1 : 0 }, SHADER_UNIFORM_INT);
SetShaderValue(skybox.materials[0].shader, GetShaderLocation(skybox.materials[0].shader, "vflipped"), (int[1]){ useHDR? 1 : 0 }, SHADER_UNIFORM_INT);
// Load cubemap shader and setup required shader locations
Shader shdrCubemap = LoadShader(TextFormat("resources/shaders/glsl%i/cubemap.vs", GLSL_VERSION),
TextFormat("resources/shaders/glsl%i/cubemap.fs", GLSL_VERSION));
SetShaderValue(shdrCubemap, GetShaderLocation(shdrCubemap, "equirectangularMap"), (int[1]){ 0 }, SHADER_UNIFORM_INT);
char skyboxFileName[256] = { 0 };
if (useHDR)
{
TextCopy(skyboxFileName, "resources/dresden_square_2k.hdr");
// Load HDR panorama (sphere) texture
Texture2D panorama = LoadTexture(skyboxFileName);
// Generate cubemap (texture with 6 quads-cube-mapping) from panorama HDR texture
// NOTE 1: New texture is generated rendering to texture, shader calculates the sphere->cube coordinates mapping
// NOTE 2: It seems on some Android devices WebGL, fbo does not properly support a FLOAT-based attachment,
// despite texture can be successfully created.. so using PIXELFORMAT_UNCOMPRESSED_R8G8B8A8 instead of PIXELFORMAT_UNCOMPRESSED_R32G32B32A32
skybox.materials[0].maps[MATERIAL_MAP_CUBEMAP].texture = GenTextureCubemap(shdrCubemap, panorama, 1024, PIXELFORMAT_UNCOMPRESSED_R8G8B8A8);
UnloadTexture(panorama); // Texture not required anymore, cubemap already generated
}
else
{
// TODO: WARNING: On PLATFORM_WEB it requires a big amount of memory to process input image
// and generate the required cubemap image to be passed to rlLoadTextureCubemap()
Image image = LoadImage("resources/skybox.png");
skybox.materials[0].maps[MATERIAL_MAP_CUBEMAP].texture = LoadTextureCubemap(image, CUBEMAP_LAYOUT_AUTO_DETECT);
UnloadImage(image);
}
DisableCursor(); // Limit cursor to relative movement inside the window
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_FIRST_PERSON);
// Load new cubemap texture on drag&drop
if (IsFileDropped())
{
FilePathList droppedFiles = LoadDroppedFiles();
if (droppedFiles.count == 1) // Only support one file dropped
{
if (IsFileExtension(droppedFiles.paths[0], ".png;.jpg;.hdr;.bmp;.tga"))
{
// Unload current cubemap texture to load new one
UnloadTexture(skybox.materials[0].maps[MATERIAL_MAP_CUBEMAP].texture);
if (useHDR)
{
// Load HDR panorama (sphere) texture
Texture2D panorama = LoadTexture(droppedFiles.paths[0]);
// Generate cubemap from panorama texture
skybox.materials[0].maps[MATERIAL_MAP_CUBEMAP].texture = GenTextureCubemap(shdrCubemap, panorama, 1024, PIXELFORMAT_UNCOMPRESSED_R8G8B8A8);
UnloadTexture(panorama); // Texture not required anymore, cubemap already generated
}
else
{
Image image = LoadImage(droppedFiles.paths[0]);
skybox.materials[0].maps[MATERIAL_MAP_CUBEMAP].texture = LoadTextureCubemap(image, CUBEMAP_LAYOUT_AUTO_DETECT);
UnloadImage(image);
}
TextCopy(skyboxFileName, droppedFiles.paths[0]);
}
}
UnloadDroppedFiles(droppedFiles); // Unload filepaths from memory
}
//----------------------------------------------------------------------------------
// Draw
//----------------------------------------------------------------------------------
BeginDrawing();
ClearBackground(RAYWHITE);
BeginMode3D(camera);
// We are inside the cube, we need to disable backface culling!
rlDisableBackfaceCulling();
rlDisableDepthMask();
DrawModel(skybox, (Vector3){0, 0, 0}, 1.0f, WHITE);
rlEnableBackfaceCulling();
rlEnableDepthMask();
DrawGrid(10, 1.0f);
EndMode3D();
if (useHDR) DrawText(TextFormat("Panorama image from hdrihaven.com: %s", GetFileName(skyboxFileName)), 10, GetScreenHeight() - 20, 10, BLACK);
else DrawText(TextFormat(": %s", GetFileName(skyboxFileName)), 10, GetScreenHeight() - 20, 10, BLACK);
DrawFPS(10, 10);
EndDrawing();
//----------------------------------------------------------------------------------
}
// De-Initialization
//--------------------------------------------------------------------------------------
UnloadShader(skybox.materials[0].shader);
UnloadTexture(skybox.materials[0].maps[MATERIAL_MAP_CUBEMAP].texture);
UnloadModel(skybox); // Unload skybox model
UnloadShader(shdrCubemap);
CloseWindow(); // Close window and OpenGL context
//--------------------------------------------------------------------------------------
return 0;
}
//------------------------------------------------------------------------------------
// Module Functions Definition
//------------------------------------------------------------------------------------
// Generate cubemap texture from HDR texture
static TextureCubemap GenTextureCubemap(Shader shader, Texture2D panorama, int size, int format)
{
TextureCubemap cubemap = { 0 };
rlDisableBackfaceCulling(); // Disable backface culling to render inside the cube
// STEP 1: Setup framebuffer
//------------------------------------------------------------------------------------------
unsigned int rbo = rlLoadTextureDepth(size, size, true);
cubemap.id = rlLoadTextureCubemap(0, size, format, 1);
unsigned int fbo = rlLoadFramebuffer();
rlFramebufferAttach(fbo, rbo, RL_ATTACHMENT_DEPTH, RL_ATTACHMENT_RENDERBUFFER, 0);
rlFramebufferAttach(fbo, cubemap.id, RL_ATTACHMENT_COLOR_CHANNEL0, RL_ATTACHMENT_CUBEMAP_POSITIVE_X, 0);
// Check if framebuffer is complete with attachments (valid)
if (rlFramebufferComplete(fbo)) TraceLog(LOG_INFO, "FBO: [ID %i] Framebuffer object created successfully", fbo);
//------------------------------------------------------------------------------------------
// STEP 2: Draw to framebuffer
//------------------------------------------------------------------------------------------
// NOTE: Shader is used to convert HDR equirectangular environment map to cubemap equivalent (6 faces)
rlEnableShader(shader.id);
// Define projection matrix and send it to shader
Matrix matFboProjection = MatrixPerspective(90.0*DEG2RAD, 1.0, rlGetCullDistanceNear(), rlGetCullDistanceFar());
rlSetUniformMatrix(shader.locs[SHADER_LOC_MATRIX_PROJECTION], matFboProjection);
// Define view matrix for every side of the cubemap
Matrix fboViews[6] = {
MatrixLookAt((Vector3){ 0.0f, 0.0f, 0.0f }, (Vector3){ 1.0f, 0.0f, 0.0f }, (Vector3){ 0.0f, -1.0f, 0.0f }),
MatrixLookAt((Vector3){ 0.0f, 0.0f, 0.0f }, (Vector3){ -1.0f, 0.0f, 0.0f }, (Vector3){ 0.0f, -1.0f, 0.0f }),
MatrixLookAt((Vector3){ 0.0f, 0.0f, 0.0f }, (Vector3){ 0.0f, 1.0f, 0.0f }, (Vector3){ 0.0f, 0.0f, 1.0f }),
MatrixLookAt((Vector3){ 0.0f, 0.0f, 0.0f }, (Vector3){ 0.0f, -1.0f, 0.0f }, (Vector3){ 0.0f, 0.0f, -1.0f }),
MatrixLookAt((Vector3){ 0.0f, 0.0f, 0.0f }, (Vector3){ 0.0f, 0.0f, 1.0f }, (Vector3){ 0.0f, -1.0f, 0.0f }),
MatrixLookAt((Vector3){ 0.0f, 0.0f, 0.0f }, (Vector3){ 0.0f, 0.0f, -1.0f }, (Vector3){ 0.0f, -1.0f, 0.0f })
};
rlViewport(0, 0, size, size); // Set viewport to current fbo dimensions
// Activate and enable texture for drawing to cubemap faces
rlActiveTextureSlot(0);
rlEnableTexture(panorama.id);
for (int i = 0; i < 6; i++)
{
// Set the view matrix for the current cube face
rlSetUniformMatrix(shader.locs[SHADER_LOC_MATRIX_VIEW], fboViews[i]);
// Select the current cubemap face attachment for the fbo
// WARNING: This function by default enables->attach->disables fbo!!!
rlFramebufferAttach(fbo, cubemap.id, RL_ATTACHMENT_COLOR_CHANNEL0, RL_ATTACHMENT_CUBEMAP_POSITIVE_X + i, 0);
rlEnableFramebuffer(fbo);
// Load and draw a cube, it uses the current enabled texture
rlClearScreenBuffers();
rlLoadDrawCube();
// ALTERNATIVE: Try to use internal batch system to draw the cube instead of rlLoadDrawCube
// for some reason this method does not work, maybe due to cube triangles definition? normals pointing out?
// TODO: Investigate this issue...
//rlSetTexture(panorama.id); // WARNING: It must be called after enabling current framebuffer if using internal batch system!
//rlClearScreenBuffers();
//DrawCubeV(Vector3Zero(), Vector3One(), WHITE);
//rlDrawRenderBatchActive();
}
//------------------------------------------------------------------------------------------
// STEP 3: Unload framebuffer and reset state
//------------------------------------------------------------------------------------------
rlDisableShader(); // Unbind shader
rlDisableTexture(); // Unbind texture
rlDisableFramebuffer(); // Unbind framebuffer
rlUnloadFramebuffer(fbo); // Unload framebuffer (and automatically attached depth texture/renderbuffer)
// Reset viewport dimensions to default
rlViewport(0, 0, rlGetFramebufferWidth(), rlGetFramebufferHeight());
rlEnableBackfaceCulling();
//------------------------------------------------------------------------------------------
cubemap.width = size;
cubemap.height = size;
cubemap.mipmaps = 1;
cubemap.format = format;
return cubemap;
}From raylib 6.2. The original on GitHub.