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.

If you have any questions, you can ask here or in Step 1.10.

If you prefer to refer WebGLStudio documentation, visit 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.
  • Clara.io 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: