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.
Online course

3D Graphics for Web Developers

Use WebGL to develop high-quality, interactive 3D graphics applications that run natively in browsers.

3D Graphics for Web Developers

Why join the course?

With the advent of WebGL, it is now possible to develop high-quality, interactive 3D graphics applications, which run natively in web browsers. However, to do this, you need to be proficient in both web development and 3D programming.

Start programming 3D graphics applications for the web

This free online course will provide web developers, who have existing knowledge of JavaScript, with the theoretical and practical knowledge to start programming 3D graphics applications for the web.

Most graphics courses start with the very basics. In this course, we take a top-down approach, starting with very high-level scene-editing tools, before drilling down and creating applications with increasing levels of complexity.

Learn to use WebGLStudio and Three.JS to create WebGL applications

The course is split into five weeks. In the first two weeks, Javi Agenjo will teach you the basics of 3D graphics from a non-programmer’s point of view, explaining concepts such as transformations and materials using a state-of-the-art web tool, WebGLStudio. There will be no programming in these two weeks.

Weeks 3, 4 and 5, however, are 100% programming-based. After showing you how to set up your computer for local development of WebGL applications, Alun Evans will lead you through the process of creating a series of simple scenes using the most common and popular library for creating WebGL applications, Three.JS.

In the final week, you will be able to load in meshes and textures from external sources, place lights and objects within a scene, and move the camera interactively.

Download video: standard or HD

Skip to 0 minutes and 11 secondsThe world of 3D graphics is amazing. Whether if it's in the latest blockbuster videogame, a new animated film from a big Hollywood studio, or simply a new interactive experience, that lets you view information in a new way. It seems that the amount and variety of amazing 3D applications, and their uses, is growing exponentially.

Skip to 0 minutes and 38 secondsUntil recently, the web was a mere "hanger-on" in this world, because if you wanted to embed any 3D graphics on a given page, you needed to rely on a third party plugin, and hope that your user didn't mind installing it. But no longer. The advent of WebGL, and its now almost complete support across all devices means that we, web-developers, can write 3D code which can be executed directly by the web-browser, with no plugins, and no installations whatsoever.

Skip to 1 minute and 11 secondsSo, if you're a web developer, who wants to know how to get started in the world of browser based 3D graphics, this course is for you. We'll start with a high-level overview of the basics of 3D graphics, using browser-based tools to explain core concepts in a simple and logical way. Then, we'll type some code, and start creating some applications, starting slow and simple, before going a bit deeper, and using some pre-created 3D assets, to make some great web-based applications.

Skip to 1 minute and 46 secondsIf all that sounds good to you, then sign up now, to take your first steps on the journey of 3D web graphics.

What topics will you cover?

  • 3D Scene creation using web-based tools
  • Visual appearance using WebGL
  • Introduction to Three.js
  • Textures, Controls and Materials
  • Apply advanced settings to a 3D scene

When would you like to start?

  • Date to be announced

What will you achieve?

By the end of the course, you'll be able to...

  • Describe basics of the 3D graphics
  • Explore how WebGL applications can be built in conjunction with standard web technologies
  • Develop an intermediate-level 3D scene
  • Apply an intermediate-level 3D scene on the web
  • Evaluate an intermediate-level 3D scene

Who is the course for?

This course is designed for existing web developers who have little or no previous experience in creating 3D graphics applications. You should be capable of manipulating the DOM using JavaScript or JQuery, and familiar with the concepts of AJAX. You should also have at least intermediate-level programming skills and be comfortable manipulating arrays and objects.

Who will you learn with?

Alun Evans

A professor at the Department of ICT at UPF and the coordinator of 3D graphics team in Interactive Technologies Group. His research interests are Character Animation, Serious Games and 3D Graphics.

Javier Agenjo Asensio

3D programmer and researcher at Universitat Pompeu Fabra. My expertise is in 3D Graphics and Videogames for the Web using standard Technologies. I had coded several 3D engines using Javascript.

Who developed the course?

Universitat Pompeu Fabra (UPF) is a public, international and research-intensive university in Barcelona. In just 25 years, it has earned a place for itself among the best universities in Europe.

Buy a personalised, digital and printed certificate and transcript

You can buy a Certificate of Achievement for this course — a personalised certificate and transcript in both digital and printed formats, to prove what you’ve learnt. A Statement of Participation is also available for this course.

Certificate of Achievement + transcript $59.00

Statement of Participation $54.00

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.