Merging WebGL and HTML worlds

2h 30m 37s
English
Paid

Course description

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!

Read more about the course

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

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 15 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online Merging WebGL and HTML worlds

0:00
/
#1: Intro

All Course Lessons (15)

#Lesson TitleDurationAccess
1
Intro Demo
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

Unlock unlimited learning

Get instant access to all 14 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Impress everyone with a 3D particle scene with Blender and Three.js

Impress everyone with a 3D particle scene with Blender and Three.js

Sources: awwwards.com
When you work as a developer you know that the budget for outsourcing and finding the perfect content creator for your project may be a long and unpleasant proc
2 hours 11 minutes 56 seconds
Creating a simple portfolio website with WebGL and Barba.js

Creating a simple portfolio website with WebGL and Barba.js

Sources: awwwards.com
Nothing beats smooth user experience. That is the reason we love WebGL, because we can do crazy effects with amazing performance. But if you combine that with s
3 hours 41 minutes 19 seconds
Three.js & GameDev

Three.js & GameDev

Sources: SimonDev
Start with the basics of Three.js and gradually move on to advanced topics such as streaming infinite worlds, GPU memory optimization, and scalable...
47 hours 38 minutes 23 seconds
Three.js & WebGL 3D Programming Crash Course (VR, OpenGL)

Three.js & WebGL 3D Programming Crash Course (VR, OpenGL)

Sources: udemy
Learn how to create interactive 3D experiences such as web application and games. A step by step process is used to show everything from setting up to creating
1 hour 32 minutes 8 seconds