
In this online course by [Zenva](https://zenva.com) 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.

Instructor | [Pablo Farias Navarro](https://twitter.com/zenvatweets)

Access the course [here](https://academy.zenva.com/product/3d-programming-with-webgl-and-babylon-js-for-beginners/?zva_src=babylonjsdoc)




Explore 3D basics, and take a look at 3D without hardware (creating a software engine).

**Agenda**:

* Understanding 3D Basics via a software engine *[05:45]*
* Understanding the transformation pipeline *[09:49]*
* Its all about triangles *[20:26]*
* Moving from CPU to GPU *[31:42]*

<iframe src="//channel9.msdn.com/Series/Introduction-to-WebGL-3D-with-HTML5-and-Babylonjs/01/player" width="960" height="540" allowFullScreen frameBorder="0"></iframe>

[Download **sample code** and Powerpoint **slides** for this chapter](https://github.com/deltakosh/MVA3DHTML5GameDev/tree/master/Chapter%201)



Hello, my name is Nikos and I run a YouTube channel catering for programmers.

Have you ever wanted to build an awesome RTS game using Babylon.js?
Have you ever wondered how all the units in a RTS game go about their tasks?

I invite you to come and build one and learn together with me as we build a unique RTS game called Density Wars!
The game will involve you having to strategically position the units to beat your opponents. The units can link up their firepower when closer together, but you will have to balance local fire power against the overall progression of the battle.

Come and participate in this evolving RTS game series on YouTube by watching the trailer episode here:

[![First video in the series](https://img.youtube.com/vi/i7tdJpf6Pnc/0.jpg)](https://www.youtube.com/watch?v=i7tdJpf6Pnc&list=PLCrwuqjmVebK8M9DW_MNOxqn5ic6hF4ua&index=1 "Lets build an online RTS game together - JavaScript RTS game development series - Part 1 ")

Full playlist:

[RTS game development series](https://www.youtube.com/playlist?list=PLCrwuqjmVebK8M9DW_MNOxqn5ic6hF4ua)

You will benefit greatly in this series as we learn together how to make a full RTS realtime game, including server side code.

All code is open source and contained here: https://github.com/QuantumInformation/Density-Wars


Think of this as a WebGL 101 course, with a look at geometries and shaders, resources, and performance considerations.

** Agenda **

* WebGL 101 *[02:12]*
* Understanding Geometries and shaders *[07:01]*
* Performance Considerations *[27:28]*
* Introduction to Babylon.Js *[39:54]*

<iframe src="//channel9.msdn.com/Series/Introduction-to-WebGL-3D-with-HTML5-and-Babylonjs/02/player" width="960" height="540" allowFullScreen frameBorder="0"></iframe>

[Download **sample code** and Powerpoint **slides** for this chapter](https://github.com/deltakosh/MVA3DHTML5GameDev/tree/master/Chapter%202)


Discover the power of the physics engine and create your own shader.

** Agenda **

* Picking Meshes *[02:52]* 
* Create your own Shaders
 *[17:37]*
* Animations *[23:29]* 
* Physics Simulation *[28:59]* 
* CSG: Constructive Solid Geometries *[38:21]*

<iframe src="//channel9.msdn.com/Series/Introduction-to-WebGL-3D-with-HTML5-and-Babylonjs/07/player" width="960" height="540" allowFullScreen frameBorder="0"></iframe>

[Download **sample code** and Powerpoint **slides** for this chapter](https://github.com/deltakosh/MVA3DHTML5GameDev/tree/master/Chapter%207)


Take a look at basic scene components (lights, cameras, and meshes), materials, and inputs (gamepads, touch, WebVR, and orientation), plus get insights on using the Playground.

** Agenda **

* Basic Scene components, meshes, lights and camera
 *[01:01]*
* Using the Playground *[35:05]*

<iframe src="//channel9.msdn.com/Series/Introduction-to-WebGL-3D-with-HTML5-and-Babylonjs/03/player" width="960" height="540" allowFullScreen frameBorder="0"></iframe>

[Download **sample code** and Powerpoint **slides** for this chapter](https://github.com/deltakosh/MVA3DHTML5GameDev/tree/master/Chapter%203)


Working with Blender, using Sandbox, and exploring 3ds Max.

** Agenda **

* Working with Blender 3D *[03:07]* 
* Working with 3ds Max *[20:34]*

<iframe src="//channel9.msdn.com/Series/Introduction-to-WebGL-3D-with-HTML5-and-Babylonjs/05/player" width="960" height="540" allowFullScreen frameBorder="0"></iframe>

[Download **sample code** and Powerpoint **slides** for this chapter](https://github.com/deltakosh/MVA3DHTML5GameDev/tree/master/Chapter%205)


Load your scene, meshes, and assets. And take a look at offline mode.

** Agenda **

* Loading your scene, Meshes and assets *[02:41]* 
* Creating a 3D Windows Universal App *[20:12]* 
* Understanding Offline Mode *[32:28]*

<iframe src="//channel9.msdn.com/Series/Introduction-to-WebGL-3D-with-HTML5-and-Babylonjs/06/player" width="960" height="540" allowFullScreen frameBorder="0"></iframe>

[Download **sample code** and Powerpoint **slides** for this chapter](https://github.com/deltakosh/MVA3DHTML5GameDev/tree/master/Chapter%206)


Learn about materials, shaders and how to work with inputs.

** Agenda **

* Materials
 *[02:03]* 
* Working with Inputs *[38:30]*

<iframe src="//channel9.msdn.com/Series/Introduction-to-WebGL-3D-with-HTML5-and-Babylonjs/04/player" width="960" height="540" allowFullScreen frameBorder="0"></iframe>

[Download **sample code** and Powerpoint **slides** for this chapter](https://github.com/deltakosh/MVA3DHTML5GameDev/tree/master/Chapter%204)


Get a look at shadows, lens flares, bones, and physics.

** Agenda **

* Shadows *[01:20]* 
* Environment *[07:46]* 
* Lens Flares *[14:27]*
* Particles *[18:58]*
* Post-Processes *[25:12]*

<iframe src="//channel9.msdn.com/Series/Introduction-to-WebGL-3D-with-HTML5-and-Babylonjs/08/player" width="960" height="540" allowFullScreen frameBorder="0"></iframe>

[Download **sample code** and Powerpoint **slides** for this chapter](https://github.com/deltakosh/MVA3DHTML5GameDev/tree/master/Chapter%208)


Do you have a great idea for a 3D game? If you want to build it with the same open source framework used to create Assassin's Creed Pirates, check out this exciting course! Babylon.js is a free, open source gaming framework that streamlines WebGL functionality. Use it to create 3D games and apps which work on every browser that has a GPU device.

Watch the creators of Babylon.js in this entertaining deep dive into 3D game development, including a look at collisions, particles, shadows, and texture. Explore basic 3D concepts, create a 3D scene, and connect the 3D assets creation tool to your website or app.

**NOTE:** For the **sample code** used throughout this course, please visit: https://github.com/deltakosh/MVA3DHTML5GameDev

Instructors | [David Catuhe](https://twitter.com/deltakosh) - Microsoft Principal Program Manager; [David Rousset](https://twitter.com/davrous) - Microsoft Senior Program Manager

1. [3D on the Web: Understanding the Basics](/guidedLearning/videos/3DWebBasics)
2. [WebGL Basics](/guidedLearning/videos/WebGLBasics)
3. [Using Babylon.js for Beginners](/guidedLearning/videos/videoCourses)
4. [Understanding Materials and Inputs](/guidedLearning/videos/materialsInputs)
5. [Game Pipeline Integration with Babylon.js](/guidedLearning/videos/gamePipelineIntegration)
6. [Loading Assets](/guidedLearning/videos/loadingAssets)
7. [Babylon.js: Advanced Features](/guidedLearning/videos/bjsAdvancedFeatures)
8. [Special Effects](/guidedLearning/videos/specialEffects)



## Summary
This is just a little bonus content if you're curious as to how I went about designing the game assets and what resources I used!

## References
Before I began any of the art asset creation, I used Pinterest to collect all of the resources I'd need. I had a bunch of different boards and made sure to save anything I thought could give me inspiration.

I made some really rough sketches of how I wanted the character and environment to look. The environment was the most vague as I wasn't sure in the beginning how I wanted the feel of the game to be. I went back in with more detail for the character reference to help with modeling.

![characterDesigns](/img/how_to/create-a-game/characterDesigns.jpeg)
![characterRef](/img/how_to/create-a-game/characterref.jpeg)

This is also where I started thinking about what color palette I wanted to use. Similar to the pixel-art games I usually make, I wanted to use a limited color palette to keep it consistent and bring everything together. Colors aren't usually my strength, so I just try to keep a set of colors I think work well together and go from there. This is where looking for color palettes on pinterest is really helpful.

## 3D Modeling with Blender
## Character
This area was the most new to me, so I spent a lot of time learning through studying youtube tutorial and speed modeling videos. The most challening part of this would have been the character modeling + rigging process. I modeled and rigged it several times until I was satisfied with the final outcome.

The first time was to get a player model done for animation and movement testing. The main problem I had was with clipping.
- When animated, the mesh had a lot of clipping since I made the body and clothes separately. The weight painting was a difficult process to try and minimize clipping as much as possible.
- This model also uses emissive materials rather than PBR (which means it would be self-lit), so in the final version I changed these to PBR since we needed the scene to be dark and lit by the lanterns and player's light only.

![firstModel](/img/how_to/create-a-game/firstModel.png)

The second one, I had troubles with the animations after rigging, so I decided to restart the whole process since my model must have been messed up somewhere. I referenced a ton of different rigging videos. Here are some of the videos were particularly helpful:
- [Royal Skies LLC Blender 2.8 Speed Tutorials](https://www.youtube.com/watch?v=f6vgICNCVxQ&list=PLZpDYt0cyiuu-sxJKbuYh8OjtgmXNacCV)

The third one is the one that's in the game right now! In order to fix the clipping problem I had with the other models, I joined all of the separate meshes. This made coloring the model really difficult, and I had to go back and clean up the areas where they were joined to make sure there weren't too many extra vertices. The weight painting process took a while, but at this point I was starting to get familiar with the process.

![finalModel](/img/how_to/create-a-game/finalPlayerModel.png)

These are some of the tutorials I watched for the animation process:
- [3D Animation Hub's Jump Animation](https://www.youtube.com/watch?v=VvTEovuTCgA)
- [Jayanam's Basic Running Cycle Tutorial](https://www.youtube.com/watch?v=0PkBq9NW7K8)

## Environment

Here are some of the youtubers I watched for inspiration on 3D Modeling environments!
- [Grant Abbitt](https://www.youtube.com/user/mediagabbitt)
- [Polygon Runway](https://www.youtube.com/channel/UCGSJevmBuDyxjLLOBNaYMGA)
- [MortMort's Gradient Texturing](https://www.youtube.com/watch?v=uOyiZaioX1U&list=PLR3Ra9cf8aV23C2oBB3aFLla6ABAPYiDk&index=5)

## 2D Art
I initially started out planning on using pixel art for all of the 2D assets, but I recently got this app called Procreate, so I wanted to try and see what I could do with it.

For the pixelart ui elements in the game, I used Aseprite with my wacom intuos drawing tablet, and for all of the other 2D art I used Procreate on my ipad air.

Both of these programs are amazing and have a bunch of different features that are really helpful. Both of these support animation, but aseprite can export your animation as a spritesheet, which was really helpful when bringing into babylon. Procreate can't create spritesheets so I had to bring them into piskelapp as a gif and then export as a spritesheet.

Procreate is really awesome to use, but I found that I had a lot of limitations when making the animations since I was limited to 25 layers which means I can only have a maximum of 25 frames if all of the lineart + coloring for each frame was done on one layer. Ultimately, I could only get to a max of about 12 frames for 1 animation. I use a lot of layers to keep things separate in case I need to change or move them later, especially since I had a few different elements that were going to be animated.

Both of these are paid programs, however there are free alteratives for each that I have used before:
- Pixel art
    - [Piskelapp](https://www.piskelapp.com/)
- Digital art
    - [Autodesk Sketchbook](https://www.sketchbook.com/)
    - [Krita](https://krita.org/en/)

## Resources
This is the pixel font I used for the dialogue. I always use this one for 2D games!  
Pixel font: [m5x7](https://managore.itch.io/m5x7) by Daniel Linssen

## Sounds
I wasn't able to get into sound development, but I have a list of different resources that include some free sound resources as well as some sites that let you experiment with music!
 - [Opengameart](https://opengameart.org/)
 - [Freesound](https://freesound.org/)
 - [Earslap](https://earslap.com/)
 - [BFXR](https://www.bfxr.net/)

If you're curious as to what songs and sound effects I used in the game:
 - Start/credits song: [copycat by syncopika](https://opengameart.org/content/copycat)
 - Game: [Christmas Synths](https://opengameart.org/content/happy-synths-loop-with-slight-christmas-feeling)
 - Pause: [Snowland Town by Matthew Pablo](https://opengameart.org/content/snowland-town)
 - Lose: [Eye of the Storm](https://opengameart.org/content/eye-of-the-storm)
 - SFX:
    - [Jump2 by LloydEvans09](https://freesound.org/people/LloydEvans09/sounds/187024/)
    - [Run/Walk](https://maysama.itch.io/free-footsteps-sound-effects)
    - [Fireworks](https://opengameart.org/content/25-cc0-bang-firework-sfx)
    - [Dash](https://freesound.org/people/potentjello/sounds/194081/)
    - [200 SFX](https://kronbits.itch.io/freesfx)
    - [Sound Pack](https://opengameart.org/content/level-up-power-up-coin-get-13-sounds)
    - [Selection](https://opengameart.org/content/8bit-menu-select)



Videos

Coming next

Explore 3D basics

Video tutorial - 3D basics with a software engine

WebGL basics

Video tutorial WebGL basics

Basic Components

Video tutorial - Basics of a scene with lights, cameras, and meshes, materials, and inputs

Materials and Inputs

Video tutorial - Learn about materials, shaders and how to work with inputs

Game Pipeline

Video tutorial - Working with Blender, using Sandbox, and exploring 3ds Max.

Loading Scene and Assets

Video tutorial - Load your scene, meshes, and assets. And take a look at offline mode

Advanced Features

Video tutorial - Discover the power of the physics engine and create your own shader

Light Effects and Bones

Video tutorial - Get a look at shadows, lens flares, bones, and physics

Video Courses

List of Babylon.js Video Courses

Online Zenva Course

Video tutorial Zenva Course

RTS Game Development

Video tutorial - RTS Game