What is this about?
WebGL1 and WebGL2 are 3D graphics APIs available in most browsers. They are both abstraction of OpenGL, an open source graphics API for desktops. This series focuses on WebGL2, and doesn't talk about the original WebGL1. Just know that WebGL1 and WebGL2 abstract away different versions of OpenGL
More on WebGL2
WebGL2 is built directly on top of OpenGL ES 3.0 which was released in 2012. WebGL2 launched in 2017. The ES means that it is a specific OpenGL API that is meant for embedded systems like consoles, phones, TVs, web browsers, etc.
NOTE: WebGL2 will be referred to as just WebGL going forward.
Why make this?
There are really good resources for WebGL but not a lot of resources for building a 3D renderer in TypeScript. I want to share what I have learned about this topic in one series of posts with the goal of taking a frontend developer from knowing nothing about WebGL to being set up to learn about libraries like ThreeJS.
What are the requirements?
The ideal reader will be familiar with TypeScript with some frontend development knowledge. This series doesn't teach anything specific to TypeScript or frontend.
How will it be structured
The series will be broken down into sections covering a major system for our renderer and each section will be covered across multiple posts. For each section you can expect it to include the steps to building the renderer as well as steps to build a section-long project to help solidify your understanding.
Main Project
The main project will be a renderer that has a similar API to ThreeJS, built completely on top of WebGL.
List of Sections
Wrapping WebGL - Learn about the basics of WebGL as we dive into the API and start to build helper classes to wrap the WebGL API calls.
Main Project: By the end of the section we will have created a collection of classes to interact with WebGL for our renderer.
Section Project: Along the way we will build a rasterizer to better learn what the graphics card is actually doing.
Going 3D - This is where we introduce cameras. Learn about orthographic and perspective cameras and how we can create a modular camera system that allows for us to extend how we interact with the camera. This section will also start to talk about lighting and materials and we introduce a simple Phong material. This section will also look at generating some simple meshes procedurally.
Main Project - We will create the camera system which will allow for us to controller our cameras in different ways. We will also be added a math library and talking about vectors, matrices and quaternions a little bit.
Section Project - We will implement a couple of different camera controllers and utilize our Phong shaders to create a simple game with what we have so far.
Lighting and Materials - This is a shader heavy section. The first topic is lighting, from different types of lights to rendering multiple lights of a single kind, to how we could render multiples types and amounts of lights. The next part is about wrangling rendering data for an object: textures, colors, opacity, etc. into a material class. The last part touches on how we can create a build process for our shaders to allow for a more robust lighting setup.
Main Project - By the end, we will have a variety of lights, a light system, materials and a material system. The material system will handle loading and keeping track of textures, and making sure there is a default texture.
Section Project - The section project will be building a shader build system to allow for a dynamic lighting system.
Mesh Geometry - Learn about how to abstract our vertex data into a geometry object and extend the WebGL wrapper classes to include an instanced VAO along with an instanced geometry implementation. This will introduce instanced rendering and managing a buffer by hand. It will also introduce the GLTF format and a parser.
Main Project - Add the mesh system into the renderer library along with instanced meshes. We will also add a GLTF parser and talk about the GLTF format.
Section Project - Create a spaceship game where the player is in an asteroid field flying around. You can shoot the asteroids and they break into smaller chunks until they cant get smaller (asteroids, but 3d).
Shadows - This section will show how to add different types of shadows. We will implement and abstract directional shadows, point-shadows and cascaded shadows.
Main Project - Create a shadow system where objects can casts and/or receive shadows. Utilize framebuffers to generate shadow maps. Integrate shadows into the existing materials
Section Project - TBD
Scene Management - Learn about scene graphs, transformation trees, as well as saving/loading scenes. We will work on loading a full scene from a GLTF and then serializing it into a scene file, then loading and rendering that scene file.
Main Project - We will create the Scene class, build the GLTF-to-scene converter and then look at serializing and deserializing it.
Section Project - We will convert a large GLTF scene to our scene format, then load it up and explore it with our first-person camera.
Post Processing - Learn a little bit about the world of creating post-processed effects and image manipulation. We will go
Main Project - Build out a render-graph type pipeline where we build render stages made up a frame buffer and a series of inputs (meshes, textures, uniforms) and outputs (textures) that can be chained together.
Section Project - We will build a scene renderer for the scene we loaded last section, but this time we will use deferred lighting, and add some post processing after the render.
Putting it all Together - We start to put all the pieces together and build the full renderer
Main Project - Start the renderer class.
Section Project - No more section projects
Wrapping up the Renderer - Wrap up the renderer
Main Project - Finish up the renderer
Section Project - No more section projects