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
Learn HTML Canvas - Pixels, Particles & Physicsudemy
Duration 2 hours 15 minutes 38 seconds
Course
50 Projects In 50 Days - HTML, CSS & JavaScriptudemyBrad Traversy
Duration 18 hours 13 minutes 45 seconds
Course
JavaScript: Understanding the Weird PartsudemyAnthony Alicea
Duration 12 hours 10 minutes 48 seconds
Course
Become a WordPress Developer: Unlocking Power With Codeudemy
Duration 41 hours 45 minutes 55 seconds
Course
Modern JavaScript From The Beginning 2.0Brad Traversy
Duration 36 hours 42 minutes 18 seconds
Course
Build fancy landing pages with React and ThreejsPaul Henschel (@0xca0a)
Duration 38 minutes 9 seconds
Course
SAAS Adventure - Learn to Create your own SAASsaasadventure.io
Duration 8 hours 37 minutes 3 seconds
Course
JavaScript Basics for Beginnerscodewithmosh (Mosh Hamedani)
Duration 6 hours 39 minutes 44 seconds
Course