Get a 50% discount when you buy 2 courses or more!
NEW Pre order Practical WebGL from scratch for frontend developers By Georgi Nikoloff
This offer ends:
$100 $35
Practical WebGL from scratch for frontend developers
English English, Spanish, French (+3) [Machine translation]
7 Hours 30 Mins Course

Practical WebGL from scratch for frontend developers

Pre order $100 $35

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.

Pre-order. This special price is available as you are buying the course in advance. The course will be available by the end of December. The price will increase as we get closer to the date and once it’s online it will be full price - so register now for a big discount.

(*) The times of the chapters as well as the total duration of the course are approximate and may have some variation

The subtitles are automatically generated, so the quality of the captions may vary.
Course Table of contents
What will you learn?

9 sections • 27 lectures • 7 hours 30 mins

  • Intro
    2 lectures 12:00 Mins
    • Welcome
      02:00 Mins
    • Brief history of WebGL and web graphics
      10:00 Mins
  • WebGL drawing fundamentals
    7 lectures 3 Hours 20 Mins
    • Structure of a WebGL program and the rendering pipeline
      30:00 Mins
    • Drawing a single point
      1 Hour
    • Adding more points with mouse clicks
      20:00 Mins
    • Drawing lines
      20:00 Mins
    • The WebGL coordinate system
      20:00 Mins
    • Drawing triangles
      20:00 Mins
    • Colors
      30:00 Mins
  • WebGL Textures
    2 lectures 45:00 Mins
    • From images
      25:00 Mins
    • Dynamically created via a <canvas /> element
      20:00 Mins
  • Moving, rotating and scaling
    5 lectures 1 Hour 5 Mins
    • Translation
      25:00 Mins
    • Rotation
      05:00 Mins
    • Scaling
      05:00 Mins
    • Combining multiple transformations
      15:00 Mins
    • Basic animation
      15:00 Mins
  • Building a WebGL slider
    3 lectures 50:00 Mins
    • Bootstrapping the app
      20:00 Mins
    • Passing images as a texture array to WebGL
      15:00 Mins
    • Writing the transitions using GLSL
      15:00 Mins
  • Building an image scroll effect
    3 lectures 40:00 Mins
    • Bootstrapping the app
      15:00 Mins
    • Load the image and pass it to WebGL
      05:00 Mins
    • Generate dynamic texture coordinates based on scroll
      20:00 Mins
  • Building a camera effect
    2 lectures 25:00 Mins
    • Getting camera video feed in WebGL
      10:00 Mins
    • Applying shaders to our camera feed
      15:00 Mins
  • Particles animation
    2 lectures 30:00 Mins
    • Bootstrapping the app
      15:00 Mins
    • Writing the animation logic in our vertex shader
      15:00 Mins
  • Conclusion
    1 lectures 05:00 Mins
    • Conclusion
      05.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

$35 65% off $100

This offer ends:

  • 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