New season, New skills! All Courses at $9.99

Merging WebGL and HTML worlds

  • 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
  • Lesson 1
    Welcome
    • Intro
    • Creating Three.js Boilerplate
  • Lesson 2
    Shaders
    • Vertex Basics
    • Vertex Shader, Uniforms, Noise & Terrain
    • Fragment Shaders Effects
  • Lesson 3
    Merging
    • Merging: Basics
    • Merging: Dimensions
    • Merging: Positions & Textures
    • Merging: Scroll
  • Lesson 4
    Effects
    • Mouse Wave
    • Postprocessing
    • Codrops Article
    • Noise Mask
  • Lesson 5
    Final
    • Performance Tips, How to Extend & What to do
    • Outro

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

  • English
  • English, Spanish, French, Italian, Portuguese (Machine translation)
  • Intermediate & Professional
  • Access on mobile and Desktop
  • Full time access
  • Certificate of completion

If you have any questions about this course, please contact us

Start the course and upskill your professional toolkit.

Related courses

Find more courses
like this one.

Currently we have more courses for you View All Courses