helloworld-sdl2-opengl-emscripten icon indicating copy to clipboard operation
helloworld-sdl2-opengl-emscripten copied to clipboard

Basic program that uses SDL2+OpenGL, compiling both locally and via emscripten

[[http://unmaintained.tech/][http://unmaintained.tech/badge.svg]]

I wanted a bare-bones program for SDL2 + OpenGL 2D rendering that also compiled to JS+WebGL with Emscripten+Wasm. There are some SDL2 + OpenGL tutorials out there but most of them don't target the WebGL subset of OpenGL. I can't use the fixed function pipeline, so older OpenGL code won't work, and I can't use newer things like vertex array objects, instancing, or geometry shaders, so newer OpenGL code often won't work.

  • Installation

The Makefile should work on Mac OS X and Linux. The code should work on Windows and other SDL+OpenGL platforms but I haven't tested that.

** Install SDL2

On Mac using Homebrew:

#+begin_src sh brew install SDL2 SDL2_image #+end_src

On RedHat/Fedora flavors of Linux:

#+begin_src sh sudo yum install SDL2-devel SDL2_image-devel #+end_src

On Debian/Ubuntu flavors of Linux:

#+begin_src sh sudo apt install libsdl2-dev libsdl2-image-dev #+end_src

On Arch flavors of Linux:

#+begin_src sh sudo pacman -S sdl2 sdl2_image #+end_src

** Install STB, Dear Imgui

#+begin_src sh git submodule init git submodule update #+end_src

** Compiling and running

To run the native code:

#+begin_src sh make && bin/main #+end_src

To run the emscripten code: (~brew install emscripten~ on Mac, ~pacman -S emscripten~ on Arch Linux):

#+begin_src sh make www #+end_src

and then tell the webserver to serve the files from =www/=.

My Emscripten-ed wasm output is [[https://www.redblobgames.com/x/1535/][on my web site]].

I've also written a partial =CMakeLists.txt= file but am not using it yet.

The font included in this project is [[https://www.google.com/fonts/specimen/Droid+Sans][Droid Sans]], under the Apache License v2. The ImGui library includes the Proggy font.