Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Meditation Personal Transformation Life Purpose Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development OpenGL

Learn GLSL Shaders from Scratch

Bring your WebGL alive with custom shaders
Rating: 4.5 out of 54.5 (308 ratings)
1,521 students
Created by Nicholas Lever
Last updated 1/2021
English
English [Auto]
30-Day Money-Back Guarantee

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

9 sections • 42 lectures • 3h 42m total length

  • Preview03:51
  • Preview03:06
  • Parallel Processing
    02:00

  • GLSL is not Javascript
    07:00
  • Using THREE.js as your development platform
    07:54
  • Preview07:30
  • The vec class
    04:21
  • Changing the color using the mouse
    09:57
  • Changing color with time
    04:39
  • Blending colors
    05:51
  • Uniforms and varyings
    04:49
  • Using clamp
    06:02
  • Using step and smoothstep
    04:19
  • What have you learned?
    5 questions

  • Drawing a circle
    02:28
  • Drawing a square
    10:14
  • Moving our shape
    03:47
  • Moving the shape over time
    02:24
  • Rotating the shape
    07:38
  • Changing the rotation centre
    05:48
  • Tiling
    03:21
  • Drawing circles
    05:49
  • Drawing lines
    07:32
  • Combining elements
    08:44
  • Showing a polygon
    06:05
  • A brick pattern
    04:06
  • What have you learned?
    7 questions

  • What's all that noise?
    03:31
  • Using noise to create a fire shader
    05:19
  • Preview04:13
  • What have you learned?
    6 questions

  • A simple use of a texture image
    08:41
  • Preview05:07
  • Blend between images
    06:16
  • Create a texture from text
    04:47
  • What have you learned?
    5 questions

  • Preview06:05
  • Using the THREE.js lighting chunks
    03:57
  • Creating an explosion
    06:08
  • What have you learned?
    5 questions

  • Fresnel shading
    05:33
  • Environment mapping
    05:19
  • Bump mapping
    06:41
  • What have you learned?
    5 questions

  • Using the post-processing shaders that come with THREE.js
    05:42
  • Creating a custom post-processing shader
    03:44
  • What have you learned?
    3 questions

  • Conclusion
    01:17
  • Bonus Lecture
    00:48

Requirements

  • Only internet access is required.

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

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.

Featured review

Scott _
Scott _
48 courses
4 reviews
Rating: 5.0 out of 5a year ago
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.

Instructor

Nicholas Lever
Game developer
Nicholas Lever
  • 4.4 Instructor Rating
  • 1,244 Reviews
  • 6,991 Students
  • 9 Courses

After getting a degree in Graphic Design, I started work in 1980 as a cartoon animator. Buying a Sinclair ZX81 back in 1982 was the start of a migration to a full time programmer. The ZX81 was quickly swapped for the Sinclair Spectrum, a Z80 processor and a massive 48K of ram made this a much better computer to develop games. I developed a few games using Sinclair Basic and then Assembler. The Spectrum was swapped for a Commodore Amiga and I developed more games in the shareware market, moving to using C. At this stage it was essentially a hobby. Paid work was still animated commercials. 

I finally bought a PC in the early nineties and completed an Open University degree in Maths and Computing. I created a sprite library ActiveX control and authored my first book, aimed at getting designers into programming. In the mid nineties along came Flash and the company I was now running, Catalyst Pictures, became known for creating games. 

Since then the majority of my working life has been creating games, first in Flash and Director, as Director published the first widely available 3D library that would run in a browser using a plugin. 

In recent years game development has involved using HTML5 and Canvas. Using both custom code and various libraries. A particular preference is to use the latest version of Adobe Flash, now called Animate that exports to the Javascript library Createjs. 

I've worked for the BBC. Johnson and Johnson. Deloitte, Mars Corporation and many other blue chip clients. The company I've run for over 30 years has won a number of awards and been nominated for a BAFTA twice, the UK equivalent to the Oscar. 

Over the last 20 years I have been struck by just how difficult it has been to get good developers and have decided to do something about this rather than just complain. I run a CodeClub for kids 9-13 years old and I'm developing a number of courses for Udemy hoping to inspire and educate new developers. Most of my courses involve real-time 3d either using the popular Open Source library Three.JS or Unity. I'm currently having a lot of fun developing WebXR games and playing with my Oculus Quest.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.