Tag Archives: BabylonJS

Experiment with ECMAScript 6 on BabylonJS with TypeScript 1.5


via Experiment with ECMAScript 6 on Babylon.js with TypeScript 1.5.

This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible.

Since releasing babylon.js, the WebGL open-source gaming framework, a couple of years ago, we (with help from the community) are constantly exploring ways to make it even better. I’m definitely more than happy that we decided more than one year ago to switch over to TypeScript. For more on that decision, read why we decided to move from plain JavaScript to TypeScript for Babylon.js

Thanks to TypeScript, we’ve been able to improve the quality of our code, improve our productivityand create our fabulous Playground we’re so proud of: http://www.babylonjs-playground.com/, which provides auto-completion in the browser! We’ve also been able to welcome some new team members coming from a C# background and few JS skills with no pain. But thanks to the TypeScript compiler, we can also test the future without rewriting a single line of code!

We are still coding babylon.js using Visual Studio and TFS while pushing in a regular manner our code to the github repo. By upgrading our project to Visual Studio 2015 RTM, we’ve been able to upgrade it toTypeScript 1.5.

Creating an Accessible Breakout Game Using Web Audio and SVG


via Creating an Accessible Breakout Game Using Web Audio and SVG.

This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible.

As the co-author of Babylon.js, a WebGL gaming engine, I was always felt a little uneasy listening to folks discuss accessibility best practices at web conferences. The content created with Babylon.js is indeed completely inaccessible to blind people. Making the web accessible to everyone is very important. I’m more convinced than ever about that as I’m personally touched via my own son. And so I wanted to contribute to the accessibility of the web in some way.

Introducing Four: It’s WebGL, but Easier


via Introducing Four: It’s WebGL, but Easier.

WebGL has been around for a few years now and we have watched it mature into the reliable and widely supported graphics technology it is today. With big companies like Google, Mozilla, and Microsoft advocating for its use, it’s hard not being curious about it.

Since its specifications were finalized in 2011, it has gained a lot of attraction. With the help of frameworks like ThreeJS, BabylonJS and Play Canvas, this area has become less daunting. Thanks to them it’s much easier to pick up, but it still requires a good learning effort as it is a different discipline altogether.

This article will briefly introduce you to what WebGL is and then I’ll cover Four, a framework I created to help developers delve quickly into the WebGL world. In case you want to see what Four and WebGL can do for you, take a look at this simple demo I built.

What Do You Mean by “Shaders”? How to Create Them with HTML5 and WebGL


via What Do You Mean by “Shaders”? How to Create Them with HTML5 and WebGL.

This article is part of a web dev tech series from Microsoft. Thank you for supporting the partners who make SitePoint possible.

You may have noticed that we first talked a lot about babylon.js last year and most recently we’ve released babylon.js v2.0 with 3D sound positioning (with WebAudio) and volumetric light scattering.

If you missed the v1.0 announcement, first you can catch-up with the keynote for day two here and go directly to 2:24-2:28. In it, Microsoft evangelists Steven Guggenheimer and John Shewchuk demoed how the Oculus Rift support was added to Babylon.js. And one of the key things for this demo was the work we did on a specific shader to simulate lenses as you can see in this picture:

JavaScript like a Boss: Understanding Fluent APIs


via JavaScript like a Boss: Understanding Fluent APIs.

While designing Babylon.js v2.0 (a library for building 3D on the web), I recently found myself wishing that more APIs were fluent – that is, I wish the community could more easily read, understand, and build upon the work while spending less time in the tech docs. In this tutorial, I’ll walk through Fluent APIs – what to consider, how to write them, and cross-browser performance implications.

Understanding Collisions and Physics with BabylonJS and Oimo.js


via Understanding Collisions and Physics with Babylon.js and Oimo.js.

This article is part of a web dev tech series from Microsoft. Thank you for supporting the partners who make SitePoint possible.

Today, I’d like to share with you the basics of collisions , physics and bounding boxes by playing with the WebGL babylon.js engine and a physics engine companion named oimo.js.

Here’s the demo we’re going to build together: babylon.js Espilit Physics demo with Oimo.js

Video: Introduction and Deploying to WebGL 3D with HTML5 and Babylon.JS


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.

Understanding the Basics
Explore 3D basics, and take a look at 3D without hardware (creating a software engine)

WebGL Basic
Think of this as a WebGL 101 course, with a look at geometries and shaders, resources, and performance considerations.
Understanding Geometries and shaders

Using Babylon.js for Beginners
Take a look at basic scene components (lights, cameras, and meshes), materials, and inputs (gamepads, touch, oculus, and orientation), plus get insights on using the Playground.

Understanding Materials and Inputs
Learn about materials, shaders and how to work with inputs.

Game Pipeline Integration with Babylon.js
Examine working with Blender, using Sandbox, and exploring 3ds Max

Loading Assets
Load your scene, meshes, and assets. And take a look at offline mode.

Babylon.js: Advanced Features
Add collisions for first person display, and create your own shader

Special Effects
Get a look at shadows, lens flares, bones, and physics.