Skip to content

Instantly share code, notes, and snippets.

@8Observer8
Last active November 13, 2025 00:24
Show Gist options
  • Select an option

  • Save 8Observer8/aed6fc1b3482b59215526d06830c2242 to your computer and use it in GitHub Desktop.

Select an option

Save 8Observer8/aed6fc1b3482b59215526d06830c2242 to your computer and use it in GitHub Desktop.
Background color using OpenGL, SDL3, and C
dist
public/js
cd dist\win
cmake --build .
cd ..\..
cd dist\web
cmake --build . -j4
cd ..\..
mkdir public\js
set current_dir=%~dp0
copy "%current_dir%dist\web\app.wasm" "%current_dir%public\js"
copy "%current_dir%dist\web\app.js" "%current_dir%public\js"
cmake_minimum_required(VERSION 3.21)
project(background-color-opengl-sdl3-c)
add_executable(app)
target_sources(app
PRIVATE
src/main.c
)
if (WIN32)
target_include_directories(app PRIVATE H:/libs/glad-2.0.8/include)
target_sources(app
PRIVATE
H:/libs/glad-2.0.8/src/glad.c
)
target_link_libraries(app PRIVATE opengl32)
target_link_options(app PRIVATE -static)
endif()
find_package(SDL3)
target_link_libraries(app PRIVATE SDL3::SDL3)
cmake -G "MinGW Makefiles" -S . -B dist/win ^
-DSDL3_DIR=H:/libs/SDL3-devel-3.2.24-mingw/lib/cmake/SDL3 ^
-DCMAKE_BUILD_TYPE=Release
emcmake cmake -S . -B dist/web ^
-DSDL3_DIR=H:/libs/SDL-3.2.24-wasm-release/lib/cmake/SDL3 ^
-DCMAKE_BUILD_TYPE=Debug
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<canvas id="canvas"></canvas>
<script async src="./js/app.js"></script>
</body>
</html>
#define SDL_MAIN_USE_CALLBACKS 1
#include <SDL3/SDL.h>
#include <SDL3/SDL_main.h>
#ifdef __EMSCRIPTEN__
#include <SDL3/SDL_opengles2.h>
#else
#include <glad/glad.h>
#endif // __EMSCRIPTEN__
static SDL_Window *window = NULL;
static SDL_GLContext glContext;
SDL_AppResult SDL_AppInit(void **appstate, int argc, char *argv[])
{
if (!SDL_Init(SDL_INIT_VIDEO))
{
SDL_Log("Couldn't initialize SDL: %s", SDL_GetError());
return SDL_APP_FAILURE;
}
window = SDL_CreateWindow("OpenGL, SDL3, C", 350, 350, SDL_WINDOW_OPENGL);
if (!window)
{
SDL_Log("Couldn't create the window: %s", SDL_GetError());
return SDL_APP_FAILURE;
}
glContext = SDL_GL_CreateContext(window);
if (!glContext)
{
SDL_Log("Couldn't create the OpenGL context: %s", SDL_GetError());
return SDL_APP_FAILURE;
}
SDL_GL_SetSwapInterval(1); // Turn on vertical sync
#ifdef __WIN32__
if (!gladLoadGL())
{
SDL_Log("Failed to initialize OpenGL function pointers");
return SDL_APP_FAILURE;
}
#endif // __WIN32__
glClearColor(0.2f, 0.2f, 0.2f, 1.f);
return SDL_APP_CONTINUE;
}
SDL_AppResult SDL_AppEvent(void *appstate, SDL_Event *event)
{
if (event->type == SDL_EVENT_QUIT)
return SDL_APP_SUCCESS;
return SDL_APP_CONTINUE;
}
SDL_AppResult SDL_AppIterate(void *appstate)
{
glClear(GL_COLOR_BUFFER_BIT);
SDL_GL_SwapWindow(window);
return SDL_APP_CONTINUE;
}
void SDL_AppQuit(void *appState, SDL_AppResult result)
{
SDL_GL_DestroyContext(glContext);
}
dist\win\app
@8Observer8
Copy link
Author

8Observer8 commented Nov 12, 2025

Libs:

How to build:

  • Add a path to bin folder of MinGW GCC 11.2 to PATH
  • Set lib paths in CMakeLists.txt, config-exe.bat, and config-web.bat
  • Type in CMD: config-exe -> build-exe -> run-exe to create EXE
  • Install Node.js
  • Install http-server using npm i http-server -g
  • Type in CMD: config-web > build-web -> http-server -c-1 -> open localhost:8080 in the browser
  • Unload the public folder on some hosting, for example, on the free https://www.netlify.com/ hosting
  • Run the final app in the browser: https://background-color-opengl-sdl3-c.netlify.app/
  • Create APK from WASM using Cordova and this video: https://www.youtube.com/watch?v=Aqzuakon7S0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment