Graphics & Game Dev Tutorials Туториалы по графике и играм

A collection of examples for SDL3, WebGPU, WebGL 2.0, and more. Коллекция примеров для SDL3, WebGPU, WebGL 2.0 и других технологий.

Tools for C and C++ development Инструменты для разработки на C и C++

C/C++ Development Environment Setup Настройка среды разработки на C/C++

Installing MinGW 16.1, CMake, Qt Creator, and CLion for professional C/C++ development. Установка MinGW 16.1, CMake, Qt Creator и CLion для профессиональной разработки на C/C++.

View
C/C++ Environment Setup with CLion, CMake, and MinGW Настройка окружения C/C++ в CLion, CMake, и MinGW

Setting up CLion, CMake, and MinGW for C/C++ development. Настройка CLion, CMake и MinGW для разработки на C/C++.

View
Android Environment Setup Настройка окружения для Android

Manual installation of SDK, NDK, JDK, and CMake. Установка Android SDK, NDK, JDK, CMake и т.д.

View
Emscripten (Wasm) Setup Настройка Emscripten (Wasm)

Installation of Emscripten SDK, CMake, and Node.js for WebAssembly. Установка Emscripten SDK, CMake, Node.js и настройка проекта Wasm.

View
Building zlib from Source (Emscripten) Сборка zlib из исходного кода (Emscripten)

A step-by-step guide to building zlib statically on Windows using the Emscripten compiler toolchain and CMake. Пошаговое руководство по статической сборке zlib на Windows с использованием компилятора Emscripten и CMake.

View
Building libpng from Source (Emscripten) Сборка libpng из исходного кода (Emscripten)

A step-by-step guide to building libpng statically on Windows using the Emscripten compiler toolchain and CMake. Пошаговое руководство по статической сборке libpng на Windows с использованием компилятора Emscripten и CMake.

View
Building IXWebSocket, MbedTLS, and zlib from Source (MinGW) Сборка IXWebSocket, MbedTLS и zlib из исходного кода (MinGW)

A step-by-step guide to building zlib, MbedTLS 4.1.0, and IXWebSocket statically on Windows using the MinGW compiler toolchain and CMake. Пошаговое руководство по статической сборке zlib, MbedTLS 4.1.0 и IXWebSocket на Windows с использованием компилятора MinGW и CMake.

View
C/C++ Environment Setup with Qt Creator (No Qt Framework) Настройка окружения C/C++ в Qt Creator (Без фреймворка Qt)

Setting up MinGW 13.1, CMake, and standalone Qt Creator for pure C/C++ development. Настройка MinGW 13.1, CMake и автономного Qt Creator для чистой разработки на C/C++.

View

Box3D and Raylib Box3D и Raylib

C/C++ Development Environment Setup Настройка среды разработки на C/C++

Installing MinGW 16.1, CMake, Qt Creator, and CLion for professional C/C++ development. Установка MinGW 16.1, CMake, Qt Creator и CLion для профессиональной разработки на C/C++.

View
C/C++ Environment Setup with CLion, CMake, and MinGW Настройка окружения C/C++ в CLion, CMake, и MinGW

Setting up CLion, CMake, and MinGW for C/C++ development. Настройка CLion, CMake и MinGW для разработки на C/C++.

View
Building Box3D from Source (MinGW) Сборка Box3D из исходного кода (MinGW)

A step-by-step guide to building Box3D statically on Windows using the MinGW compiler toolchain and CMake. Пошаговое руководство по статической сборке Box3D на Windows с использованием компилятора Emscripten и CMake.

View
Installing prebuilt Raylib from GitHub Releases for use with CMake and MinGW Установка готовой сборки (prebuilt) Raylib из раздела Releases на GitHub для использования с CMake и MinGW

Installing prebuilt Raylib from GitHub Releases for use with CMake and MinGW. Установка готовой сборки (prebuilt) Raylib из раздела Releases на GitHub для использования с CMake и MinGW.

View
Setting Up Box3D and Raylib in CLion with CMake and MinGW Настройка Box3D и Raylib в CLion с использованием CMake и MinGW

Setting Up Box3D and Raylib in CLion with CMake and MinGW. Настройка Box3D и Raylib в CLion с использованием CMake и MinGW.

View
Using Debug Drawer (b3DebugDraw) with Box3D and Raylib in CLion Использование Debug Drawer (b3DebugDraw) для Box3D и Raylib в CLion

Using Debug Drawer (b3DebugDraw) with Box3D and Raylib in CLion using CMake and MinGW. Использование Debug Drawer (b3DebugDraw) для Box3D и Raylib в CLion с использованием CMake и MinGW.

View

