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 secondsHey! I’m Javi and this is the second video for the first module for the MOOC 3D Graphics for Web Programmers. The idea of the first module is to introduce you to the very basic concept about 3D environments. And to do so, we have thought that the best way is to show you how to use one of the many tools that exist in the market. For the first videos we are going to use WebGL Studio which is a tool that we have developed here at the university. It’s an OpenSource free tool that you can use for whatever you want.

Skip to 0 minutes and 46 secondsSo, once you open our 3D tool, you will see this kind of interface, which could look a little bit hard for people who is not familiar with 3D environments, so I’m going to try to introduce you to the very basic parts or sections that you will find in any 3D environment. First of all, we have this kind of 3D area. This is called the canvas or the 3D view, and this is our window to our 3D world, so we can look in any direction to see what objects we have in the 3D environment. We also have usually side panels. They could be in the right side, below, in different areas.

Skip to 1 minute and 25 secondsThey are panels that show us information about the things we have right now on the scene. And we also have a lot of buttons that we can use to perform actions on the scene. But right now, let’s focus only in this area, which is the 3D view of our 3D world. And, as you can see, you can click, and you can drag, and you can look from different points of view the 3D scene. So just play a little bit with the 3D environment just to feel familiar with it and in the next video we will talk about how it works in more depth.

Getting to know WebGL studio

This video introduces you to WebGL studio, which you will be using throughout this course. It also touches on some basic features of 3D scene creation.

WebGL studio is a platform that allows you to create interactive 3D scenes to be executed directly from your browser. It allows you to edit the scene visually, code your behaviours, and edit the shaders directly within the app. You can find out more information about this tool here.

Some other interesting editors that you can use are:

  • Three.js is the most popular API for writing 3D web applications.
  • PlayCanvas is more of a game engine.
  • is an online 3D asset creator.
  • Verold is a 3D presentation creator.

Share this video:

This video 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:

  • 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