Learn GLSL Shaders from Scratch

Bring your WebGL alive with custom shaders

4.34 (765 reviews)
Udemy
platform
English
language
Web Development
category
instructor
4,400
students
4.5 hours
content
Mar 2024
last update
$84.99
regular price

What you will learn

Learn to use GLSL to create great shaders.

Create great image manipulating shaders for cool website effects.

Learn to combine your shaders with lighting effects.

Learn how to create explosions and fire shaders.

Learn how to create procedural textures.

Learn to create HUD displays for real-time 3d applications.

Learn how we can use shaders to manipulate the geometry of a model

Description

In this course we're going to look at GLSL ( OpenGL Shading Language) to create amazing effects.

Maybe you are

  • a designer who has seen some terrific, cutting edge websites using cool transitions and wondered how it was done. You may have heard about WebGL and know that you can use some simple THREE.js code to do some remarkable things.

  • a developer trying to visualise some data in a striking way.

  • a game developer wanting to add some custom effects to your 3d objects surfaces.

GLSL is how you can use OpenGL to display a surface. The code syntax is based on the C language, but fear not, we will assume you have literally no knowledge of this language at all and we will, as the course title states, learn this from scratch. GLSL uses the GPU ( the Graphics Processing Unit) to handle multiple programs at the same time, so it is unbelievably fast.

In the course we will be writing code for the browser, because this allows us to focus on GLSL, without needing to worry about installing any additional software. We will be using the THREE.js WebGL library and CodePen so you can instantly edit the source and see the results, needing nothing other than a browser to experiment. Only a small amount of Javascript is used but this will be explained thoroughly as it comes along. But you can also use what you learn about GLSL in a C/C++/C# program or a Python program.

We will start from really simple examples and progress slowly through each stage of developing a custom shader. You will be able to play with the shader code on CodePen, so you can experiment with different values to see the impact it has on the end result.

GLSL shaders are split into vertex shaders and fragment shaders and we will focus initially on the fragment shader, working essentially in a 2d environment. With dozens of shaders in the course resources you will learn the language in gentle stages.

Creating your own shaders means understanding the GLSL language and that is the aim of the course. You could search for a suitable shader on ShaderToy, ShaderFrog or glslViewer and then try to adapt the code. But without knowing the language you're going to find that difficult to do. To really be effective you need to know about the GLSL language, shaping functions, tiling, polar coordinates and lighting calculations. To do this you will need to follow along with the course and complete the many challenges suggested. At the end you will then be able to create any shader that you can imagine.

As usual there is a 30 day money back guarantee. So you have nothing to lose. Let's get shading today!


What students say

"I came here interested in making a custom lighting shader on an obj model, and I really found answers to my questions and more. The two faced aspect of the lessons and the CodePen sketches [are] great. I thank you !"

"A great course! Methodical, step by step explanations not only of the GLSL but also of the general theory behind shaders, usable with any shader system. Essential if you are into computer graphics or generative art. Thank you!"

"I've tried to pick up shaders in the past but found it quite difficult. Unlike other resources I've found, this course was the course that finally helped me get a much better grasp of glsl. It is well structured and very informative. I would recommend it to anyone looking to pick up glsl."

"This is exactly what I needed. I am a web designer/developer with design background and a good a good deal of javascript experience I'm trying to get into 3D visualizations for web. Since GLSL is written in C language it had been a huge barrier. I totally recommend this course to anyone having problems to get a clear understanding of GLSL."

"So far this course has been really amazing. Very few courses on shaders really take the time to explain the math behind what's happening in a way that let's "non-math" folk develop an intuition for it. Great job!"

"I was always intimidated by the idea of GLSL, even though I'm an advanced front-end developer. I've always been terrible at math; and yet Nik's style of teaching made me understand everything very intuitively and I'm so comfortable with shaders now. I've bought 60+ courses on Udemy; and I quit most of them after a couple videos. This one has me hooked on my chair until I finish everything! Coding along to this course is fun and Nik's challenges feel very rewarding to either solve or understand through his crystal clear explanation!"

"This is a perfect course for anyone wanting to learn about GLSL in a gradual manner. The instructor makes sure to spend enough time in the basic functions of GLSL, so students can get a proper understanding before moving on to the next concept. I had found GLSL a bit daunting in the past because examples would get out of hand very quickly, so I really appreciate this course's approach."

"Another master piece of Mr. Lever. He is an incredible instructor and deep understanding of the math behind computer graphics. A must watch even if you are already an experienced CG programmer."

Content

Introduction

Welcome to the course
Introduction
Parallel Processing

First steps

GLSL is not Javascript
Using THREE.js as your development platform
Your first shader
The vec class
Changing the color using the mouse
Changing color with time
Blending colors
Uniforms and varyings
Using clamp
Using step and smoothstep
What have you learned?

Shaping functions

Drawing a circle
Drawing a square
Moving our shape
Moving the shape over time
Rotating the shape
Changing the rotation centre
Tiling
Drawing circles
Drawing lines
Combining elements
Showing a polygon
A brick pattern
What have you learned?

Noise

What's all that noise?
Using noise to create a fire shader
Using noise to create wood and marble
What have you learned?

Using textures

A simple use of a texture image
Ripple the image
Blend between images
Create a texture from text
What have you learned?

Vertex shaders

Turning a box into a sphere
Using the THREE.js lighting chunks
Creating an explosion
What have you learned?

Lighting

Fresnel shading
Environment mapping
Bump mapping
What have you learned?

Conclusion

Conclusion
Bonus Lecture

Screenshots