SDL3 and OpenGL - 3 in 1 (Windows, WebAssembly, Android) SDL3 и OpenGL - 3 в 1 (Windows, WebAssembly, Android)

Simple triangle in 2D (OpenGL) Рисование простого треугольника в 2D (OpenGL)

Drawing a simple triangle in 2D for Windows, Android, and WebAssembly. Рисование простого треугольника в 2D для Windows, Android, и WebAssembly.

View
Line drawer in 3D (OpenGL) Рисование линии в 3D (OpenGL)

Drawing a line in 3D for Windows, Android, and WebAssembly. Рисование линии в 3D для Windows, Android, и WebAssembly.

View

SFML2 for Desktop (C++) SFML2 для ПК (C++)

Building SFML 2.6.2 from Source Сборка SFML 2.6.2 из исходного кода

Step-by-step guide to compiling SFML 2.6.2 from source using MinGW 13.1 for maximum compatibility. Пошаговое руководство по компиляции SFML 2.6.2 из исходного кода с использованием MinGW 13.1.

View
Setting up SFML with find_package (MinGW) Настройка SFML с помощью find_package (MinGW)

Building and running an SFML application on Windows using MinGW 13.1 and CMake. Сборка и запуск приложения SFML на Windows с использованием MinGW 13.1 и CMake.

View
Building FamTrinli's 16 Games Сборка 16 игр от FamTrinli

A guide to building and running the famous "16 Games in C++" using modern tools and IDEs. Руководство по сборке и запуску знаменитых "16 игр на C++" с использованием современных инструментов и IDE.

View

PySDL3 - Renderer (Python) PySDL3 - Renderer (Python)

Setting up PySDL3 (Python) Настройка PySDL3 (Python)

Building and running an SDL3 application in Python on Windows using PySDL3. Сборка и запуск приложения SDL3 на Python на Windows с использованием PySDL3.

View
Setting up SDL3_image with PySDL3 (Python) Настройка SDL3_image с PySDL3 (Python)

Loading and displaying images in SDL3 using PySDL3_image on Windows. Загрузка и отображение изображений в SDL3 с использованием PySDL3_image на Windows.

View
Setting up SDL3_ttf with PySDL3 (Python) Настройка SDL3_ttf с PySDL3 (Python)

Rendering text in SDL3 using PySDL3, Python, and SDL3_ttf. Рендеринг текста в SDL3 с использованием PySDL3, Python и SDL3_ttf.

View
Setting up SDL3_mixer with PySDL3 (Python) Настройка SDL3_mixer с PySDL3 (Python)

Playing music and sound effects in SDL3 using PySDL3_mixer on Windows. Воспроизведение музыки и звуковых эффектов в SDL3 с использованием PySDL3_mixer на Windows.

View
Setting up Box2D with PySDL3 Настройка Box2D с PySDL3

Integrating the Box2D physics engine with PySDL3 for realistic simulation. Интеграция физического движка Box2D с PySDL3 для реалистичного моделирования.

View

PySDL3 - OpenGL (Python) PySDL3 - OpenGL (Python)

Setting up PySDL3 with OpenGL (Python) Настройка PySDL3 с OpenGL (Python)

Building and running an SDL3 application with OpenGL in Python using PySDL3 and PyOpenGL. Сборка и запуск приложения SDL3 с использованием OpenGL на Python с помощью PySDL3 и PyOpenGL.

View
Setting up SDL3_image with PySDL3 and OpenGL Настройка SDL3_image с PySDL3 и OpenGL

Loading textures with SDL3_image and rendering them using PyOpenGL in Python. Загрузка текстур с помощью SDL3_image и их рендеринг через PyOpenGL в Python.

View
Setting up SDL3_ttf with OpenGL (Python) Настройка SDL3_ttf с OpenGL (Python)

Rendering TrueType text using SDL3_ttf and OpenGL in Python. Рендеринг текста TrueType с использованием SDL3_ttf и OpenGL на Python.

View
Setting up SDL3_mixer with PySDL3 and OpenGL Настройка SDL3_mixer с PySDL3 и OpenGL

Playing audio and rendering with OpenGL in PySDL3 applications. Воспроизведение звука и рендеринг через OpenGL в приложениях PySDL3.

View

SDL3 for Desktop - SDL3_Renderer (C and C++) SDL3 для ПК - SDL3_Renderer (C и C++)

Setting up SDL3 with find_package (MinGW) Настройка SDL3 с помощью find_package (MinGW)

Building and running an SDL3 application in C or C++ on Windows using MinGW and CMake. Сборка и запуск приложения SDL3 на C или C++ на Windows с использованием MinGW и CMake.

