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.
Course Table of Contents
What will you learn?
5 sections • 15 lectures • 2.5 Hours total length
-
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
-
