Merging WebGL and HTML worlds
2h 30m 37s
English
Paid
Course description
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!
Read more about the course
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.
Watch Online
Join premium to watch
Go to premium
| # | Title | Duration |
|---|---|---|
| 1 | Intro | 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 |
Comments
0 commentsSimilar courses
React Three Fiber: The Ultimate Guide to 3D Web Developmen
Sources: Wawa Sensei
3D development is a vast field with many different techniques. This comprehensive guide will provide you with the necessary tools to get started and the...
9 hours 18 minutes 15 seconds
Three.js & GameDev
Sources: SimonDev
Start with the basics of Three.js and gradually move on to advanced topics such as streaming infinite worlds, GPU memory optimization, and scalable...
47 hours 38 minutes 23 seconds
Creating a simple portfolio website with WebGL and Barba.js
Sources: awwwards.com
Nothing beats smooth user experience. That is the reason we love WebGL, because we can do crazy effects with amazing performance. But if you combine that with s
3 hours 41 minutes 19 seconds
Impress everyone with a 3D particle scene with Blender and Three.js
Sources: awwwards.com
When you work as a developer you know that the budget for outsourcing and finding the perfect content creator for your project may be a long and unpleasant proc
2 hours 11 minutes 56 seconds
Want to join the conversation?
Sign in to comment