New season, New skills! All Courses at $9.99

Practical WebGL from scratch for frontend developers

  • Language: English
  • Certificate: of completion
  • Subtitles: English, Spanish, French, Japanese, Italian, Portuguese (Machine translation)
  • Duration: 9 Hours 55 Mins
Now
9.99$
/$100

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.

Category Course format Language Duration Level
Animation, Code Online English with Subt. 9 Hours 55 Mins Beginner & Intermediate

Description

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.

Requirements

This course is for beginner to intermediate frontend developers,

some basic JS knowledge is required.

You will learn

  • WebGL drawing fundamentals
  • Debugging WebGL Applications
  • WebGL Textures and Transformations
  • Work with camera, animations and particles
  • Create useful WebGL examples

The course includes

  • 9 Hours 55 Mins of condensed knowledge
  • Immediate access to the entire collection of videos
  • Valuable links and resources for every lesson
  • Downloabled files
  • Samples, exercises and demo code

Modules

What you will learn
in this course.

  • Lessons
  • Lesson 1
    Intro
    • Welcome
    • Brief history of WebGL and web graphics
  • Lesson 2
    WebGL drawing fundamentals
    • App boilerplate
    • Drawing a single point
    • The WebGL coordinate system
    • Adding more points with mouse clicks
    • Drawing lines
    • Drawing triangles
    • Drawing a quad
  • Lesson 3
    WebGL Textures
    • Texture from image
    • Texture from video
    • Texture from HTML5 canvas
  • Lesson 4
    Debugging WebGL Applications
    • Debugging WebGL Applications
  • Lesson 5
    Transformations
    • Translation
    • Translation with matrix
    • Scaling with matrix
    • Rotation with matrix
    • Combining matrices
  • Lesson 6
    Building a WebGL slider
    • Building a WebGL slider
  • Lesson 7
    Building an image scroll effect
    • Building an image scroll effect
  • Lesson 8
    Building a camera effect
    • Building a camera effect
  • Lesson 9
    Particles animation
    • Particles animation
  • Lesson 10
    Conclusion
    • Conclusion

Meet the teacher

Georgi Nikoloff

Frontend & Creative Developer

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.

Now
9.99$
/$100

Course Content

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.

Features

  • English
  • English, Spanish, French, Japanese, Italian, Portuguese (Machine translation)
  • Beginner & Intermediate
  • Access on mobile and Desktop
  • Full time access
  • Certificate of completion

If you have any questions about this course, please contact us

Start the course and upskill your professional toolkit.

Related courses

Find more courses
like this one.

Currently we have more courses for you View All Courses