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

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Web security: Injection Attacks with Java & Spring Boot

Web security: Injection Attacks with Java & Spring Boot

Sources: udemy
Are you a Java web developer and want to write secure code? Do you want to learn Ethical hacking and Web application security? With this hands-on injection attacks course you w...
8 hours 44 minutes 36 seconds
Machine Learning in JavaScript with TensorFlow.js

Machine Learning in JavaScript with TensorFlow.js

Sources: udemy
Interested in using Machine Learning in JavaScript applications and websites? Then this course is for you! This is the tutorial you've been looking for to becom
6 hours 42 minutes 20 seconds
50 Projects In 50 Days - HTML, CSS & JavaScript

50 Projects In 50 Days - HTML, CSS & JavaScript

Sources: udemy, Brad Traversy
This is a purely project-based course. It is geared toward beginners, but intermediate developers can also enjoy creating new things. This course includes 50 mini projects in HT...
18 hours 13 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
Conquer JavaScript by Building Your Own Framework from Scratch

Conquer JavaScript by Building Your Own Framework from Scratch

Sources: zerotomastery.io
Understand how JavaScript works at a deeper level, enhance your JavaScript skills, and build an awesome portfolio project in this project-based course! Ever...
1 hour 18 minutes 15 seconds