Merging WebGL and HTML worlds
- Language: English
- Certificate: of completion
- Subtitles: English, Spanish, French, Italian, Portuguese (Machine translation)
- Duration: 2.5 Hours
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!
| Category | Course format | Language | Duration | Level |
|---|---|---|---|---|
| Interaction, Code | Online | English with Subt. | 2.5 Hours | Intermediate & Professional |
Requirements
This course is designed for intermediate and professional levels. You only need a standard web development IDE.
Description
This course will teach you how to combine the webGL and HTML worlds. You'll learn secrets from some of the most stunning webGL experiences you've ever seen. You will learn how to apply 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.
You will learn
- Creating Three.js Boilerplate
- Understanding shaders
- Create your own shaders effects
- Implements these effects in your HTML
The course includes
- 2 hours and 30 mins of practical and condensed knowledge
- Immediate access to the entire collection of videos
- Downloadable source files for every lesson
- Valuable links and resources for every lesson
- Certificate of completion
Modules
What you will learn
in this course.
-
Lessons
-
Lesson 1Welcome
-
Intro
-
Creating Three.js Boilerplate
-
-
Lesson 2Shaders
-
Vertex Basics
-
Vertex Shader, Uniforms, Noise & Terrain
-
Fragment Shaders Effects
-
-
Lesson 3Merging
-
Merging: Basics
-
Merging: Dimensions
-
Merging: Positions & Textures
-
Merging: Scroll
-
-
Lesson 4Effects
-
Mouse Wave
-
Postprocessing
-
Codrops Article
-
Noise Mask
-
-
Lesson 5Final
-
Performance Tips, How to Extend & What to do
-
Outro
-
Meet the teacher
Yuri Artiukh
Yuri leads a small frontend agency riverco.de in Kyiv, Ukraine. Also streams occasionally on youtube about creative coding and frontend development. He is very passionate about watermelons, math, frontend performance and generative art.
Course Content
Requirements
This course is designed for intermediate and professional levels. You only need a standard web development IDE.
Description
This course will teach you how to combine the webGL and HTML worlds. You'll learn secrets from some of the most stunning webGL experiences you've ever seen. You will learn how to apply 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.
You will learn
- Creating Three.js Boilerplate
- Understanding shaders
- Create your own shaders effects
- Implements these effects in your HTML
The course includes
- 2 hours and 30 mins of practical and condensed knowledge
- Immediate access to the entire collection of videos
- Downloadable source files for every lesson
- Valuable links and resources for every lesson
- Certificate of completion
Features
- English
- English, Spanish, French, Italian, Portuguese (Machine translation)
- Intermediate & Professional
- Access on mobile and Desktop
- Full time access
- Certificate of completion
-
Yuri Artiukh
Teacher at awwwards.com
If you have any questions about this course, please contact us
