Learn GLSL Shaders from Scratch
4.6 (163 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
881 students enrolled

Learn GLSL Shaders from Scratch

Bring your WebGL alive with custom shaders
Highest Rated
4.6 (163 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
881 students enrolled
Created by Nicholas Lever
Last updated 5/2020
English [Auto]
Current price: $12.99 Original price: $79.99 Discount: 84% off
30-Day Money-Back Guarantee
This course includes
  • 3.5 hours on-demand video
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll 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
Course content
Expand all 42 lectures 03:42:23
+ Introduction
3 lectures 08:57

A course overview.

Preview 03:51

An introduction to GLSL shaders.

Preview 03:06

A brief introduction to Parallel Processing.

Parallel Processing
+ First steps
10 lectures 01:02:22

This video is for students who know JavaScript and not GLSL. It introduces the key differences between the two languages.

GLSL is not Javascript

How to use the THREE.js library to setup a development environment for the course.

Using THREE.js as your development platform

Your first bit of GLSL code.

Preview 07:30

More information about the vec class

The vec class

Use the u_mouse and u_resolution uniforms to change the screen color as the mouse moves.

Changing the color using the mouse

Use the u_time uniform to change the screen color.

Changing color with time

Using the GLSL method mix to blend two color vectors.

Blending colors

Learn to use varyings to pass data from the vertex to the fragment shader

Uniforms and varyings

Using the GLSL method clamp to restrict a value between a minimum and maximum value.

Using clamp

Using the GLSL methods step and smoothstep.

Using step and smoothstep
What have you learned?
5 questions
+ Shaping functions
12 lectures 01:07:56

The simplest shaping function, drawing a circle.

Drawing a circle

Using the GLSL method step to draw a square.

Drawing a square

Moving away from a fixed center.

Moving our shape
Moving the shape over time
Rotating the shape
Changing the rotation centre
Drawing circles
Drawing lines
Combining elements
Showing a polygon
A brick pattern
What have you learned?
7 questions
+ Noise
3 lectures 13:03

An introduction to using noise to improve the realism of a shader.

What's all that noise?

Using layered noise, textures and alpha channels to create a 2d fire shader.

Using noise to create a fire shader
What have you learned?
6 questions
+ Using textures
4 lectures 24:51

Loading, displaying and rotating a texture in a GLSL shader.

A simple use of a texture image

We ripple the image over time using a little simple math to choose a different texel than the default.

Preview 05:07

Creating a soft edged circlular wipe between two images using some simple math and the GLSL function smoothstep.

Blend between images

Using the class CanvasText to create a texture from text, so that you can manipulate the result using GLSL code.

Create a texture from text
What have you learned?
5 questions
+ Vertex shaders
3 lectures 16:10
Using the THREE.js lighting chunks
Creating an explosion
What have you learned?
5 questions
+ Lighting
3 lectures 17:33

Create a bright rim light using some simple GLSL code

Fresnel shading

Make the surface super shiny using the GLSL function reflect and a CubeTexture

Environment mapping
Bump mapping
What have you learned?
5 questions
+ Post Processing
2 lectures 09:26
Using the post-processing shaders that come with THREE.js
Creating a custom post-processing shader
What have you learned?
3 questions
+ Conclusion
2 lectures 02:05

Links to useful online resource for developing GLSL shaders

Bonus Lecture
  • Only internet access is required.

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!"

Who this course is for:
  • Web developers looking to use the latest techniques to make stand out websites.
  • 3d developers needing to create their own shaders.