Creative Days 75% off
NEW Special offer Practical WebGL from scratch for frontend developers By Georgi Nikoloff
Creative Days!
$100 $25
Practical WebGL from scratch for frontend developers
English English, Spanish, French (+3) [Machine translation]
9 Hours 55 Mins Course

Practical WebGL from scratch for frontend developers

Creative Days!     $100 $25

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.
Course Table of contents
What will you learn?

10 sections • 23 lectures • 9 hours 55 mins

  • Intro
    2 lectures 05:48 Mins
    • Welcome
      01:30 Mins
    • Brief history of WebGL and web graphics
      04:18 Mins
  • WebGL drawing fundamentals
    7 lectures 2 Hours 56 Mins
    • App boilerplate
      19:15 Mins
    • Drawing a single point
      1 Hour 03 Mins
    • The WebGL coordinate system
      03:30 Mins
    • Adding more points with mouse clicks
      36:37 Mins
    • Drawing lines
      22:33 Mins
    • Drawing triangles
      08:01 Mins
    • Drawing a quad
      23:35 Mins
  • WebGL Textures
    3 lectures 1 Hour 45 Mins
    • Texture from image
      1 Hour 10 Mins
    • Texture from video
      24:00 Mins
    • Texture from HTML5 canvas
      11:02 Mins
  • Debugging WebGL Applications
    1 lectures 05:45 Mins
    • Debugging WebGL Applications
      05:45 Mins
  • Transformations
    5 lectures 50:07 Mins
    • Translation
      12:50 Mins
    • Translation with matrix
      11:39 Mins
    • Scaling with matrix
      04:54 Mins
    • Rotation with matrix
      03:05 Mins
    • Combining matrices
      17:39 Mins
  • Building a WebGL slider
    1 lectures 1 Hour 41 Mins
    • Building a WebGL slider
      1 Hour 41 Mins
  • Building an image scroll effect
    1 lectures 1 Hour 01 Mins
    • Building an image scroll effect
      1 Hour 01 Mins
  • Building a camera effect
    1 lectures 39:16 Mins
    • Building a camera effect
      39:16 Mins
  • Particles animation
    1 lectures 46:05 Mins
    • Particles animation
      46:05 Mins
  • Conclusion
    1 lectures 04:00 Mins
    • Conclusion
      04.00 Mins
Georgi Nikoloff
Work Work Work 
Work Work Work 

Georgi is an exceptional programmer. He lives and breathes computer graphics, animation and building awesome things. When not on the lookout for the next amazing technology he loves to help others to excel and take you with you into the rabbit hole of creating graphics and animations from the ground up.
Matthias Wolff
Matthias Wolff Co-Founder and COO at Xymatic
Course details

Practical WebGL from scratch for frontend developers

Practical WebGL from scratch for frontend developers

By Georgi Nikoloff

$25 75% off $100

Creative Days

  • English
  • English, Spanish, French, Japanese, Italian, Portuguese (Machine translation)
  • Beginner & Intermediate
  • Access on mobile and Desktop
  • Full time access
  • Certificate of completion
About the Speaker
Learn from the best
  • Georgi Nikoloff

    Georgi Nikoloff

    Frontend & Creative Developer

    @georgiNikoloff

    I am a frontend developer living and working in Berlin. I specialize in developing rich user interfaces and graphics, such as websites, web apps, animations and visualizations.

    georgi-nikolov.com

Similar Courses