Creating a 3D chart for your Windows 8.1 app using Babylon.js

Learn WebGL and Babylon.js at your own pace

Feel free to check out our online course 3D Programming with WebGL and Babylon.js for Beginners on Zenva Academy. The course covers the Babylon.js framework and explains all you need to get started with using this fantastic library in new or existing projects.

Tutorial

Windows 8.1 added the support of WebGL for Internet Explorer and JavaScript applications. This is a huge evolution because we are now able to unleash the raw power of the GPU even with HTML5 and JavaScript!

This power can be tricky to master and that’s why I created babylon.js. And using it, the wonderful world of accelerated 3D will welcome you.

Preparing the project

For instance, I always wanted to create an app to have my blog’s statistics at a glance.

If you want to get the final application, you can download the complete project here (127KB)

To do so, let’s start with a empty Windows 8.1 JavaScript app.

image

The first thing is to reference babylon.js (and hand.js for supporting touch events):

image

The default.html page should be changed to add a canvas and to reference babylon.js and hand.js:

Connecting babylon.js

As you may have seen in my previous postsbabylon.js needs to connect with the canvas through the BABYLON.Engine object. We can do that right after the completion of the processAll function:

Then we have to create some entities required to generate a complete scene:

The scene, a light and a camera to define the user’s point of view. Nothing special here.

Finally we have to connect the camera with the canvas (to allow the user to control the camera) and launch the render loop:

Creating the ground and the background

If we launch our app right now, it will be a little bit empty. Indeed there is nothing to display Sourire

Let’s add the ground and the background to create something like this:

image

The ground will be generated with BABYLON.Mesh.CreateGround (!!) and the background with BABYLON.Mesh.CreatePlane:

The main point to note here is the usage of a BABYLON.DynamicTexture: This object allows you to draw in a texture with a canvas. There are also some handy functions like drawText to simplify complex tasks. Instead of using drawText you could have written the following code (just for the sake ofcomprehension):

As you can see this is a regular 2D canvas code.

Adding the series’ data

Now it is time to add some data to display. For not complicating things up, we will consider static data but obviously you are free to use dynamic data:

Every entry is composed of a label, a value (which is a percentage) and a color.

To display them, we have to add a new function in our code:

For each entry, we create a box associated with a colored material. The box is then scaled depending on the entry’s value. The result is the following screen:

image

Shadows

The previous screen may look a bit flat. We can improve things up by adding dynamic shadows.

Real-time shadows are complex to produce (you need to create a shadow map and then use it in your shaders). But with babylon.js, you just have to create a BABYLON.ShadowGenerator and define which objects cast shadows and which objects receive shadows:

To cast shadows, boxes must be added to the shadowGenerator object:

The result is more beautiful, isn’t it?

image

Adding the legend

There is an issue with our chart: no one can say the value and the associated label of each box. That is why we need to add a legend.

Every box will be associated with a small plane with a dynamic texture filled with the label and the value of the current entry:

image

To do so, we have to update our createSeries function in order to generate a legend for each entry:

Sprinkling a bit of animations

Finally for the “waoouh” effect, I suggest we can animate the boxes: They will start with a 0 height and they will grow up to their effective value:

You can note that we create two animations: one for the scaling and one for the position (the pivot of each box is in the middle of the mesh).  Thescene.beginAnimation is then used to launch to animation.

Nothing complex here but a cool effect for the user Sourire

Conclusion

If you want to go further, you can consider embedding this code in a control and work with dynamic data to achieve a really mind-lowing way to display data.

 

Published by

David Catuhe

David Catuhe is technical evangelist lead at Microsoft France. He defines himself as a geek. He loves to develop with JavaScript and HTML5 but also with DirectX, C#, C++ or even Kinect (He wrote a book about it which is available on Amazon).David has a blog called Eternal Coding where he writes about HTML5, Windows, Kinect and 3D Development.

Share this article