FE414
3D Modelling and WebGL
Faculty
David Lindkvist
Creative Tech Director & Co-founder at 14islands
Course length
Duration
Total hours
Credits
Language
Course type
Fee for single course
Fee for degree students
Skills you’ll learn
Overview
This course teaches how to create basic 3D models, how to tune them for runtime rendering on the web, and exporting them for use with Three.js. Students will learn how to light your scenes, create stunning materials that follow the Physically Based Rendering workflow, how to add interactivity and craft impressive animations.
This course will mainly be taught using the React Three Fiber javascript library which is an abstraction on top of Three.js.
Learning highlights
- Understand the full flow from making a model in a 3D tool to displaying it in an interactive website.
- Understand limitations of 3D models in regards to performance in WebGL
- Make 3D models look good and run fast in the browser.
- Learn how to export models in the GLTF format from Blender.
- Learn how to import GLTF models in Threejs
- Learn how to animate models in Blender and Threejs
- Learn how to mix a 3D scene with an HTML page
Course outline
15 classes
Session 1
Introduction to 3D and WebGL. Introduction to react-three-fiber
Session 2
Importing a model. Where to find existing models
Session 3
Lights & Shadows. HDRI lighting
Session 4
Basic Interactions
Session 5
Practice session (friday exercise)
Session 6
Introduction to Blender. Creating a basic model
Session 7
Exporting a model as GLB. Previewing exported models. Export settings explained. Applying modifiers. Reducing size with. Draco compression
Session 8
Applying Texture maps, Normal maps, Ambient Occlusion maps. Baking texture maps
Session 9
Shaders & Custom materials. Replace materials from Blender with custom materials.
Session 10
Practice session (friday exercise)
Session 11
Advanced Interactions & Animations
Session 12
How to mix 3D with HTML
Session 13
Post processing effects
Session 14
Performance & debugging
Session 15
Final Project Presentation
Course materials
Media
Prerequisites
Skills: Good knowledge of Javascript, Basic knowledge of React Javascript library, Basic knowledge of Three.js Javascript library, Basic knowledge of Blender 3D modeling tool.
Methodology
Lectures, group debates, slack channel discussion, homework (at least two days a week), two Friday assignments, final project
Grading
David is the Director of Technology at 14islands, a design and development studio with offices in Sweden, Brazil and Iceland. He co-founded the studio in 2011 and since then they've done work with companies such as Google, UN, Adidas, Disney, Facebook, HBO, Shopify, Ericsson and many innovative startups in the world. Their projects have won multiple awards such as the FWA, Awwwwards, CSS Design Awards, and European Design Awards.
After discovering the internet in 1995, David worked as a creative developer for over 20 years. He cares deeply about building digital experiences that spark joy and bring value to people. To make websites and apps that both inspire and push the boundaries of what's possible on the web.
See full profileApply for this course
3D Modelling and WebGL
by David Lindkvist
Total hours
45 Hours
Dates
Aug 01 - Aug 19, 2022
Fee for single course
€2999
Fee for degree students
€1999
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.