FE414
3D Modelling and WebGL
Faculty
Roberto Borghesi
Freelance Creative Frontend Developer
Course length
Duration
Total hours
Credits
Language
Course type
Fee for single course
Fee for degree students
Skills you’ll learn
Overview
This course will introduce the students to WebGL and the power of real-time rendering on the web. They will learn the basics of WebGL using the Three.js APIs, starting with simple scenes, lighting, and shadows. We will then delve into more advanced areas, including custom shaders, custom materials, and even some post-processing.
Throughout the course, students will acquire the skills to animate scenes, add interactivity, and optimize both scenes and models. We'll begin with vanilla Three.js and later on we’ll explore and play with the React-Three-Fiber ecosystem.
Learning highlights
- Understanding the basic pipeline of real-time rendering
- Learn how Three.js works and learn its API.
- Learn how to prepare models (GLB) and optimize them.
- Learn how to create shader materials and/or modify the existing ones.
- Learn how to mix HTML content with WebGL.
- Explore the React-Three-Fiber ecosystem
Course outline
15 classes
Session 1
Introduction to WebGL and Three.Js
Session 2
Objects / Materials / Geometries
Session 3
Lights / Shadows
Session 4
Loading / Import Existing Models
Session 5
Interactions / Raycasting
Session 6
Realistic Rendering
Session 7
Basic Blender Introduction
Session 8
Play with Rigged Models
Session 9
Custom Materials / Extend Materials
Session 10
Render Targets and Fancy Effects
Session 11
Post-processing
Session 12
Performance Tips
Session 13
Mixing HTML and WebGL
Session 14
Intro to React-Three-Fiber
Session 15
End of Course / Projects Showcases
Prerequisites
Good Javascript
Basics of react (for R3F part)
Methodology
Lectures
Group debates
Slack channel discussion
Homework
Two Friday assignments
Final project
Grading
Robert is a freelance creative frontend developer, focused on creating immersive experiences and WebLG websites. He's passionate about creating visuals and appealing design, trying to push further what you can achieve in the browser using new technologies. He has worked on projects for big brands like Gucci, Google, Adidas, Longines, Valentino, LG, Sap, MaxMara, Metamask, Blitz, and many more.
100% self taught, after some years in the agencies game he decided to start his freelance career to have the opportunity to collaborate with the best agencies out there and learn from the great minds.
See full profileApply for this course
3D Modelling and WebGL
by Roberto Borghesi
Total hours
45 Hours
Dates
Jul 31 - Aug 18, 2023
Fee for single course
€1500
Fee for degree students
€750
How to secure your spot
Complete the form below to kickstart your application
Schedule your Harbour.Space interview
If successful, get ready to join us on campus
FAQ
Will I receive a certificate after completion?
Yes. Upon completion of the course, you will receive a certificate signed by the director of the program your course belonged to.
Do I need a visa?
This depends on your case. Please check with the Spanish or Thai consulate in your country of residence about visa requirements. We will do our part to provide you with the necessary documents, such as the Certificate of Enrollment.
Can I get a discount?
Yes. The easiest way to enroll in a course at a discounted price is to register for multiple courses. Registering for multiple courses will reduce the cost per individual course. Please ask the Admissions Office for more information about the other kinds of discounts we offer and what you can do to receive one.