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.
Demonstrates a minimal example of a triangle using shaders, with all code in one file. No user input.
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.
Demonstrates a textured triangle, using SDL to load an image from a file.
Demonstrates TrueType text, using SDL to render a string into a texture and apply it to a quad.
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.
Demonstrates a checkberboard background texture created from an in-memory pixel array.
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
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.
These demos require OS-dependent stuff (keyboard, mouse, touch, text, audio, networking, etc.). SDL provides a cross-platform library to access this.
WebGL provides GPU-accelerated graphics in the browser, and OpenGLES is the subset of OpenGL which most closely matches WebGL.