View
Setting up SDL3_image with find_package (MinGW) Настройка SDL3_image с помощью find_package (MinGW)

Loading and displaying images in SDL3 using SDL3_image, MinGW 13.1, and CMake. Загрузка и отображение изображений в SDL3 с использованием SDL3_image, MinGW 13.1 и CMake.

View
Setting up SDL3_ttf with find_package (MinGW) Настройка SDL3_ttf с помощью find_package (MinGW)

Rendering text in SDL3 using SDL3_ttf, MinGW 13.1, and CMake. Рендеринг текста в SDL3 с использованием SDL3_ttf, MinGW 13.1 и CMake.

View
Setting up SDL3_mixer with find_package (MinGW) Настройка SDL3_mixer с помощью find_package (MinGW)

Playing music and sound effects in SDL3 using SDL3_mixer, MinGW, and CMake. Воспроизведение музыки и звуковых эффектов в SDL3 с использованием SDL3_mixer, MinGW и CMake.

View
2D Spatial Audio in SDL3 with find_package (MinGW) Пространственный 2D-звук в SDL3 с помощью find_package (MinGW)

Implementing 2D spatial audio and volume attenuation based on player coordinates in SDL3 using SDL3_mixer, MinGW 13.1, and CMake. Реализация пространственного 2D-звука и затухания громкости на основе координат игрока в SDL3 с использованием SDL3_mixer, MinGW 13.1 и CMake.

View

SDL3 for Web (WebAssembly) - SDL3_Renderer (C and C++) SDL3 для Web (WebAssembly) - SDL3_Renderer (C и C++)

Building SDL3 for WebAssembly Сборка SDL3 для WebAssembly

Step-by-step guide to compiling SDL3 from source for WebAssembly using Emscripten. Пошаговое руководство по компиляции SDL3 из исходного кода для WebAssembly через Emscripten.

View
Setting up SDL3 for WebAssembly (Emscripten) Настройка SDL3 для WebAssembly (Emscripten)

Building and running an SDL3 application in C or C++ for the web using Emscripten and CMake. Сборка и запуск приложения SDL3 на C или C++ для веба с использованием Emscripten и CMake.

View
Debugging SDL3 WebAssembly in Chrome (DWARF) Отладка SDL3 WebAssembly в Chrome (DWARF)

Learn how to debug your C/C++ SDL3 code directly in Chrome using DWARF symbols. Узнайте, как отлаживать ваш C/C++ код SDL3 прямо в Chrome, используя DWARF символы.

View
Building SDL3_image for WebAssembly Сборка SDL3_image для WebAssembly

Step-by-step guide to compiling SDL3_image from source for WebAssembly using Emscripten. Пошаговое руководство по компиляции SDL3_image из исходного кода для WebAssembly через Emscripten.

View
Building SDL3_ttf for WebAssembly Сборка SDL3_ttf для WebAssembly

Step-by-step guide to compiling FreeType and SDL3_ttf from source for WebAssembly. Пошаговое руководство по компиляции FreeType и SDL3_ttf из исходного кода для WebAssembly.

View
Building SDL3_mixer for WebAssembly Сборка SDL3_mixer для WebAssembly

Step-by-step guide to compiling SDL3_mixer from source for WebAssembly using Emscripten. Пошаговое руководство по компиляции SDL3_mixer из исходного кода для WebAssembly через Emscripten.

View

SDL3 for Android - SDL3_Renderer (C and C++) SDL3 для Android - SDL3_Renderer (C и C++)

Setting up a template project Настройка шаблонного проекта

Building and running an SDL3 application on Android using the Renderer API. Сборка и запуск приложения SDL3 на Android с использованием Renderer API.

View

SDL3 for Desktop - OpenGL (C and C++) SDL3 для ПК - OpenGL (C и C++)

Setting up SDL3 with OpenGL and GLAD (MinGW) Настройка SDL3 с OpenGL и GLAD (MinGW)

Building and running an SDL3 application with OpenGL and GLAD in C or C++ on Windows using MinGW and CMake. Сборка и запуск приложения SDL3 с использованием OpenGL и GLAD на C или C++ на Windows с помощью MinGW и CMake.

View
Setting up SDL3_image with OpenGL (MinGW) Настройка SDL3_image с OpenGL (MinGW)

Loading a texture using SDL3_image and rendering it on a rectangle using OpenGL 3.3. Загрузка текстуры с помощью SDL3_image и её рендеринг на прямоугольнике с использованием OpenGL 3.3.

View
Setting up SDL3_ttf with OpenGL (MinGW) Настройка SDL3_ttf с OpenGL (MinGW)

