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 content of the page. How is that even possible? Well, that’s exactly what we are going to do in this course. We will merge HTML and WebGL!
In this course you will learn how to apply some stunning WebGL effects to the images you already have on your webpage. We will start from a beautiful but static HTML template. And spice it up with Three.js and WebGL.
The subtitles are automatically generated, so the quality of the captions may vary.
Course Table of contents
What will you learn?
5 sections • 15 lectures • 2.5 hours
-
Welcome2 lectures 16:56 Mins
-
Intro01:20 Mins
-
Creating Three.js Boilerplate15:36 Mins
-
-
Shaders3 lectures 46:39 Mins
-
Vertex Basics13:08 Mins
-
Vertex Shader, Uniforms, Noise & Terrain11:04 Mins
-
Fragment Shaders Effects22:27 Mins
-
-
Merging4 lectures 37:20 Mins
-
Merging: Basics07:03 Mins
-
Merging: Dimensions07:35 Mins
-
Merging: Positions & Textures15:05 Mins
-
Merging: Scroll07:37 Mins
-
-
Effects4 lectures 33:04 Mins
-
Mouse Wave15 Mins
-
Postprocessing09:11 Mins
-
Codrops Article03:53 Mins
-
Noise Mask5 Mins
-
-
Final2 lectures 16:30 Mins
-
Performance Tips, How to Extend & What to do15:41 Mins
-
Outro00:49 Mins
-
