https://webgl2fundamentals.org/

[English             ]

WebGL2 Fundamentals rss

[English             ]

WebGL2 from the ground up. No magic.

These are a set of articles that teach WebGL2 from basic principles.
They are NOT old rehashed out of date OpenGL articles like many
others on the net. They are entirely new, discarding the old out of
date ideas and bringing you to a full understanding of what WebGL
really is and how it really works.

These articles are specifically about WebGL2. If you are interested
in WebGL 1.0 please go here. If you are already familar with WebGL1
you might want to look at these articles.

  * How to use WebGL2
  * What's new in WebGL2
  * Moving from WebGL1 to WebGL2
  * Differences from WebGLFundamentals.org to WebGL2Fundamentals.org

Table of Contents

  * Fundamentals
      + How to use WebGL2
      + Fundamentals
      + How It Works
      + Shaders and GLSL
      + WebGL2 State Diagram
  * WebGL2 vs WebGL1
      + What's new in WebGL2
      + Moving from WebGL1 to WebGL2
      + Differences from WebGLFundamentals.org to
        WebGL2Fundamentals.org
  * Image Processing
      + Image Processing
      + Image Processing Continued
  * 2D translation, rotation, scale, matrix math
      + 2D Translation
      + 2D Rotation
      + 2D Scale
      + 2D Matrices
  * 3D
      + Orthographic 3D
      + 3D Perspective
      + 3D - Cameras
      + 3D - Matrix Naming
  * Lighting
      + Directional Lighting
      + Point Lighting
      + Spot Lighting
  * Structure and Organization
      + Less Code, More Fun
      + Drawing Multiple Things
      + Scene Graphs
  * Geometry
      + 3D Geometry - Lathe
      + Loading .obj files
      + Loading .obj w .mtl files
  * Textures
      + Textures
      + Data Textures
      + Using 2 or More Textures
      + Cross Origin Images
      + Perspective Correct Texture Mapping
      + Planar and Perspective Projection Mapping
  * Rendering To A Texture
      + Render to Texture
  * Shadows
      + Shadows
  * Techniques
      + 2D
          o 2D - DrawImage
          o 2D - Matrix Stack
          o Sprites
      + 3D
          o Cubemaps
          o Environment maps
          o Skyboxes
          o Skinning
          o Fog
          o Picking (clicking on stuff)
      + Text
          o Text - HTML
          o Text - Canvas 2D
          o Text - Using a Texture
          o Text - Using a Glyph Texture
      + GPGPU
          o GPGPU
  * Tips
      + Smallest Programs
      + Drawing Without Data
      + Shadertoy
      + Pulling Vertices
  * Optimization
      + Indexed Vertices (gl.drawElements)
      + Instanced Drawing
  * Misc
      + Setup And Installation
      + Boilerplate
      + Resizing the Canvas
      + Animation
      + Points, Lines, and Triangles
      + Multiple Views, Multiple Canvases
      + Visualizing the Camera
      + WebGL2 and Alpha
      + 2D vs 3D libraries
      + Anti-Patterns
      + WebGL2 Matrices vs Math Matrices
      + Precision Issues
      + Taking a screenshot
      + Prevent the Canvas Being Cleared
      + Get Keyboard Input From a Canvas
      + Use WebGL2 as Background in HTML
      + Cross Platform Issues
      + Questions and Answers
  * Reference
      + Attributes
      + Texture Units
      + Framebuffers
      + readPixels
      + References

  * Helper API Docs
  * TWGL, A tiny WebGL helper library
  * github

Fix, Fork, Contribute