Shaders for the Web

Name: Shaders for the Web
Price: 9 USD
Availability: InStock

16h 3m 4s

English

Paid

November 20, 2023

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.

Watch Online

Watch Online Shaders for the Web

0:00

#1: Intro to Slow Breaths

All Course Lessons (168)

#	Lesson Title	Duration
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?

Similar courses

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

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

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