Table of Contents

WebGLFundamentals.org

Fix, Fork, Contribute

WebGL 2D tilemaps

Sorry this article has not been translated yet. Translations Welcome! 😄

Here's the original English article for now.

Fundamentos

Fundamentals
How It Works
Shaders and GLSL
WebGL State Diagram

Tratamento de imagens

Image Processing
Image Processing Continued

2D: translação, rotação, escala, matriz matemática

2D Translation
2D Rotation
Escala 2D WebGL
2D Matrices

3D

Orthographic 3D
3D Perspective
3D Cameras

Iluminação

Directional Lighting
Point Lighting
Spot Lighting

Estrutura e Organização

Less Code, More Fun
Drawing Multiple Things
Scene Graphs

Geometria

Geometry - Lathe
Loading .obj files
Loading .obj w .mtl files

Texturas

Textures
Data Textures
WebGL - Usando duas ou mais texturas
Cross Origin Images
Perspective Correct Texture Mapping
Planar and Perspective Projection Mapping

Renderizando texturas

Render to Texture

Shadows

Shadows

Técnicas

2D

2D - DrawImage
2D - Matrix Stack
Sprites

3D

Cubemaps
Environment maps
Skyboxes
Skinning
Fog
Picking (clicking on stuff)

Texto

Text - HTML
Texto WebGL - Telas 2D
Text - Using a Texture
Text - Using a Glyph Texture

Texturas

Ramp Textures (Toon Shading)

GPGPU

GPGPU

Tips

Smallest Programs
Drawing Without Data
Shadertoy
Pulling Vertices

Optimization

Indexed Vertices (gl.drawElements)
Instanced Drawing

Diversos

WebGL - Setup e instalação
Boilerplate
Resizing the Canvas
WebGL - Animação
Points, Lines, and Triangles
Multiple Views, Multiple Canvases
Visualizing the Camera
WebGL e canal Alpha
2D vs 3D libraries
Anti-Patterns
WebGL Matrices vs Math Matrices
Precision Issues
Taking a screenshot
Prevent the Canvas Being Cleared
Get Keyboard Input From a Canvas
Use WebGL as Background in HTML
Cross Platform Issues
Questions and Answers

Reference

Attributes
Texture Units
Framebuffers
readPixels
References

Ajudante de API dos DOCs
TWGL, uma pequena biblioteca ajudante do WebGL
github