Skip main navigation

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.
Hey! 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.
So, 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.
They 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.
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 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.
  • is an online 3D asset creator.
  • Verold is a 3D presentation creator.
This article is from the free online

3D Graphics for Web Developers

Created by
FutureLearn - Learning For Life

Our purpose is to transform access to education.

We offer a diverse selection of courses from leading universities and cultural institutions from around the world. These are delivered one step at a time, and are accessible on mobile, tablet and desktop, so you can fit learning around your life.

We believe learning should be an enjoyable, social experience, so our courses offer the opportunity to discuss what you’re learning with others as you go, helping you make fresh discoveries and form new ideas.
You can unlock new opportunities with unlimited access to hundreds of online short courses for a year by subscribing to our Unlimited package. Build your knowledge with top universities and organisations.

Learn more about how FutureLearn is transforming access to education