Skip to content

C++/SDL2/OpenGLES2 samples running in the browser via Emscripten

License

Notifications You must be signed in to change notification settings

erik-larsen/emscripten-sdl2-ogles2

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

emscripten-sdl2-ogles2

OpenGL to WebGL using Emscripten

Demonstrates the basics of porting desktop graphics to the web using Emscripten, via a collection of code samples. Code is written in C++, SDL2, and OpenGLES2 and transpiled into Javascript and WebGL by Emscripten.

Hello Triangle Minimal

Demonstrates a minimal example of a triangle using shaders, with all code in one file. No user input.

Hello Triangle

Demonstrates a colorful triangle using shaders, with support for mouse and touch input:

  • Pan using left mouse or finger drag.
  • Zoom using mouse wheel or pinch gesture.

Hello Texture

Demonstrates a textured triangle, using SDL to load an image from a file.

Hello Text

Demonstrates TrueType text, using SDL to render a string into a texture and apply it to a quad.

Hello Texture Atlas

Demonstrates SGI's Texfont text, loading a font texture atlas from a .txf file and applying it to a quad, as well as rendering of text strings.

Hello Image

Demonstrates a checkberboard background texture created from an in-memory pixel array.

Motivation

Why Emscripten?

For users, running an app in the browser is the ultimate convenience: no need to manually install anything, and the app can run equally well on desktop, tablet, and phone. For developers, Emscripten does the work to produce optimal Javascript/WASM, replacing the boring and error-prone process of manually porting code.

Why SDL2?

These demos require OS-dependent stuff (keyboard, mouse, touch, text, audio, networking, etc.). SDL provides a cross-platform library to access this.

Why OpenGLES2?

WebGL provides GPU-accelerated graphics in the browser, and OpenGLES is the subset of OpenGL which most closely matches WebGL.