Merging WebGL and HTML worlds

Name: Merging WebGL and HTML worlds
Author: Yuri Artiukh

By Yuri Artiukh

Language: English
Certificate: of completion
Subtitles: English, Spanish, French, Italian, Portuguese (Machine translation)
Duration: 2.5 Hours

Now

9.99$

/$100

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

Chapters

Duration
Lesson 1

Welcome

2

16:56 Mins

View more
- Intro
  
  01:20 Mins
- Creating Three.js Boilerplate
  
  15:36 Mins
Lesson 2

Shaders

3

46:39 Mins

View more
- Vertex Basics
  
  13:08 Mins
- Vertex Shader, Uniforms, Noise & Terrain
  
  11:04 Mins
- Fragment Shaders Effects
  
  22:27 Mins
Lesson 3

Merging

4

37:20 Mins

View more
- Merging: Basics
  
  07:03 Mins
- Merging: Dimensions
  
  07:35 Mins
- Merging: Positions & Textures
  
  15:05 Mins
- Merging: Scroll
  
  07:37 Mins
Lesson 4

Effects

4

33:04 Mins

View more
- Mouse Wave
  
  15 Mins
- Postprocessing
  
  09:11 Mins
- Codrops Article
  
  03:53 Mins
- Noise Mask
  
  5 Mins
Lesson 5

Final

2

16:30 Mins

View more
- Performance Tips, How to Extend & What to do
  
  15:41 Mins
- Outro
  
  00:49 Mins

Meet the teacher

Yuri Artiukh

Creative developer, CTO of frontend agency

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.

Now

9.99$

/$100

Course Content

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!

Features