Merging WebGL and HTML worlds
2h 30m 37s
English
Paid
November 22, 2023
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!
More
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 Merging WebGL and HTML worlds
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 |
Similar courses to Merging WebGL and HTML worlds
Create a 3D multi-player game using THREE.js and Socket.IOudemy
Duration 2 hours 39 minutes 55 seconds
Course
Three.js & WebGL 3D Programming Crash Course (VR, OpenGL)udemy
Duration 1 hour 32 minutes 8 seconds
Course
Build fancy landing pages with React and ThreejsPaul Henschel (@0xca0a)
Duration 38 minutes 9 seconds
Course
Creating a simple portfolio website with WebGL and Barba.jsawwwards.com
Duration 3 hours 41 minutes 19 seconds
Course
Shaders for the Websuperhi.com
Duration 16 hours 3 minutes 4 seconds
Course
Advanced FrontEndsGary Simon
Duration 8 hours 58 minutes 38 seconds
Course
Three.js Journey - The ultimate Three.js courseBruno Simon
Duration 90 hours 46 minutes 32 seconds
Course