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.

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.

Prove what you’ve learned with a certificate

If you want a record of your course, you can buy a Certificate of Achievement from FutureLearn.

Certificate of Achievement

The Certificate of Achievement is a great way to prove what you have learned on the course and as evidence of your Continuing Professional Development. This is a personalised certificate and transcript, detailing the syllabus and learning outcomes from the course. It comes as a printed certificate as well as a digital version which you can add to your LinkedIn profile. To qualify, you must have marked at least 90% of the steps in the course complete.

There is also the option to purchase a personalised Statement of Participation, to celebrate taking part. To be eligible for the Statement of Participation, you must mark at least 50% of the steps on the course as complete. This also comes in a printed and digital format and you can add it to your LinkedIn profile.

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.