Contact FutureLearn for Support
Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Skip to 0 minutes and 19 secondsHello everybody and welcome to our MOOC on 3D graphics for web programmers brought to you by Universitat Pompeu Fabra in Barcelona, Spain. My name is Alun Evans - and my name is Javi Agenjo. Our course is structured in 5 modules. In the first 2 modules, I’ll be teaching you the basics of 3D graphics via an interactive web application that we have developed here at the university. The objective of these early modules is to learn about the core elements of 3D graphics before you start to write any kind of code.

Skip to 0 minutes and 46 seconds- Then, in modules 3, 4 and 5, I will teach you how to create some simple 3D scenes using the most popular library for web-based 3D applications at the moment, three.js. I’m assuming for these modules that you already have a basic understanding of HTML, CSS and JavaScript. - Each module is divided into 4 or 5 tutorial videos, each of which is about 5 minutes long. While it’s probably best to follow the MOOC in sequential order, feel free to jump around the different modules if you wish. - Each video is an informal screen capture as you can see, with one of us speaking to a microphone, describing what we’re doing. - So, without further ado, let’s get started!

Skip to 1 minute and 16 secondsSee you in the next video.


Hello! Welcome to the course 3D Graphics for Web Developers.

In this video, Alun Evans and Javier Agenjo Asensio explain the structure of the course and the tools you will be using.

You will be using WebGLStudio, a browser-based tool, throughout the course. We assume that you have some familiarity with HTML, CSS and JavaScript. If you need a refresher on any of these, see the links at the bottom of this step. If you need further help, check out our FAQs.

If you complete at least 50% of the steps in this course and the end of course tests, you will be eligible to purchase a Statement of Participation, which comes in the form of a printed certificate.

Please remember to include #FL3Dgraphics in any discussions you may have in social networks. You can also follow us on Twitter: @DTIC_UPF.

When you are finished on this step, click the Mark as complete button before clicking ‘NEXT’ to move on.

Share this video:

This video is from the free online course:

3D Graphics for Web Developers

Pompeu Fabra University Barcelona

Course highlights Get a taste of this course before you join:

  • Getting to know WebGL studio
    Getting to know WebGL studio

    State-of-the-art tool for 3D graphics development, WebGLStudio. Watch Javi Agenjo explains basics of 3D graphics using WebGLStudio.

  • Learn 3D scene post-production
    Learn 3D scene post-production

    Apply more effects, algorithms to have more realistic scene and learn about post-production. Watch Javi Agenjo explains more.

  • Implementing a basic 3D scene
    Implementing a basic 3D scene

    Learn how Three.js API can be used to create 3D graphic scenes. Explore more about Three.js after watching Alun Evan's video lesson.

  • Creating complex 3D objects
    Creating complex 3D objects

    Learn how to create complex 3D objects instead of simple spheres and planes. It uses external resources also. Watch Alun Evans explains more.

  • Loading textures and casting shadows
    Loading textures and casting shadows

    Add complex textures and higher quality meshes in to a 3D scene using Three.js API. Watch how Alun Evans program these features.