gfxfundamentals /webgl-fundamentals

WebGL lessons that start with the basics

★ 5,029⑂ 686👁 99⑃ 321● 116▤ 0
HTMLCreated 2012-01-24webglfundamentals.org
5,029
stars
+0+1+7
686
forks
99
watchers
321
prs
116
issues
0
releases
–
discussions

README

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 as 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.

 Translating

Each translation goes in a folder under webgl/lessons/.

Required files are

    langinfo.hanson
    index.md
    toc.html

 langinfo.hanson

Defines various language specific options.
Hanson is a JSON like format but allows comments.

Current fields are

    {
      // The language (will show up in the language selection menu)
      language: 'English',

      // Phrase that appears under examples
      defaultExampleCaption: "click here to open in a separate window",

      // Title that appears on each page
      title: 'WebGL Fundamentals',

      // Basic description that appears on each page
      description: 'Learn WebGL from the ground up. No magic',

      // Link to the language root.
      link: 'https://webglfundamentals.org/webgl/lessons/ja',  // replace ja with country code

      // html that appears after the article and before the comments
      commentSectionHeader: 'Issue/Bug? Create an issue on github.',

      // markdown that appears for untranslated articles
      missing: "Sorry this article has not been translated yet. Translations Welcome! 😄\n\nHere's the original English article for now.",

      // the phrase "Table of Contents"
      toc: "Table of Contents",

      // translation of categories for table of contents
      categoryMapping: {
        'fundamentals': "Fundamentals",
        'image-processing': "Image Processing",
        'matrices': "2D translation, rotation, scale, matrix math",
        '3d': "3D",
        'lighting': "Lighting",
        'organization': "Structure and Organization",
        'geometry': "Geometry",
        'textures': "Textures",
        'rendertargets': "Rendering To A Texture",
        '2d': "2D",
        'text': "Text",
        'misc': "Misc",
        'reference': "Reference",
      },

    }

 index.md

This is the template for the main 

Snapshot: 2026-11-04T14:00:00Z · Data license Apache-2.0 · JSON