Rendering TrueType text using SDL3_ttf and projecting it with orthographic matrices using OpenGL 3.3 and cglm. Рендеринг текста TrueType с помощью SDL3_ttf и его проекция с использованием ортогональных матриц в OpenGL 3.3 и cglm.

View
Setting up SDL3_mixer with OpenGL (MinGW) Настройка SDL3_mixer с OpenGL (MinGW)

Initializing SDL3_mixer 3.2.2, loading audio files, and playing background music and sound effects in an OpenGL 3.3 environment. Инициализация SDL3_mixer 3.2.2, загрузка аудиофайлов, а также воспроизведение фоновой музыки и звуковых эффектов в окружении OpenGL 3.3.

View
Setting up IXWebSocket with SDL3 and OpenGL (MinGW) Настройка IXWebSocket с SDL3 и OpenGL (MinGW)

Building and running an SDL3 and OpenGL 3.3 desktop application with IXWebSocket networking on Windows using MinGW 13.1 and CMake. Сборка и запуск десктопного приложения SDL3 и OpenGL 3.3 с сетевой частью на IXWebSocket на Windows с помощью MinGW 13.1 и CMake.

View

SDL3 for Web (WebAssembly) - OpenGL SDL3 для Web (WebAssembly) - OpenGL

Setting up SDL3 (OpenGL, WebAssembly) Настройка SDL3 (OpenGL, WebAssembly)

Building and running an OpenGL ES 3.0 application with SDL3 for the web using Emscripten and CMake. Сборка и запуск приложения с OpenGL ES 3.0 и SDL3 для веба с использованием Emscripten и CMake.

View
Debugging SDL3 Applications in Chrome using DWARF (OpenGL, WebAssembly) Отладка SDL3-приложений в Chrome, используя DWARF (OpenGL, WebAssembly)

Learn how to debug your C/C++ SDL3 code directly in Chrome using DWARF symbols. Узнайте, как отлаживать ваш C/C++ код SDL3 прямо в Chrome, используя DWARF символы.

View
Setting up cglm with SDL3 (OpenGL, WebAssembly) Настройка SDL3 с SDL3 (OpenGL, WebAssembly)

Building and running an OpenGL ES 3.0 application with cglm and SDL3 for the web using Emscripten and CMake. Сборка и запуск приложения с cglm, OpenGL ES 3.0 и SDL3 для веба с использованием Emscripten и CMake.

View
Setting up SDL3_image (OpenGL, WebAssembly) Настройка SDL3_image (OpenGL, WebAssembly)

Loading textures using SDL3_image and rendering them on a hardware-accelerated rectangle primitive for the web using Emscripten. Загрузка текстур с помощью SDL3_image и их рендеринг на графическом примитиве в виде прямоугольника для веба с использованием Emscripten.

View
Setting up stb_image (OpenGL, WebAssembly) Настройка stb_image (OpenGL, WebAssembly)

Loading textures using stb_image and rendering them on a hardware-accelerated rectangle primitive for the web using Emscripten. Загрузка текстур с помощью stb_image и их рендеринг на графическом примитиве в виде прямоугольника для веба с использованием Emscripten.

View
Setting up SDL3_ttf (OpenGL, WebAssembly) Настройка SDL3_ttf (OpenGL, WebAssembly)

Loading fonts using SDL3_ttf and rendering them on a hardware-accelerated rectangle primitive for the web using Emscripten. Загрузка шрифтов с помощью SDL3_ttf и их рендеринг на графическом примитиве в виде прямоугольника для веба с использованием Emscripten.

View
Setting up SDL3_mixer (OpenGL, WebAssembly) Настройка SDL3_mixer (OpenGL, WebAssembly)

Loading audio samples using SDL3_mixer and playing them via the system audio for the web using Emscripten. Загрузка аудиосемплов с помощью SDL3_mixer и их воспроизведение через системный звук для веба с использованием Emscripten.

View
Setting up OpenAL (OpenGL, WebAssembly) Настройка OpenAL (OpenGL, WebAssembly)

Playing audio samples via OpenAL for the web using Emscripten. Воспроизведение аудиосемплов через OpenAL для веба с использованием Emscripten.

View

Support My Work Поддержать проект

If these tutorials helped you, consider buying me a coffee! Если эти туториалы вам помогли, вы можете поддержать автора.

Sberbank (Russia only) Сбербанк (только для РФ)

Sberbank SBP QR Code

Direct transfer via phone number (Russia only) Перевод по номеру телефона (только для РФ)

+7 (917) 212-29-59

USDT TRC20

USDT TRC20 QR Code

Support via Cryptocurrency Поддержка криптовалютой

TMtY1YifNf6FKvgeFmqKGQR4NStKr3csGp