Rendering Studies

Real-time rendering demos written in C++11 and OpenGL — runs natively on desktop and in the browser via WebAssembly.

---

Overview

A collection of real-time 3D rendering demos built from scratch in C++11 and OpenGL, covering foundational techniques in computer graphics — from basic geometry and lighting models to normal mapping, environment mapping, and tessellation shaders.

Each demo is selectable at runtime from a settings panel with no restart needed. The same codebase compiles to a native binary using OpenGL 4.1 Core, and to a static web page using WebGL 2.0 via Emscripten, making every demo instantly accessible in the browser without any installation.

Demos

Demo	Technique	Platform
Triangle	Hello world — basic vertex pipeline
Cube	Indexed geometry, depth testing
Textured Cube	UV mapping, texture sampling
Simple Mesh	OBJ / FBX model loading via Assimp
Gouraud Shading	Per-vertex lighting
Phong Shading	Per-fragment lighting
Flat Shading	Face normals, no geometry shader
Color Coord	Visualizing UV / position coordinates
Chroma Depth	Depth-based color grading
Bump Mapping	Normals derived analytically from a procedural ripple height field
Anisotropic	Anisotropic highlight model
Skybox	Cubemap environment mapping
Shadow Mapping	PCF shadow mapping with depth buffer
Normal Mapping	Tangent-space normal mapping from a normal map texture
Specular Mapping	Per-fragment specular intensity controlled by a specular map
Ripple Effect	Tessellation shaders (tesc / tese)
Display Normals	Geometry shader — per-vertex and per-face normal visualisation

---

Architecture

Engine

The engine lives in src/Engine/ and is split into focused subsystems:

Subsystem	Responsibility
Renderer	Frame orchestration — clears buffers, renders FPS counter and reference grid, controls polygon mode and depth test
Camera	Euler-angle FPS camera with 6-DOF movement, mouse look, and zoom. Uses glm::dvec3 for high-precision positioning
Shader	Compiles and links GLSL programs (vertex + fragment, or full tessellation pipeline). Caches uniform locations to avoid redundant lookups
Texture	Loads images to the GPU with configurable wrapping, mipmaps, sRGB, and Y-flip
Model	Loads OBJ and FBX files via Assimp, walks the node hierarchy, and generates a VAO/VBO/EBO per mesh
TextRenderer	Rasterizes TrueType fonts via Freetype and renders them with a dedicated shader
Window	GLFW wrapper — multi-monitor support, HiDPI awareness, fullscreen toggle, mouse and keyboard state
UI	Dear ImGui context and backend lifecycle
FileManager	Static helpers for reading shader source files and loading/freeing image data via stb_image

Demo system

Each demo focuses on a single rendering technique — from basic geometry to tessellation shaders. Every demo is self-contained in src/Demos/ and ships with its own GLSL shaders, which live alongside the project assets in assets/shaders/.

Single codebase, two platforms

The same source compiles to a native binary (OpenGL 4.1 Core) and to a WebAssembly page (WebGL 2.0) via Emscripten.

	Desktop	Web
GL version	OpenGL 4.1 Core	OpenGL ES 3.0
GLSL	#version 410 core	#version 300 es
Event loop	while (window.IsOpened())	emscripten_set_main_loop_arg
Assets	Copied to build directory	Preloaded into the WASM virtual filesystem
GLFW / Freetype	Compiled from submodules	Emscripten built-in ports
Wireframe mode	Supported	Disabled (not in WebGL 2)

All vendored dependencies are compiled as static libraries (BUILD_SHARED_LIBS=OFF), producing a single self-contained binary on desktop and a single .wasm bundle on the web.

---

Requirements

Desktop — macOS · Linux · Windows

• CMake 3.24+
• zlib (available by default on macOS and most Linux distros; on Windows install via your package manager)

Web

• Emscripten SDK

---

🔨 Building

1. Clone the repository

git clone --recurse-submodules https://github.com/madureira/rendering-studies.git

If you already cloned without submodules, initialize them manually:

git submodule update --init --recursive

Note: The first clone may take a few minutes — Assimp is a large dependency (~300 MB).

🖥️ Desktop

# Debug
./debug_build.sh

# Release
./release_build.sh

No package manager required — all dependencies are compiled from source via git submodules.

🌍 Web (WebAssembly + WebGL 2.0)

source ~/emsdk/emsdk_env.sh
./web_build.sh

Preview locally:

./web_serve.sh
# → http://localhost:8080

Deploy to GitHub Pages:

./web_deploy.sh
# Copies output to docs/ — commit and push to activate Pages

---

⚙️ Configuration

Edit config.ini to change the window size, monitor, and VSync:

window_title=Rendering Studies
window_width=1200
window_height=900
vsync_on=true
monitor_index=0

---

📦 Dependencies

Library	Version	Role	Vendored as
GLFW	3.4	Window, OpenGL context, input	Git submodule
Freetype	2.13.3	Font rasterization	Git submodule
Assimp	5.4.3	3D model loading (OBJ, FBX)	Git submodule
GLM	1.0.1	Math (vectors, matrices)	Git submodule
ImGui	1.91.8	Immediate-mode UI	Git submodule
spdlog	1.15.1	Logging	Git submodule
stb	2.30	Image loading (stb_image)	Git submodule
glad	gl=4.1 core	OpenGL loader (desktop only)	Vendored
ImViewGuizmo	1.0.2	3D view gizmo for Dear ImGui	Vendored

---

📚 References and Study Materials

The study was based on the following books, articles, and online resources, which provided the foundational knowledge, methodologies, and insights used in this research:

Book	Author	Year
Graphics Shaders: Theory and Practice, Second Edition	Mike Bailey, Steve Cunningham	2011
Foundations of Game Engine Development, Volume 1: Mathematics	Eric Lengyel	2016
Foundations of Game Engine Development, Volume 2: Rendering	Eric Lengyel	2019
3D Math Primer for Graphics and Game Development	Fletcher Dunn, Ian Parberry	2011

Website	Description
https://learnopengl.com	A comprehensive and highly recommended resource for learning OpenGL from the ground up.
https://bgolus.medium.com	An excellent article explaining how to create an efficient and visually appealing infinite grid shader.
https://dev.to/javiersalcedopuyo	A clear and practical guide with code examples for implementing a simple infinite grid shader.

Videos	Description
Casey Muratori - Handmade Hero	An ongoing project by Casey Muratori to create a complete, professional-quality game accompanied by videos that explain every single line of its source code.
Cem Yuksel	Cem Yuksel is a computer graphics researcher and a professor in the School of Computing at the University of Utah.
OGLDEV	Video tutorials on modern OpenGL using C++
pikuma	An education platform teaching the fundamentals of computer science & math.
The Cherno	Yan Chernikov's channel about game engine development
Inigo Quilez	"Painting with Maths" is all about using mathematics with purely artistic goals , designing mathematical expressions and deriving formulas to sculpt, color, light and compose beautiful paintings.