3D Programming with WebGL and Babylon.js for Beginners

Upgrade your skills and become future-ready by incorporating 3D technologies in your web development belt
4.5 (22 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
320 students enrolled
$19
$200
90% off
Take This Course
  • Lectures 18
  • Length 2 hours
  • Skill Level Intermediate Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 8/2015 English

Course Description

Funded through Kickstarter by 550+ people

Currently supported by all browsers, WebGL is a JavaScript API that allows you to render 3D images in the browser, without the use of plugins. Existing libraries such as Babylon.js make this process very easy and intuitive for developers with JavaScript knowledge.

In this course you will learn the basic concepts of WebGL and how to program 3D web applications using Babylon.js. We'll follow a very practical approach so that you won't only learn to create really cool 3D scenes and animations, but also you'll learn how to use existing 3D models from Blender in Babylon.js apps, and how to incorporate Babylon.js apps into existing websites.

By the end of this course, you'll have the basic tools to undertake innovative projects such as:

  • 3D games in the browser.
  • Educational websites using 3D models (planetary systems, models of the human body, animals).
  • 3D data visualization.
  • E-commerce stores that showcase 3D designs of the products they sell.
  • Real estate websites where the visitor can walk in a 3D model of the house.
  • Virtual reality projects.

Concepts covered in this course:

  • What is WebGL and how it works(*)
  • Basics of 3D programming with Babylon.js
  • Rendering scenes, meshes, materials, textures, lights
  • Working with cameras
  • Adding mobile support
  • Representing a 3D solar system for educational apps
  • Creating beautiful environments with skyboxes
  • Exporting Blender models into Babylon.js applications
  • Adding Babylon.js apps to existing websites

*Native WebGL programming with the GLSL language is not included in this course. We want to focus only on technologies you can quickly incorporate in your existing workflow, and we believe there is no reason to learn GLSL unless you want to create your own WebGL framework, so we don't cover this technology in the course.

What are the requirements?

  • HTML
  • JavaScript
  • Students need to install a local web server to run the course examples
  • A code editor (I'll be using Visual Studio Code)
  • A web browser (I'll be using Google Chrome)

What am I going to get from this course?

  • Create Babylon.js apps
  • Understand the role of WebGL in current and future web development
  • Use WebGL in their existing web development projects

What is the target audience?

  • This course is for people with basic JavaScript skills who want to learn what WebGL is and how to use it
  • This course is NOT for people who don't know JavaScript

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction
03:01

In this lesson students are introduced and welcomed to the course. What the course includes, what is WebGL.

Article

In this lesson students can get the source code.

08:29

In this lesson we cover how to setup a new Babylon.js app.

Section 2: Babylon.js Basics
06:24

In this lesson we cover how to render your first scene with WebGL.

05:59

In this lesson we setup our first interactive camera, so that you can move the view point.

07:07

In this lesson we introduce different Meshes or basic 3D shapes.

05:06

In this lesson we learn how to scale and rotate 3D shapes.

10:10
In this lesson we

introduce materials and how to work with them.

06:23

In this lesson we dig a bit deeper into materials and cover more light properties.

Section 3: Solar System Project
05:56
In this lesson we

get started by creating our solar system star.

06:27

In this lesson we add our first planet.

05:25

In this lesson we create a shining star by using the light emissive properties.

07:56

In this lesson we create a skybox to represent the stars background.

06:46

In this lesson we create planets that orbit around the star.

05:41
In this lesson we

cover aspects that relate to working on the mobile phone with Babylon.js

Section 4: Babylon.js and Blender
09:01

In this lesson we cover how to export files from Blender in the .babylon format.

04:16

In this lesson we cover how to import .babylon files in Babylon.js

Section 5: Conclusion
04:24

In this lesson we finish the course by showing how WebGL can be easily used in existing websites.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Pablo Farias Navarro, Software Developer and Founder of ZENVA

Software developer and founder of ZENVA. Since 2012, Pablo has been teaching online how to create games, apps and websites to over 150,000 students through the Udemy and Zenva Academy platforms, and created content for companies such as Amazon and Intel.

Pablo is a member of the Intel Innovator Program in the Asia Pacific, and has run live programming workshops in San Francisco, Brisbane and Bangalore.

Pablo holds a Master in Information Technology (Management) degree from the University of Queensland (Australia) and a Master of Science in Engineering degree from the Catholic University of Chile.

Ready to start learning?
Take This Course