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.
Floating geometrical objects
Animated different geometrical objects like spheres, cubes, etc.

Why learn 3D graphics for the web?

The web is all about communication. From its earliest incarnation as a text-only format, to the latest multimedia, multi-tiered, multi-server, multi-database applications, the core principal underlying the web is the transmission of information – whether for product, projects, networking or play.

We have come a very long way from the days of the Mosaic web browser, first released over 20 years ago. Modern browsers are now fully-featured multimedia engines, capable of rendering animated text in a myriad of fonts, images, video, and audio. Browser applications can now use your webcam, your microphone, and interface with new technology such virtual headsets and motion-control devices.

Front and center in this new world are 3D rendering technologies. Real-time 3D graphics refers to the idea of rendering (drawing) a virtual scene inside a web page (or section of a page) which the user can move and manipulate. In offline contexts, most people will be familiar with real-time 3D graphics applications from having seen or played video games. But we are only beginning to scratch the surface of the possibilities for real-time 3D applications, from virtual worlds, to augmented reality, to marketing.

The web is actually an ideal place to take your first steps in the world of 3D graphics. Modern, high-level APIs such as Three.js abstract much of the heavy lifting, and the days when you needed university-level linear algebra in order to draw a box on the screen are long gone (though… linear algebra is of course very interesting, for those who wish to pursue it!).

In this course, we present a gentle introduction to 3D graphics for current web developers who want to see what all the fuss is about. We hope you enjoy it.

May be this is a good moment to share what we know about 3D graphics! There are different phases of 3D graphics creation as “3D modelling, 3D animation and rendering”. Discuss these in your Study groups .

Share this article:

This article is from the free online course:

3D Graphics for Web Developers

Pompeu Fabra University Barcelona

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

    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.

Contact FutureLearn for Support