Merging WebGL and HTML worlds
2h 30m 37s
English
Paid
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 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
Creating a simple portfolio website with WebGL and Barba.jsawwwards.com
Category: JavaScript, WebGL, barba.js
Duration 3 hours 41 minutes 19 seconds
Course
Impress everyone with a 3D particle scene with Blender and Three.jsawwwards.com
Category: Three.js
Duration 2 hours 11 minutes 56 seconds
Course
Shaders for the Websuperhi.com
Category: JavaScript, Three.js, OpenGL Shading Language (GLSL)
Duration 16 hours 3 minutes 4 seconds
Course
Build fancy landing pages with React and ThreejsPaul Henschel (@0xca0a)
Category: React.js, Three.js
Duration 38 minutes 9 seconds
Course
Create a 3D multi-player game using THREE.js and Socket.IOudemy
Category: Three.js, Socket.IO, Other (Gamedev)
Duration 2 hours 39 minutes 55 seconds
Course
Three.js & WebGL 3D Programming Crash Course (VR, OpenGL)udemy
Category: Three.js, WebGL
Duration 1 hour 32 minutes 8 seconds
Course
React Three Fiber: The Ultimate Guide to 3D Web DevelopmenWawa Sensei
Category: React.js, Three.js
Duration 9 hours 18 minutes 15 seconds
Course
Three.js Journey - The ultimate Three.js courseBruno Simon
Category: Three.js
Duration 90 hours 46 minutes 32 seconds
Course