alexxnica / webgl-fundamentals

WebGL lessons that start with the basics

WebGL Fundamentals

This is a series of lessons or tutorials about WebGL.

Unlike most WebGL lessons these are not based off of OpenGL. OpenGL is 20 years old. The lessons of OpenGL don't match well with WebGL. The APIs have changed too much. The ideas of OpenGL and OpenGL tutorials are out of date with WebGL, OpenGL ES 2.0 and the land of shaders.

I would argue that WebGL is actually a very simple API. What makes it appear complicated is the way in which it's used. The complications are added by the programmer. WebGL itself is simple.

These lessons try to show that simplicity and well as teach the fundamentals of 2D math and 3D math so readers can hopefully have an easier time writing their own WebGL programs and understanding the complexity that other programmers pile on top of simple WebGL.

This is work in progress. Feel free to contribute.

Contributing

Of course bug fixes are always welcome.

If you'd like to write a new article please try to always take one step at a time. Don't do 2 or more things in a single step. Explain any new math in the simplest terms possible. Ideally with diagrams where possible.

To build

The site is built into the out folder

Steps

git clone https://github.com/greggman/webgl-fundamentals.git
npm install
npm run build
npm start

now open your browser to http://localhost:8080

TO DO

A list of articles I'd like to write or see written

• lighting
  • spot lighting
  • normal maps
  • shadow maps
• text
  • pre-made glyph texture atlus
  • glyph cache
• post processing
  • how to render to a texture (scene on cube)
  • DOF
  • glow
  • light rays
  • RGB glitch, CRT distortion, scanlines
  • color mapping
• Creative coding
  • color palettes
  • indexed everything
  • tilemaps
• code organization
  • scene graph
    • putting lights and camera in scene graph
• Physically based rendering
• WebGL 2.0