Shaders for the Web

Shaders for the Web

English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 168 Lectures (16h 03m) | 6.21 GB

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 you’ll learn

  • 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
Table of Contents

1 Intro to Slow Breaths
2 What exactly is a shader?
3 How to mix colors
4 Mixing gradients together
5 Adding movement with the time uniform
6 Putting in correct colors
7 Adding a texture to our shader
8 Sampling points using texture2D
9 Using a displacement texture
10 Cleaning up our shader, ready for the web!
11 Setting up our website
12 Adding GlslCanvas
13 Adding our KodeLife code
14 Welcome to Kaleidoscope!
15 Sampling the texture
16 Resampling texture points using radius and angle
17 Altering the sample angle
18 Cleaning up our code for GlslCanvas
19 Setting up our website
20 Adding a texture
21 Stopping canvas pixelation
22 Fixing canvas size on browser resize
23 Adding mouse movement
24 Changing the texture in a slideshow
25 Welcome to Alice McCloud
26 What are step and smoothstep?
27 Randomness in GLSL
28 From randomness to noise
29 Fractional Brownian motion
30 Moving our FBM pattern
31 Using step and smoothstep to control the mix
32 Adding grain using random
33 Adding movement with time and rotation
34 HSV to RGB
35 Making our code ready for GlslCanvas
36 Setting up our website
37 Loading a fragment shader
38 Sizing our canvas
39 Adding mouse movement
40 How to add a random seed uniform
41 Welcome to Arabella
42 Adding a texture
43 How to keep the aspect ratio
44 Keeping the aspect ratio anchored to the center
45 Adding distortion
46 Making a wave with distortion
47 Distortion variations
48 Making a safe area
49 Grouping distortion into blocks
50 Adding mouse movement
51 Creating our website
52 Setting up multiple canvases
53 Adding our KodeLife code
54 Adding a random seed
55 Welcome to Neon Nights
56 Adding color shift
57 Adding a wave distortion pattern
58 Sampling colors within bounds
59 Sampling with gl_FragCoord
60 Rotating our distortion
61 Adding grain to our distortion
62 Adding a strength uniform
63 Creating our website
64 Adding and styling a canvas tag
65 Replacing images with canvas tags
66 Loading our sandbox
67 Adding our fragment shader
68 Making the shader retina-friendly
69 Changing the strength with IntersectionObserver
70 Variations on the strength uniform
71 Welcome to Hi Records
72 Making a circle with step and smoothstep
73 Mixing colors using steps
74 Animating our gradient
75 Adding record ridges
76 Variations on outerDist
77 Adding grain to our gradient
78 Adding color palettes with arrays
79 Adding a scroll uniform to pick palettes
80 Blending color palettes
81 How to pick from an array using WebGL
82 Making the shader ready for the web
83 Making our website
84 Adding Javascript
85 Adding scroll and color uniforms
86 Welcome to The Art of Posing
87 Resampling uv to start in the center
88 Adding a distortion wave
89 Adding noise and FBM to distortion
90 Adding a strength and timeline uniform
91 Adding a transition between textures
92 Adding a wave-based transition
93 Setting up multiple textures
94 Getting ready for the web
95 HTML and CSS setup
96 Setting up a slideshow in Javascript
97 Adding our canvas
98 Updating our fragment for a list of projects
99 Changing our GLSL code to fit the slideshow
100 Adding the startIndex, endIndex and timeline uniforms
101 Welcome to Jellyfish
102 How to do 3D in KodeLife
103 Setting up a scene in Three.js
104 Setting a background and geometry
105 Setting up a ShaderMaterial in Three.js
106 Adding a vertex shader
107 Adding a time uniform
108 Adding a texture uniform
109 Ambient lighting
110 Diffuse lighting
111 Specular lighting
112 Adding multiple lights
113 Texture cubes
114 Rotating vertices in the vertex shader
115 Making the jellyfish
116 Adding a camera zoom on load
117 Updating the renderer on window resize
118 Variation: convex to concave
119 Variation: bubble refraction
120 Variation: Making a thin film interference bubble
121 Using variations in the final project
122 Welcome to Cryptoquartz
123 HTML + CSS setup
124 Adding a scene with Three.js
125 Adding a sphere geometry
126 Setting up vertex and fragment shaders
127 Changing the vertex shaders
128 Adding FBM to our vertices
129 Adding time and seed uniforms
130 Adding slider uniforms
131 Adding color based on varyings
132 Ambient and diffuse lighting
133 Adding a struct
134 Adding in sliders for lighting
135 Adding in new normals with dFdx and dFdy
136 Changing to HSV colors
137 Mixing two colors
138 Creating some noise
139 Adding saturation, brightness and gradient mix uniforms
140 Better blending with step and smoothstep
141 Adding rotation with vertex shaders
142 Window resizing
143 Click to download as an image
144 Adding mouse movement to the lighting
145 Welcome to Cloth Studios
146 HTML + CSS setup
147 Adding a Javascript counter
148 Updating content with a data structure
149 Adding a theme with CSS variables and Javascript
150 Adding a Three.js scene
151 Adding multiple planes
152 Rotating the camera position
153 Adding in a texture
154 Making a shader material
155 Adding ambient and diffuse lighting to our material
156 Updating the time for each material
157 Adding wind to our vertex shader
158 Visualizing wind by passing varyings
159 Adding in tension points and gravity
160 Updating our lighting
161 Adding a mouse object
162 Adding a raycaster to convert 2D to 3D points
163 Adding a mouse interaction depression
164 Adding a hover strength to mouse interaction
165 Updating on window resize
166 Adding a camera rotation on load
167 CSS animations on load
168 Thank you for taking our course!

Homepage