Source code available here

Built with

Hey 👋

Welcome to the last day of WebGL month.
This article won't cover any new topics, but rather summarize previous 30 days

Previuos tutorials:

Day 1. Intro

This article doesn't cover any WebGL topics, but rather explains what WebGL does under the hood. TL;DR: it calculates colors of each pixel it has to draw

Day 2. Shaders and points

Introduction to WebGL API and GLSL shaders with the simpliest possible primitive type – point

Day 3. Shader uniforms, lines and triangles

This article covers more ways of passing data to shaders and uses more complex primitives to render

Day 4. Shader varying

Passing data from vertex to fragment shader with varyings

Day 5. Interleaved buffers

Alternative ways of storing and passing vertex data to shaders

Day 6. Indexed buffer

A technique which helps reduce number of duplicate vertices

Day 7. Cleanup and tooling

WebGL is fun, but it requires a bit of tooling when your project grows. Luckily we have awesome tools like webpack

Day 8. Textures

Intro to textures

Day 9. Image filters

Taking advantage of fragment shader to implement simple image "filters" (inverse, black and white, sepia)

Day 10. Multiple textures

How to use multiple textures in a single webgl program

Day 11. Reducing WebGL boilerplate

Implementation of some utility classes and functions to reduce WebGL boilerplate

Day 12. Highdpi displays and WebGL viewport

How to handle retina displays with canvas and use webgl viewport

Day 13. Simple animation

All previous examples where static images, this article will add some motion to the scene

Day 14. Intro to 3D

Theory of 3D compuatations required for 3D rendering. No code

Day 15. Rendering a cube

3D theory applied on practice to render 3D cube

Day 16. Depth buffer. Cube faces colors

This article contains fixes for previous example and adds more colors

Day 17. OBJ format

Implementing simple parser for OBJ format

Day 18. Flat shading

Implementation of flat shading

Day 19. Rendering multiple objects

A typical 3D scene consists of multiple objects, this tutorial will teach you how to render more than 1 object

Day 20. Rendering a minecraft dirt cube

Texturing 3D object with Blender and WebGL

Day 21. Rendering a minecraft terrain

We've learned how to render multiple objects. How to render 10000 of objects?

Day 22. Reducing number of webgl calls by 5000 times

Previous example worked, but wasn't really performance. This article explains instancing (a technique which helps to improve performance when rendering a large amount of same objects)

Day 23. Skynox

Adding "environment" to the scene

Day 24. Combining terrain and skybox

How to use multiple WebGL programs together

Day 25. Mipmaps

A technique which improves performance of shaders reading data from textures

Day 26. Rendering to texture

Rendering to texture allows to apply some "post-effects" and might be used for a variety of use-cases

Day 27. Click detection. Part I

Day 28. Click detection. Part II

Detecting object under the cursor might seem a tough task, but it might be done without complex 3d math in JS

Day 29. Fog

Improving scene with fog

Day 30. Text rendering in WebGL

An overview of text rendering techniques in WebGL

Useful links

I've started working with WebGL only a year and a half ago. My WebGL journey started with an awesome resource – https://webglfundamentals.org/

One more important thing to understand: WebGL is just a wrapper of OpenGL, so almost everything from OpenGL tutorials might be used in WebGL as well: https://learnopengl.com/

Exploring more glsl stuff: https://thebookofshaders.com/

Codepen for shaders: https://www.shadertoy.com/

Getting started with WebGL tutorial on MDN

Thanks!

Thanks for joining WebGL month. Hope this articles helped you learn WebGL! 😉
Feel free to submit questions, suggestions, improvements to github repo, get in touch with me via email or twitter