Shaders for the Web

16h 3m 4s
English
Paid

Course description

Learn how to make OpenGL shaders using the programming language GLSL, and gain insight on how the top websites use hardware-enabled graphics.

Read more about the course

Get to know one of the most cutting-edge parts of the web right now: OpenGL shaders. The top websites are using them in their web designs but most sites aren’t due to the lack of understanding about how to use them.

In this course, we’ll show you how to make shaders from scratch using the programming language, GLSL, along with everything you need to know about uniforms, vertex and fragments, and then how to apply them to both 2D and 3D projects on the web.

  • What a shader is exactly and how to write GLSL code
  • What uniforms, vertex and fragment shaders are
  • How to apply GLSL code to the web using GlslCanvas and Three.js
  • How to connect web events like mouse movement and scroll to our shader code using Javascript
  • Quick mathematical techniques for producing stunning graphics
  • How to use procedural noise and randomness to create changeable graphics

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 168 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online Shaders for the Web

0:00
/
#1: Intro to Slow Breaths

All Course Lessons (168)

#Lesson TitleDurationAccess
1
Intro to Slow Breaths Demo
02:12
2
What exactly is a shader?
08:32
3
How to mix colors
09:38
4
Mixing gradients together
04:06
5
Adding movement with the time uniform
06:36
6
Putting in correct colors
06:26
7
Adding a texture to our shader
07:26
8
Sampling points using texture2D
05:45
9
Using a displacement texture
06:47
10
Cleaning up our shader, ready for the web!
03:04
11
Setting up our website
08:31
12
Adding GlslCanvas
07:55
13
Adding our KodeLife code
04:14
14
Welcome to Kaleidoscope!
01:28
15
Sampling the texture
06:25
16
Resampling texture points using radius and angle
04:57
17
Altering the sample angle
07:54
18
Cleaning up our code for GlslCanvas
04:11
19
Setting up our website
07:31
20
Adding a texture
06:39
21
Stopping canvas pixelation
05:48
22
Fixing canvas size on browser resize
02:21
23
Adding mouse movement
03:54
24
Changing the texture in a slideshow
06:00
25
Welcome to Alice McCloud
01:26
26
What are step and smoothstep?
10:42
27
Randomness in GLSL
09:44
28
From randomness to noise
08:14
29
Fractional Brownian motion
06:16
30
Moving our FBM pattern
02:31
31
Using step and smoothstep to control the mix
04:32
32
Adding grain using random
02:16
33
Adding movement with time and rotation
03:44
34
HSV to RGB
07:13
35
Making our code ready for GlslCanvas
02:36
36
Setting up our website
07:40
37
Loading a fragment shader
06:25
38
Sizing our canvas
03:46
39
Adding mouse movement
10:47
40
How to add a random seed uniform
04:52
41
Welcome to Arabella
01:35
42
Adding a texture
04:41
43
How to keep the aspect ratio
08:30
44
Keeping the aspect ratio anchored to the center
06:24
45
Adding distortion
05:36
46
Making a wave with distortion
03:27
47
Distortion variations
03:52
48
Making a safe area
03:03
49
Grouping distortion into blocks
03:58
50
Adding mouse movement
04:03
51
Creating our website
10:12
52
Setting up multiple canvases
08:32
53
Adding our KodeLife code
05:28
54
Adding a random seed
02:25
55
Welcome to Neon Nights
01:17
56
Adding color shift
09:35
57
Adding a wave distortion pattern
04:18
58
Sampling colors within bounds
06:20
59
Sampling with gl_FragCoord
07:10
60
Rotating our distortion
02:13
61
Adding grain to our distortion
01:51
62
Adding a strength uniform
02:23
63
Creating our website
11:17
64
Adding and styling a canvas tag
04:06
65
Replacing images with canvas tags
05:44
66
Loading our sandbox
05:00
67
Adding our fragment shader
06:37
68
Making the shader retina-friendly
04:45
69
Changing the strength with IntersectionObserver
11:03
70
Variations on the strength uniform
02:10
71
Welcome to Hi Records
02:47
72
Making a circle with step and smoothstep
10:34
73
Mixing colors using steps
06:58
74
Animating our gradient
06:56
75
Adding record ridges
05:31
76
Variations on outerDist
02:30
77
Adding grain to our gradient
03:16
78
Adding color palettes with arrays
05:20
79
Adding a scroll uniform to pick palettes
02:47
80
Blending color palettes
04:22
81
How to pick from an array using WebGL
08:58
82
Making the shader ready for the web
03:21
83
Making our website
13:08
84
Adding Javascript
06:15
85
Adding scroll and color uniforms
07:01
86
Welcome to The Art of Posing
01:25
87
Resampling uv to start in the center
07:14
88
Adding a distortion wave
02:13
89
Adding noise and FBM to distortion
05:57
90
Adding a strength and timeline uniform
05:29
91
Adding a transition between textures
04:23
92
Adding a wave-based transition
04:13
93
Setting up multiple textures
08:05
94
Getting ready for the web
02:19
95
HTML and CSS setup
08:24
96
Setting up a slideshow in Javascript
12:05
97
Adding our canvas
07:57
98
Updating our fragment for a list of projects
07:43
99
Changing our GLSL code to fit the slideshow
07:10
100
Adding the startIndex, endIndex and timeline uniforms
08:31
101
Welcome to Jellyfish
01:12
102
How to do 3D in KodeLife
04:48
103
Setting up a scene in Three.js
05:27
104
Setting a background and geometry
10:04
105
Setting up a ShaderMaterial in Three.js
06:52
106
Adding a vertex shader
07:07
107
Adding a time uniform
04:58
108
Adding a texture uniform
06:13
109
Ambient lighting
07:46
110
Diffuse lighting
07:28
111
Specular lighting
08:13
112
Adding multiple lights
04:57
113
Texture cubes
07:03
114
Rotating vertices in the vertex shader
08:52
115
Making the jellyfish
04:39
116
Adding a camera zoom on load
05:18
117
Updating the renderer on window resize
04:57
118
Variation: convex to concave
02:46
119
Variation: bubble refraction
06:28
120
Variation: Making a thin film interference bubble
06:13
121
Using variations in the final project
02:07
122
Welcome to Cryptoquartz
03:10
123
HTML + CSS setup
07:57
124
Adding a scene with Three.js
02:29
125
Adding a sphere geometry
04:53
126
Setting up vertex and fragment shaders
05:46
127
Changing the vertex shaders
04:06
128
Adding FBM to our vertices
03:42
129
Adding time and seed uniforms
04:25
130
Adding slider uniforms
10:55
131
Adding color based on varyings
06:25
132
Ambient and diffuse lighting
07:03
133
Adding a struct
05:56
134
Adding in sliders for lighting
04:01
135
Adding in new normals with dFdx and dFdy
07:05
136
Changing to HSV colors
07:32
137
Mixing two colors
04:56
138
Creating some noise
05:04
139
Adding saturation, brightness and gradient mix uniforms
06:54
140
Better blending with step and smoothstep
03:34
141
Adding rotation with vertex shaders
06:27
142
Window resizing
03:31
143
Click to download as an image
07:43
144
Adding mouse movement to the lighting
07:29
145
Welcome to Cloth Studios
02:09
146
HTML + CSS setup
11:55
147
Adding a Javascript counter
08:39
148
Updating content with a data structure
06:51
149
Adding a theme with CSS variables and Javascript
06:06
150
Adding a Three.js scene
05:20
151
Adding multiple planes
09:09
152
Rotating the camera position
05:56
153
Adding in a texture
03:01
154
Making a shader material
08:54
155
Adding ambient and diffuse lighting to our material
09:28
156
Updating the time for each material
03:28
157
Adding wind to our vertex shader
07:26
158
Visualizing wind by passing varyings
02:04
159
Adding in tension points and gravity
05:23
160
Updating our lighting
04:35
161
Adding a mouse object
06:28
162
Adding a raycaster to convert 2D to 3D points
08:17
163
Adding a mouse interaction depression
04:11
164
Adding a hover strength to mouse interaction
07:37
165
Updating on window resize
02:22
166
Adding a camera rotation on load
03:19
167
CSS animations on load
03:55
168
Thank you for taking our course!
00:29

Unlock unlimited learning

Get instant access to all 167 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Learn JavaScript: Full-Stack from Scratch

Learn JavaScript: Full-Stack from Scratch

Sources: udemy
Learn the incredibly popular and in demand JavaScript language. This course makes no assumptions of prior computer programming experience. We begin with the very basics and slow...
27 hours 6 minutes 45 seconds
Merging WebGL and HTML worlds

Merging WebGL and HTML worlds

Sources: awwwards.com
You’ve probably seen all those amazing awwwards websites with WebGL effects on their images. But what’s even more amazing, is when those images seem to be part of the HTML conte...
2 hours 30 minutes 37 seconds
React Three Fiber: The Ultimate Guide to 3D Web Developmen

React Three Fiber: The Ultimate Guide to 3D Web Developmen

Sources: Wawa Sensei
3D development is a vast field with many different techniques. This comprehensive guide will provide you with the necessary tools to get started and the...
9 hours 18 minutes 15 seconds
Data Structures & Algorithms - JavaScript

Data Structures & Algorithms - JavaScript

Sources: udemy
That means that you can actually learn more material in less time and have higher retention of the material. That is the key combination of factors to prepare y
6 hours 44 minutes