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 cross-compiled into Javascript and WebGL by Emscripten.
Run Hello Triangle Minimal (source)
Demonstrates a minimal example of a triangle using shaders, with all code in one file. No user input.
Run Hello Triangle (source)
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.
Run Hello Texture (source)
Demonstrates a textured triangle, using SDL to load an image from a file.
Run Hello Text (source)
Demonstrates TrueType text, using SDL to render a string into a texture and apply it to a quad.
Run Hello Texture Atlas (source)
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.
Run Hello Image (source)
Demonstrates a checkberboard background texture created from an in-memory pixel array.
Run Hello 3D (source)
Demonstrates 3D view manipulation using the Stanford bunny, shaded with the same rainbow shader as Hello Triangle, combined with hidden line rendering using barycentric coordinates to shade triangle edges white.
- Orbit using left mouse or one finger drag.
- Zoom using mouse wheel or two finger pinch.
- Pan using right mouse
- Reset the view with the R key
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.