Shaders for the Web
16h 3m 4s
English
Paid
November 20, 2023
Learn how to make OpenGL shaders using the programming language GLSL, and gain insight on how the top websites use hardware-enabled graphics.
More
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 Shaders for the Web
Join premium to watch
Go to premium
# | Title | Duration |
---|---|---|
1 | Intro to Slow Breaths | 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 |
Similar courses to Shaders for the Web
Advanced FrontEnds
Duration 8 hours 58 minutes 38 seconds
Course
Complete Web Developer in 2023: Zero to Mastery
Duration 35 hours 23 minutes 21 seconds
Course
Advanced JavaScript
Duration 3 hours 5 minutes 51 seconds
Course
Make a Spotify Clone from Scratch: JavaScript PHP and MySQL
Duration 14 hours 59 minutes 31 seconds
Course
Learn JavaScript Closures (PRO)
Duration 5 hours 15 minutes 31 seconds
Course
Make a Google search engine clone: JavaScript PHP and MySQL
Duration 5 hours 47 minutes 11 seconds
Course
JavaScript & LeetCode | The Ultimate Interview Bootcamp
Duration 4 hours 49 minutes 58 seconds
Course
Premium Javascript (Premium membership)
Duration 63 hours 55 minutes 37 seconds
Course
Create a 3D multi-player game using THREE.js and Socket.IO
Duration 2 hours 39 minutes 55 seconds
Course