
Explore how matrices act as linear transformations, showing how a rotation matrix rotates 2d vectors by 90 degrees counterclockwise while preserving their magnitudes.
Explore how WebGL transforms objects from model space to world space via model, view, and projection matrices, projecting with perspective or orthographic projection and clipping to -1 to 1.
Learn how to locate the first attribute in a shader, and configure vertex data from buffers for position and color, including size, stride, and offset, to draw a triangle.
Rotate the cube in WebGL by applying transformations with matrices, using uniforms for shared data, and combining projection, view, and model matrices to drive the animation.
Explore how translating in the z direction moves a rotating cube away from the camera, and why the order of translation and rotation matters in a right-handed matrix pipeline.
Learn how textures map images onto 3d geometry with texture coordinates and interpolation, wrap textures around a cube, and manage texture buffers and image loading.
Learn to rotate a WebGL camera with keyboard controls by adjusting the camera target to change view direction and keep the viewing direction consistent as you move.
Learn how diffuse lighting in WebGL uses light direction and normals, via the dot product of light and normal, clamped with max(dot, 0) for per-vertex lighting and interpolation.
Transform normals with the model matrix, discarding translation, normalize the result, and compute ambient and diffuse lighting in the fragment shader; animate the light position and discuss non-uniform scaling.
This course covers the fundamentals of computer graphics programming using WebGL2. In the course, we will walk together in two complementary and interleaving tracks. The first track will cover the mathematical foundations of computer graphics. This will include illustrations, examples, and proofs. I do not require you to have strong mathematical background for this as I will illustrate almost everything you need. You only need to know simple basics such as matrices, vectors, dot products, and cross products. The second track will cover the conversion of these concepts into actual code implementation. In this track, you will learn how to manipulate your graphics card (GPU) to perform the required graphics calculations for you. You will learn how to write code that runs directly on the GPU (using GLSL ), and how to communicate with it using your code that runs on the CPU (using JavaScript). Again I do not require you to even know JavaScript although it certainly will help. I do require you, however, to have good knowledge of at least one programming language. Words like variables, arrays, functions, or objects must be familiar to you.
That said, those two tracks are not delivered one after the other. Instead, they are interleaved. I lay the theoretical and mathematical foundation for some concept, and then follow up by the practical implementation in code. Then repeat.
While this course focuses on graphics programming on the web, you will actually find this course equally useful if you wish to learn computer graphics fundamentals on any other platform, and you will be able to switch with minimum effort. WebGL is only a tool.
This course is a low-level programming course. You will send the required data to the GPU byte by byte. While this will not make you able to create the best game ever in 3 minutes, it will certainly help you gain deep knowledge that you will find extremely useful when you take the next step forwards, as you will actually know what really does happen behind the scene when you use a higher level library in your production code later.
If you encounter any problems of any kind during watching the course, please let me know instantly. I will be quite responsive, and my response will vary from answering in text, supplying more code examples and illustrative articles, to actually re-recording entire videos and supplementary content just for you!
This course is only the beginning. I will follow up with more advanced courses quite soon. Enjoy!