Merging WebGL and HTML worlds

2h 30m 37s
English
Paid
November 22, 2023

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!

More

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

Three.js Journey - The ultimate Three.js course

Three.js Journey - The ultimate Three.js course

Duration 90 hours 46 minutes 32 seconds
Creating a simple portfolio website with WebGL and Barba.js
Build fancy landing pages with React and Threejs
Create a 3D multi-player game using THREE.js and Socket.IO

Create a 3D multi-player game using THREE.js and Socket.IO

Duration 2 hours 39 minutes 55 seconds
Shaders for the Web

Shaders for the Web

Duration 16 hours 3 minutes 4 seconds
Advanced FrontEnds

Advanced FrontEnds

Duration 8 hours 58 minutes 38 seconds
Impress everyone with a 3D particle scene with Blender and Three.js