You see WebGL on many award sites. The effects look smooth and part of the page. At first, it feels like magic. But you can do it too. In this course, you learn how to blend WebGL with normal HTML so both feel like one layer.
You use the images already on your page. Then you add WebGL effects with Three.js. We start with a simple HTML template. You update it step by step until the images feel alive.
Awwwards is the long-running design-recognition site that selects and showcases the best web design work published online — and now also operates a paid course platform staffed by the same kind of high-craft front-end developers whose sites win Awwwards Site of the Day awards.
The CourseFlix listing carries four Awwwards courses on the visual / animated end of front-end engineering: Impress everyone with a 3D particle scene with Blender and Three.js, Creating a simple portfolio website with WebGL and Barba.js, Merging WebGL and HTML worlds, and Using motion design to animate with purpose. Material is paid and aimed at designers and developers building portfolio-grade interactive sites.
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Intro Demo | 01:20 | |
| 2 | Creating Three.js Boilerplate | 15:37 | |
| 3 | Vertex Basics | 13:09 | |
| 4 | Vertex Shader, Uniforms, Noise & Terrain | 11:05 | |
| 5 | Fragment Shaders Effects | 22:28 | |
| 6 | Merging: Basics | 07:03 | |
| 7 | Merging: Dimensions | 07:35 | |
| 8 | Merging: Positions & Textures | 15:06 | |
| 9 | Merging: Scroll | 07:37 | |
| 10 | Mouse Wave | 15:00 | |
| 11 | Postprocessing | 09:11 | |
| 12 | Codrops Article | 03:54 | |
| 13 | Noise Mask | 05:01 | |
| 14 | Performance Tips, How to Extend & What to do | 15:41 | |
| 15 | Outro | 00:50 |
Get instant access to all 14 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscription
