A first introduction to building 3D applications with JavaScript or TypeScript using Babylon.js
Tags: javascript, tutorial, webdev
Published: 2020-11-12 15:12:17

---
title: A first introduction to building 3D applications with JavaScript or TypeScript using Babylon.js
published: true
description: Babylon.js is a 3D rendering engine that will help you build apps using JavaScript or TypeScript. If you need to build 3D Visualizations or games, Babylon.js is a great choice.
tags: javascript, tutorial, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/5r3m8gegnc8c1f92qprc.png
---

TLDR; JavaScript is an exceedingly popular language and applications built from it exist in many places, not just the browser. It's also used to develop backend services, work with IoT and much more. This article shows how you can use it in yet another interesting area namely to develop 3D applications using JavaScript or TypeScript.

## References

There are so many great ways to learn more about Babylon.js it's features and how to build apps with it.

- [Babylon.js homepage](https://www.babylonjs.com/)

   The Babylon.js homepage is a great place to start. It gives you a great overview of Babylon's features and also showcases some really impressive demos.

- [Babylon.js 4.2 release doc](https://aka.ms/4_2_Blog)

   This doc describes the 4.2 release and most of it's new and exciting feeatures. If you're already into Babylon.js or have worked with 3D before, this should really interest you.

- [Playground](https://playground.babylonjs.com/)

   Here you can edit code samples and see it being rendered in the browser, no set up required. There's also lessons that teaches you Babylon.js, feature by feature.

## What is Babylon.js

Babylon.js is a 3D engine that helps you build games and other kinds of 3D visualizations. You can use JavaScript or TypeScript to do so.

According to the creators, Babylon.js is a:

> powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework

That sure promises a lot, but Babylon.js really delivers on its raw set of features and how simple it is to learn.

## How can I learn

> I don't know anything about 3d applications or 3d in general, can you help me?

Yes, Babylon.js has a playground functionality, found at:

> https://playground.babylonjs.com/

The playground consists of a two-part window where the left side displays code and the right side the result. You can then interact with the code and see the result on the right side. Here's a picture of what it looks like:

![Babylon.js playground](https://dev-to-uploads.s3.amazonaws.com/i/w1j8qnuqqdh632nhkq7v.png)

> Looks exciting, can't wait to try that :)

Wait, there's more, much more in fact. There's a ton of lessons that lets you learn Babylon.js's features at your own pace:

![Playground lessons](https://dev-to-uploads.s3.amazonaws.com/i/zxwyia340473xmfn642b.png)

> Sweet, I might have to call in sick just to play with that :)

Yea, why not make it your career?

> Hmm, what game development?

There's all sorts of industries looking for people with 3d visualization skills.

> Really who?

Well, more and more industries out there want to visualize their data in a new and interesting way, it could be used to display furniture in your future home or what's in a warehouse and so on.

> Hmm, that's good to know, I mostly saw the game industry in front of me.

Games are cool but there's more to it than that.

> For sure.

## A brief look at the new Babylon 4.2 release

Building a visualization or a game in 3D is not just about writing a little code and you are done with it. It usually takes a little more than that. You usually need a few tools to work efficiently. Let's go through some tools and concepts that are part of the 4.2 release of Babylon.js and see how they help you develop an app.

### Sprites and the Sprite editor

Sprites are simple 2D objects that have textures, graphical images, on them. Even if you are building something in 3D you need a way to display things made in 2D. Usually you work with a sprite map, which packs all sprites you aim to use in one image. Packing everything into one image saves a lot of space rather than having to deal with a ton of images.

> Why would there be a ton of images?

Well, imagine you have a character that's being animated as it moves or does something in your app, every single movement is an image. Say also that you have a ton of different characters in your app. It easily builds app and let's not forget you want to run an app in a browser.

> Ok ok, I get it, sprite maps are good.

To manage sprites in an efficient way, you need some kind of tool where you can visualize what a sprite looks like and also be able to create new sprites. You are in luck, the new sprite editor does just that. Have a read about it here:

![Sprite editor](https://dev-to-uploads.s3.amazonaws.com/i/jynuglqapnq2417at152.png)

> [Sprite playground](https://aka.ms/4_2_spritePlayground)

> [Sprite docs](https://aka.ms/4_2_spriteDoc) 

### Particles

Particles consist of hundreds, even thousands of small sprites that when displays causes a _fuzzy_ effect. Depending on the sprites used, this effect can look anything like a torch, a galaxy or maybe the light from a spaceship engine. Particles are something you definitely want to use in your app. Babylon.js 4.2 comes with a particle editor which makes creating and editing particles and particle effects real easy. Read more about it here:

> [Particle editor playground](https://aka.ms/4_2_particlePlayground)

> [Particle editor docs](https://aka.ms/4_2_particleDoc)

### Skeletons and the new Skeleton viewer

Characters that have arms and legs in a 3d world usually have a skeleton that can move in many ways to simulate real life movement. Being able to control what that movement feels like is key to creating app with realistically moving characters.

> [Skeleton viewer playground](https://aka.ms/4_2_skeletonPlayground)

> [Skeleton viewer docs](https://aka.ms/4_2_skeletonDoc)

### Textures and the texture editor

A texture adds a material to your object so wooden create looks wooden or a tree looks like an actual tree with barks and leaves and so on. The inspector tool helps you visualize the texture and helps you quickly find any texture problems.  

> [Texture inspector playground](https://aka.ms/4_2_textureInspectorPlayground)

> [Tecture inspector docs](https://aka.ms/4_2_textureInspectorDoc)

### Babylon React Native

If you already know React this should interest you. Babylon React Native means you can build apps for mobile phones while using React Native.

> [Babylon React Native](https://aka.ms/4_2_BRNDoc)

## Summary

In summary, Babylon.js is a great choice if you are currently using JavaScript or TypeScript and want to either visualize something in 3D or build a game. It's also a really fun way to learn programming. Also the Babylon.js 4.2 is full of existing new features and tools you will need to be efficient building apps with it.