Merging WebGL and HTML worlds by Yuri Artiukh

Ever wondered how those mind-blowing websites with WebGL effects on images actually work, especially when they feel like they’re part of the page’s HTML? This course is your ticket to finding out. We’re going to dive into merging the worlds of HTML and WebGL, showing you how to take your static pages and inject some serious visual flair.

🎯 What you’ll learn

• Create a Three.js Boilerplate
• Understand shaders
• Develop your own shader effects
• Implement these effects directly within your HTML structure

✅ Requirements

• Skills: Intermediate to professional web development knowledge.
• Tools: A standard web development IDE.

📝 Description

This course is all about bridging the gap between WebGL and HTML. You’ll uncover the secrets behind some of the most impressive WebGL experiences out there and learn how to apply stunning visual effects to the images already on your webpage. We’ll start with a clean, static HTML template and bring it to life using Three.js and WebGL. Get ready to transform your static content into something truly dynamic and engaging.

🧑‍🎓 Who this course is for

• Web developers looking to add advanced visual effects to their projects.
• Designers and developers aiming to create more interactive and engaging websites.
• Anyone interested in mastering creative coding with WebGL.

🧑‍🏫 About the Author

Yuri Artiukh is a creative developer and CTO of the frontend agency riverco.de in Kyiv, Ukraine. He occasionally streams on YouTube about creative coding and frontend development. Yuri is passionate about watermelons, math, frontend performance, and generative art.

🏁 Final Result

• A portfolio-ready webpage featuring dynamic WebGL effects integrated seamlessly with HTML content.