CF

Shaders for the Web

16h 3m 4s
English
Paid

Shaders for the Web is a 168-lesson 16 hours 3 minutes self-paced course by SuperHi. Learn how to make OpenGL shaders using the programming language GLSL, and gain insight on how the top websites use hardware-enabled graphics.

Course facts

Lessons
168
Duration
16 hours 3 minutes
Level
All levels
Language
English
Updated
Instructor
SuperHi
Price
Premium

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

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

Who teaches Shaders for the Web? SuperHi

SuperHi thumbnail

SuperHi was a creative technology online school founded in 2016 by Rik Lomas, focused on bringing design-school production values to coding education. The school operated until 2023, when its catalog was wound down and made available through other channels. Its course material remains some of the best work on the visual / creative end of front-end development.

The CourseFlix listing under this source reflects the SuperHi style: Page Transitions, Shaders for the Web (GLSL via Three.js for browser-native 3D effects), Data Visualization + D3.js, and Digital Project Management. The material is aimed at designers learning to code and at developers wanting to add depth on the visual / animated side of the web rather than yet another CRUD framework.

What lessons are included in Shaders for the Web?

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
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

What courses are similar to Shaders for the Web?

More courses by SuperHi

  • Digital Project Management thumbnailUpdated 2y ago

    Digital Project Management

    Smooth processes and happy human relationships are key to managing effectively. Learn better ways to work with complexity so you can run projects like a pro.
    17h 53m5/5
  • Data Visualization + D3.js thumbnailFreeUpdated 2y ago

    Data Visualization + D3.js

    Our Data Visualization course focuses on the practical aspects of working with data. In our 6-week long course, we’ll cover the basics of storytelling and worki
    16h 48m5/5
  • Page Transitions thumbnailUpdated 3y ago

    Page Transitions

    Integrate the Barba.js Javascript library into your websites and use CSS and Javascript techniques to add smooth and harmonious effects.
    4h 10m

Frequently asked questions

What prerequisites are needed for the course?
Before enrolling, students should have a basic understanding of web technologies and programming concepts. Familiarity with HTML, CSS, and JavaScript will be beneficial as the course involves setting up websites and adding interactive elements using GLSL shaders. Prior experience with graphics programming is not required, as the course covers foundational concepts such as what shaders are and how to mix colors.
What projects or skills will I develop in this course?
Students will build several shader projects, including a kaleidoscope effect and wave distortion patterns, using tools like GlslCanvas and KodeLife. Key skills include mixing gradients, adding textures, and incorporating interactivity with mouse movements. The lessons guide students through adding time-based animations and creating visually engaging effects with techniques like fractional Brownian motion and color shifts.
Who is the target audience for this course?
This course is designed for web developers and designers who want to enhance their skills in creating interactive, graphics-rich web experiences. It is ideal for those interested in learning how to implement OpenGL shaders with GLSL and for anyone curious about the graphical techniques used by top websites to leverage hardware-accelerated graphics.
How does the depth of this course compare to similar courses?
The course offers a comprehensive exploration of GLSL shader programming, with 168 lessons covering both fundamental and advanced topics. Unlike more introductory courses, this one delves into specific techniques such as randomness, noise, and distortion patterns, offering a robust understanding suitable for integrating sophisticated graphics into web projects.
What tools and platforms are specifically covered?
Students will work with GlslCanvas and KodeLife to create and integrate shaders into web projects. The course teaches how to set up a website, manage canvas sizes, handle browser resizing, and add interactivity with mouse movements. These tools are essential for executing the shader techniques taught in the course.
What topics are not covered in this course?
The course focuses specifically on GLSL shaders and does not cover other shader languages or frameworks, such as HLSL or Vulkan. It also does not delve into broader computer graphics concepts such as 3D rendering or game engine development, keeping its focus on web-based graphics using OpenGL.
How can the skills learned in this course be applied to other areas or careers?
The skills acquired from this course, such as understanding GLSL and implementing shaders, are transferable to various fields including web development, digital art, and software engineering. These competencies are particularly valuable for roles that require creating interactive visual content or working with graphics-intensive applications, enhancing a resume for careers in tech and creative industries.