Practical WebGL from scratch for frontend developers

Name: Practical WebGL from scratch for frontend developers
Author: Georgi Nikoloff

By Georgi Nikoloff

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

Chapters

Duration
Lesson 1

Intro

2

05:48 Mins

View more
- Welcome
  
  01:30 Mins
- Brief history of WebGL and web graphics
  
  04:18 Mins
Lesson 2

WebGL drawing fundamentals

7

2 Hours 56 Mins

View more
- 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
Lesson 3

WebGL Textures

3

1 Hour 45 Mins

View more
- Texture from image
  
  1 Hour 10 Mins
- Texture from video
  
  24:00 Mins
- Texture from HTML5 canvas
  
  11:02 Mins
Lesson 4

Debugging WebGL Applications

1

05:45 Mins

View more
- Debugging WebGL Applications
  
  05:45 Mins
Lesson 5

Transformations

5

50:07 Mins

View more
- 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
Lesson 6

Building a WebGL slider

1

1 Hour 41 Mins

View more
- Building a WebGL slider
  
  1 Hour 41 Mins
Lesson 7

Building an image scroll effect

1

1 Hour 01 Mins

View more
- Building an image scroll effect
  
  1 Hour 01 Mins
Lesson 8

Building a camera effect

1

39:16 Mins

View more
- Building a camera effect
  
  39:16 Mins
Lesson 9

Particles animation

1

46:05 Mins

View more
- Particles animation
  
  46:05 Mins
Lesson 10

Conclusion

1

04:00 Mins

View more
- Conclusion
  
  04.00 Mins

Meet the teacher

Georgi Nikoloff

Frontend & Creative Developer

WebGPU Sketch Dojo

GPU Boxes

Hwoa-rang-gl

Georgi Nikolov

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