Learn GLSL Shaders from Scratch - Screenshot_01Learn GLSL Shaders from Scratch - Screenshot_02Learn GLSL Shaders from Scratch - Screenshot_03Learn GLSL Shaders from Scratch - Screenshot_04

Reviews

Gustavo
November 12, 2023
Another master piece of Mr. Lever. He is an incredible instructor and deep understanding of the math behind computer graphics. A must watch even if you are already an experienced CG programmer.
Markus
September 22, 2023
For now I really like the tone and humour struck throughout the course and how the tutor tries to accompany a bigger crowd with assuming a certain skill-level. It seems a little bit all over the place in referencing similarities to some languages or could be a bit more detailled (also refer to the OOP-similarities in general), but like it so far!
Philip
September 6, 2023
The course does give a good introduction to the subject of GLSL shaders and has a lot of useful information in it. However, there are a few shortcomings: 1) The version of GLSL used in the course appears to be quite old, so the course could do with updating. 2) Three.js comes with its own set of issues, to the point that certain versions just don't seem to work. 3) Some of the examples later in the course don't appear to have code available in the downloads. 4) From about the middle of the course, things feel a little rushed and not so well explained. 5) For some reason, in the last couple of lessons, a musical soundtrack has been added, which is distracting. But on the whole, the course gave me what I was looking for, and I feel that I have picked up quite a bit of useful knowledge.
Samuel
August 25, 2023
Awesome course, invites you to repeat learned chapters by asking you to solve problems that will help you to actual understand whats happening and you will be able to adapt the learned stuff to your own needs. The chapters are split up in perfect chunks to learn in a good pace. Thank you Nik!
Carola
July 22, 2023
I really enjoyed this course, the teacher makes an intricated topic like shaders accessible to everyone who is willing to follow along.
Stephen
April 6, 2023
Excellent introduction - clear explanations and a resource you can return to frequently to revisit key concepts. I've already been able to successfully create custom shaders as a result of watching this. I love that the course introduces a good number of fundamental shader concepts and techniques in such an efficient way. (I think it would be helpful to add an overview of how to wire-up custom shader logic to three.js. While the course isn't three.js specific, the library is used throughout, and you really need to know the different ways of 'wiring up' your own custom shader logic without jettisoning all the built-in behaviour of three.js itself - i.e. expand on use of three.js Shader Chunks, and use of `onBeforeCompile` to selectively modify materials)
Leonid
March 9, 2023
In Lesson 35. Using the THREE.js lighting chunks I'm getting error "Can not resolve #include <lights_lambert_vertex>"
Matt
February 11, 2023
I've been developing some simulation and virtualization apps using Three.js and other 3D rendering frameworks. I've reached a point where I needed to be able to interpret, or even create, custom shaders. This course, so far, is providing exactly what I need.
Line
August 29, 2022
This is a really good course that gives you a good basic idea of what shaders can do. Really great examples and a thorough walkthrough of the provided examples. The only thing I was missing would be some more small assignments where you could dive deeper down into the material through the the different chapters.
Taemin
July 7, 2022
I'm not an English speaker, but it was really easy to understand because you explained it slowly and kindly. And most of all, the topics are super essential.
Joey
June 29, 2022
Information provided in the video was consistently out of date and instructions could not be followed to achieve the same results. While the instructor was responsive when I posted comments expressing that the instructions could not be followed (as the instructions resulted in error messages on my mac, etc), it is frustrating that this same issue happened on more than one occasion. As a paying customer for this course, I do not expect to be doing free QA testing for the instructor, which is essentially what I was doing by posting when the videos were out of date. The videos should be proactively updated by the instructor in order for this course to be worth anyone's time and money.
Aleksandr
June 23, 2022
I got basic understanding of how shaders works Threejs part was most interesting for me, and now i know how to use my own custom shaders in Threejs apps Thank you!
Valentin
June 10, 2022
I like the way Nik presents the fundamentals. Other tutorials and articles I've tried have done a good job with the high level concepts and applications, but I was unable to get started with GLSL. With this course I can actually start building some experience - albeit basic, but still experience - with GLSL shaders.
Gabriel
May 30, 2022
The lesson is interesting, but the teacher explains quite fast and not everytime with a plan. Thus, that's often hard to understand which variable do what.
Jordan
May 26, 2022
Lots of great information here! More than enough to jump into some creative possibilities. I may not have completely absorbed everything on the first go, but there was more than enough to sink my teeth into and get started with shaders, and better understand shader code I come across. Playing around with the codepen examples and adding my own adjustments really helped me understand the concepts. I highly recommend experimenting and taking your time with the material. I suspect I could do the second half of the course again after a few months of playing with shaders and learn a lot that I missed the first time. However, I do think that the some of the sections typing long sections of code before explaining them were challenging, as it can sound like a bunch of intimidating calculations without the context that generally comes later. Sometimes the 'code first ask questions later' method worked great, and sometimes it might have been nice to get some of the concepts up front. However, it's always possible to rewind and watch previous parts after the explanations (and I did), so not a huge deal. It's not the easiest material but I managed to understand most things even with my fairly weak math background. I had to stop and look things up occasionally, but he can't be expected to explain everything from scratch. All things considered though, it was a great course, and has a lot of future value as a resource. I've been wanting to learn shaders for years and finally I feel like I know a bit! Thanks!

Charts

Price

Learn GLSL Shaders from Scratch - Price chart

Rating

Learn GLSL Shaders from Scratch - Ratings chart

Enrollment distribution

Learn GLSL Shaders from Scratch - Distribution chart

Related Topics

2230522
udemy ID
2/20/2019
course created date
11/22/2019
course indexed date
Bot
course submited by