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
0:00
/ #1: Intro
All Course Lessons (15)
| # | 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 |
Unlock unlimited learning
Get instant access to all 14 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
Three.js & WebGL 3D Programming Crash Course (VR, OpenGL)
Sources: udemy
Learn how to create interactive 3D experiences such as web application and games. A step by step process is used to show everything from setting up to creating
1 hour 32 minutes 8 seconds
Advanced FrontEnds
Sources: Gary Simon
"Advanced FrontEnds" is a comprehensive course by Gary Simon, focusing on creating highly animated, interactive landing pages. It covers JavaScript, GSAP, and Three.js, with a p...
8 hours 58 minutes 38 seconds
Three.js Journey - The ultimate Three.js course
Sources: Bruno Simon
Have you ever wanted to create stunning 3D websites? Whether you are a beginner or a more advanced developer, Three.js Journey is the only course you need to le
90 hours 46 minutes 32 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
Build fancy landing pages with React and Threejs
Sources: Paul Henschel (@0xca0a)
This course teaches you how to add stunning flourishes to your sites with little code and complexity. You would think that some of the extraordinary websites on awwwards, fwa or...
38 minutes 9 seconds