WebGL has been all the rage for years now when it comes to creative and immersive websites, as nearly every winning website on AWWWARDS uses it in some capacity. It has a lot to offer when it comes to rendering real time graphics, visualisations and interactive animations in the browser.
As it is based upon OpenGL, which by itself is heavily intertwined with video games and computer graphics, WebGL gives us fully fledged access to the GPU from Javascript and the ability to do advanced graphics programming with shaders right in the browser.
As it is quite low-level and more complicated than other web APIs, most frontend developers use it via some high level library that hides away all of the operations going under the hood. This in effect takes away power from them and forces them to rely on code other people wrote. The results are often bloated websites, loading entire 3D libraries for simple effects that can be done in a few hundreds lines of code.
If one understands how vanilla WebGL itself produces pixels on the screen, she will have a much easier time implementing all the cool, award winning effects with confidence and without relying on other people's code. Furthermore, knowing the internals will give any frontend developer an edge and an intro to any good web agency.
If fancy effects and slick graphics are your thing, join me in nerding about all things graphics programming related with this WebGL course.
This course is for beginner to intermediate frontend developers, some basic JS knowledge is required.
The subtitles are automatically generated, so the quality of the captions may vary.10 sections • 23 lectures • 9 hours 55 mins
-
Intro2 lectures 05:48 Mins
-
Welcome01:30 Mins
-
Brief history of WebGL and web graphics04:18 Mins
-
-
WebGL drawing fundamentals7 lectures 2 Hours 56 Mins
-
App boilerplate19:15 Mins
-
Drawing a single point1 Hour 03 Mins
-
The WebGL coordinate system03:30 Mins
-
Adding more points with mouse clicks36:37 Mins
-
Drawing lines22:33 Mins
-
Drawing triangles08:01 Mins
-
Drawing a quad23:35 Mins
-
-
WebGL Textures3 lectures 1 Hour 45 Mins
-
Texture from image1 Hour 10 Mins
-
Texture from video24:00 Mins
-
Texture from HTML5 canvas11:02 Mins
-
-
Debugging WebGL Applications1 lectures 05:45 Mins
-
Debugging WebGL Applications05:45 Mins
-
-
Transformations5 lectures 50:07 Mins
-
Translation12:50 Mins
-
Translation with matrix11:39 Mins
-
Scaling with matrix04:54 Mins
-
Rotation with matrix03:05 Mins
-
Combining matrices17:39 Mins
-
-
Building a WebGL slider1 lectures 1 Hour 41 Mins
-
Building a WebGL slider1 Hour 41 Mins
-
-
Building an image scroll effect1 lectures 1 Hour 01 Mins
-
Building an image scroll effect1 Hour 01 Mins
-
-
Building a camera effect1 lectures 39:16 Mins
-
Building a camera effect39:16 Mins
-
-
Particles animation1 lectures 46:05 Mins
-
Particles animation46:05 Mins
-
-
Conclusion1 lectures 04:00 Mins
-
Conclusion04.00 Mins
-
