CF

Merging WebGL and HTML worlds

2h 30m 37s
English
Paid

Merging WebGL and HTML worlds is a 15-lesson 2 hours 30 minutes self-paced course by Awwwards. Blend WebGL Effects Directly into Your HTML Page Award-winning sites often make WebGL feel like a native part of the page rather than a separate layer, and this course shows how that effect is achieved.

Course facts

Lessons
15
Duration
2 hours 30 minutes
Level
All levels
Language
English
Updated
Instructor
Awwwards
Price
Premium

Blend WebGL Effects Directly into Your HTML Page

Award-winning sites often make WebGL feel like a native part of the page rather than a separate layer, and this course shows how that effect is achieved. Rather than building a standalone WebGL scene, you'll work with the images already present in your HTML and layer smooth, Three.js-powered effects directly on top of them.

How the Course Progresses

Starting from a plain HTML template, you'll update it in small, deliberate steps until static images start to feel alive and connected to the page around them, so WebGL and HTML read as one seamless layer instead of two separate technologies bolted together.

Who teaches Merging WebGL and HTML worlds? 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.

What lessons are included in Merging WebGL and HTML worlds?

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

What courses are similar to Merging WebGL and HTML worlds?

More courses by Awwwards

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.