CF

Merging WebGL and HTML worlds

2h 30m 37s
English
Paid

You see WebGL on many award sites. The effects look smooth and part of the page. At first, it feels like magic. But you can do it too. In this course, you learn how to blend WebGL with normal HTML so both feel like one layer.

You use the images already on your page. Then you add WebGL effects with Three.js. We start with a simple HTML template. You update it step by step until the images feel alive.

About the Author: Awwwards

Awwwards thumbnail

Awwwards is the long-running design-recognition site that selects and showcases the best web design work published online — and now also operates a paid course platform staffed by the same kind of high-craft front-end developers whose sites win Awwwards Site of the Day awards.

The CourseFlix listing carries four Awwwards courses on the visual / animated end of front-end engineering: Impress everyone with a 3D particle scene with Blender and Three.js, Creating a simple portfolio website with WebGL and Barba.js, Merging WebGL and HTML worlds, and Using motion design to animate with purpose. Material is paid and aimed at designers and developers building portfolio-grade interactive sites.

Watch Online 15 lessons

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
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

Related courses

Frequently asked questions

What prerequisites should I have before taking this course?
It is beneficial to have a basic understanding of HTML and JavaScript before taking this course. Familiarity with web development concepts will help you grasp the integration of Three.js with HTML. Prior experience with WebGL is not necessary, as the course covers essential topics from creating a Three.js boilerplate to vertex and fragment shader effects.
What types of projects will I work on during this course?
Throughout the course, you will work on enhancing a simple HTML page by integrating WebGL effects. Starting with a basic HTML template, you will gradually add Three.js elements to create effects such as vertex and fragment shader effects, noise and terrain, and mouse wave interactions. The end goal is to make images on the page feel dynamic and alive.
Who is the target audience for this course?
This course is ideal for web developers who wish to enhance their skills by learning how to integrate WebGL with HTML using Three.js. It is particularly suited for those interested in creating visually engaging web pages that utilize advanced graphics techniques.
How does the depth of this course compare to other similar courses?
The course provides a focused exploration of merging WebGL with HTML, specifically using the Three.js library. Unlike broader WebGL courses, this one emphasizes the practical application of making HTML elements dynamic through shader effects and postprocessing techniques, making it a specialized option for those wanting to master this integration.
What specific tools or platforms will I use in this course?
The primary tool used in this course is Three.js, a popular JavaScript library for creating 3D graphics in the web browser. The course also involves using standard HTML and CSS to create the foundational web page to which WebGL effects will be added.
What topics are not covered in this course?
The course does not cover basic HTML and CSS fundamentals, advanced WebGL topics beyond Three.js, or alternative WebGL libraries. It also does not delve into server-side programming or backend web development concepts.
How can skills gained in this course be applied to other areas or careers?
Skills acquired in this course can enhance a web developer's capability to create interactive and visually striking web pages. Understanding how to blend WebGL with HTML can be advantageous in fields like digital marketing, game development, and interactive web design. These skills are also valuable for roles that require proficiency in modern web graphics and user interface design.