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 & WebGL 3D Programming Crash Course (VR, OpenGL)
Shaders for the Web

Shaders for the Websuperhi.com

Duration 16 hours 3 minutes 4 seconds
React Three Fiber: The Ultimate Guide to 3D Web Developmen
Creating a simple portfolio website with WebGL and Barba.js
Create a 3D multi-player game using THREE.js and Socket.IO
Advanced FrontEnds

Advanced FrontEndsGary Simon

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