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

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.

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?

  • Available now

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.

Learners collage mobile
Join this course

Free

  • Access to this course for 7 weeks
  • Includes any articles, videos, peer reviews and quizzes

Upgrade - $79

  • Unlimited access to this course
  • Includes any articles, videos, peer reviews and quizzes
  • Certificate of Achievement to prove your success when you're eligible

Get a taste of this course

Find out what this course is like by previewing some of the course steps before you join:

  • Getting to know WebGL studio
    Getting to know WebGL studio
    video

    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
    video

    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
    video

    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.

Contact FutureLearn for Support