Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

6. February 2017

 

In our previous tutorial we materials in our ongoing Babylon Tutorial Series but today we are going to take things a step higher up and let someone else worry about doing the work for us.  Today we will look at exporting 3D models from Blender for use in our game.  A number of exporters exist (3ds Max, FBX, Cheetah, Unity), but today we are specifically going to talk about using Blender.

First we need to download and install the plugin.  Fortunately they make a zip version available for download.  Head on over to https://github.com/BabylonJS/Babylon.js/blob/master/Exporters/Blender/Blender2Babylon-5.2.zip and click Download:

image

 

Save the zip file somewhere you will remember.  Now fire up Blender.  Select File->User Preferences…  then select the Add-Ons tab

image

 

Now choose Install From File… and select the newly downloaded zip.  Then in the filter area type “Bab” and Import-Export: Babylon.js should be available.  Simply check the checkbox to the right hand side to enable it.  We can now export our scene as a .babylon file for use in our game.  Simply select File->Export->Babylon.js:

image

 

There are no settings for the exporter, so simply pick your game asset directory and click Export Babylon.js Scene.  A .Babylon file and all of your textures will be created in your selected save location:

image

 

Now let’s look at the code required to load and display this model in our game:

    window.addEventListener('DOMContentLoaded', function(){
        var canvas = document.getElementById('canvas');

        var engine = new BABYLON.Engine(canvas, true);
        engine.enableOfflineSupport = false; // Dont require a manifest file
        var createScene = function(){
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3.White();


            var camera = new BABYLON.ArcRotateCamera("arcCam",
                    BABYLON.Tools.ToRadians(0),
                    BABYLON.Tools.ToRadians(0),
                    10.0,BABYLON.Vector3.Zero(),scene);
            camera.attachControl(canvas,true);
            var light = new BABYLON.PointLight("PointLight",new BABYLON.Vector3(
            0,0,0),scene);
            light.parent = camera;
            light.intensity = 1.5;

            BABYLON.SceneLoader.ImportMesh("","","ShippingContainer.babylon",
            scene,function(newMeshes) {
                newMeshes.forEach(function(mesh){
                    mesh.rotation = new BABYLON.Vector3(BABYLON.Tools.ToRadians(
                    45),0,0);
                }                );
            });

            return scene;
        }

        var scene = createScene();
        engine.runRenderLoop(function(){
            scene.render();
        });

    });

 

The magic is done using the Y() function call.  You can load a specific asset from within the .babylon file by specifying it’s name, but in this case we just want the whole thing.  Import mesh has a callback when the mesh is loaded ( it’s loaded async, so you need to use this callback ) and it’s passed an array of Mesh objects.  We simply loop through this array ( in this example it’s only one item long, so we could have just as easily done newMeshes[0] and accomplished the same thing ).  Sometimes you will need to reposition your objects when loaded due to different coordinate systems, this example shows rotating each mesh by 45 degrees along the X axis.

 

This example uses the ShippingContainer blend file available as part of the Patreon dropbox assets, but you can use any applicable Blend file to create the example.  If you are a Patreon support (thanks by the way!) you can find this model in Art\Blender\ShippingContainer and the code is all available (including the exported Babylon file) in Tutorial Series\Babylon\5 - PartFive – Models.

 

When we run this example, we should see:

GIF

 

The Video

Programming, Art , , , ,

31. January 2017

 

I found myself recently needed some rocks… I could easily download a collection of rocks, but I figured it would be extremely easy to just make my own.  My first thought was to simply take a cube, smoothly sub divide it a number of times, and apply a displacement modifier to it.  The end results however didn’t really bring the results I wanted:

Rock1

 

By the way, you can learn more about using the Displace modifier on my earlier tutorial on using Blender for level creation.

 

Ok, apparently this is going to take more than a few seconds…  hey… I wonder if there is a plugin?  Turns out, yes, yes there is.  The plugin add_mesh_rocks does exactly what it says.  You can download a tarball of the plugin here using the snapshot link.   You can get instructions for installing (a different but same process) plugin in Blender here.  Download and enable the plugin.

image

 

Once you’ve downloaded and enabled the plugin, there is a new option in the Add->Mesh menu, Rock Generator:

image

 

NOTE*** There seems to be a bug, the option wont be available if there isn’t any existing geometry in the scene.

TADA!

image

 

Ok, I admit, that looks a bit more like a kidney bean than a rock, but it’s a start.  If you look in the Tool (T) panel, you will see initial creation options for Rock Builder:

image

 

Click Generate materials if you want it to create a starting rock texture for you.  Every time you change any setting, you will get a completely different rock, like so:

Rock2

 

If you don’t want this behavior, turn off the random seed setting.  Once you’ve got a rock you are happy with… let’s destroy it!

 

Before we go to far though, if you dont want performance to absolutely crawl, we want to apply several modifiers that were created as part of the rock creation process.  Go to the modifiers tab and start applying the various modifiers:

image

 

OK, back to destruction.  The first and most obvious option is the Explode modifier.  There are a few steps we have to take here… first go into edit mode, select all the vertices and in the vertex data tab create a new vertex group.  Now apply first a particle system modifier, then an explode modifier.  Finally wire up the vertex group, like so:

image

 

The problem with explode is that it applies to the hull of the object only, so the results may not be way you want… as you can see:

Rock3

 

In some cases, that effect might be exactly what you are looking for.  Oh, and I turned gravity off to get the effect above. But if you instead want things to be a bit more… substantial, it’s time for a rethink.  In fact, it’s time for another plugin, but thankfully this one ships with Blender, it just needs to be enabled.   What you are looking for is “Cell Fracture”:

image

 

Once enabled, in Object mode, there will now be a new option available in the Edit section of the Tools tab:

image

 

Cell Fracture will split your object up into several solid pieces.  You’ve got tons of control over how the fracturing will occur.

image

 

What I personally did was changed source limit (number of pieces) down to 12 and unchecked “Next Layer” so the fracture occurs in the primary layer.  Now you will notice you’ve got several meshes instead of one:

image

 

In fact, you can now get rid of the source rock if you want.  You will notice your rock is actually 12 rocks now:

rock4

 

Instead of using a particle system like we did with explode, we are going to use Dynamics (Physics) instead.  Select all of the objects, switch to the physics tab and select Add Active.

image

 

This means all of our rocks will now participate in the physics engine.  To see the result, quickly add a plane to the scene, make it a rigid body and turn dynamic off:

image

 

And now press play in the timeline:

rock5

 

Now that looks much more realistic!  Now, what if we wanted our rock to explode instead of fall?  Well, physics are once again coming to our aid!  This time add a force field to the scene:

image

 

Then crank the strength way up (or lower the mass of your objects), like so:

image

 

Once again, I don’t want gravity to be part of the process, so I turn it off.  In the Scene tab, simply turn off gravity, like so:

image

 

And voila, exploding rocks!

Rock6

Art, General , , ,

2. January 2017

 

In our previous tutorial in the BabylonJS Tutorial Series we covered positioning a camera in our world.  There were still a few fundamental components missing, the top of which is lighting which we are going to cover today.  Lights are used to, predictably enough, illuminate your scene.  They interact with the color and materials on your various entities that compose your scene.  There are multiple different light types available in BabylonJS including the Point Light, Directional Light, Spot Light and Hemispherical light.  A point light is a single light source that radiates in all directions, like a naked lightbulb for example.  A directional light in a radiates just in the direction it is pointed and it goes on forever with no fall off basically illuminating everything in its path regardless to distance.  A spot light is similar to a directional light but it does fall off over a given distance and is cone shaped.  A flashlight is a classic example of a spot light, as of course is a spot (or search) light!.  A hemispherical light is generally used to represent an ever present ambient light source, the sun being perhaps the most common example.  You can also emit light from textures using their emission property, but we will cover that at a later point.  In this tutorial we are going to implement a point and a spot light.

 

There is an HD video version of this tutorial available here.

 

Let’s start with a point light.  It’s a simple light that radiates from a single point (thus the name) in all directions.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../Common/Lib/babylon.max.js"></script>

    <style>

        #canvas {
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    window.addEventListener('DOMContentLoaded', function(){
        var canvas = document.getElementById('canvas');

        var engine = new BABYLON.Engine(canvas, true);

        var createScene = function(){
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3.White();

            var box = BABYLON.Mesh.CreateBox("Box",4.0,scene);
            var camera = new BABYLON.ArcRotateCamera("arcCam",
                    BABYLON.Tools.ToRadians(45),
                    BABYLON.Tools.ToRadians(45),
                    10.0,box.position,scene);
            camera.attachControl(canvas,true);

            var light = new BABYLON.PointLight("pointLight",new BABYLON.Vector3(
            0,10,0),scene);
            light.diffuse = new BABYLON.Color3(1,0,0);


            scene.actionManager = new BABYLON.ActionManager(scene);
            scene.actionManager.registerAction(
                    new BABYLON.ExecuteCodeAction({ trigger:
                            BABYLON.ActionManager.OnKeyUpTrigger, parameter: " " 
                            },
                            function () {
                                light.setEnabled(!light.isEnabled());
                            }
                    ));

            return scene;
        }

        var scene = createScene();
        engine.runRenderLoop(function(){
            var light = scene.getLightByName("pointLight");
            light.diffuse.g += 0.01;
            light.diffuse.b += 0.01;
            scene.render();
        });

    });
</script>
</body>
</html>

 

There are a couple things illustrated in this example.  Creating a point light is done by calling new BABYLON.PointLight(), passing in the ID of the light, the position of the light in the world and finally the scene in which the light exists.  You can set the color of the light by setting it’s diffuse property, in this case we set it to full red only.  You will notice this example also shows a new concept in BabylonJS, the ActionManager.  This is a way of wiring code to specific events.  In this case we add some code that will be fired when the space key is pressed.  That function simply turns off and on the light source by calling setEnabled() passing a true or false value.  In the render loop we also slowly increase the lights green and blue components, so you can see the effect of diffuse lighting on the scene.  When you run this code you should see:

GIF

 

Lights are implemented as part of the GLSL shader process and the active lights in the scene are passed to each StandardMaterial in the scene.  By default the standard material is limited to a maximum of four active lights.  This value can be overridden using the maxSimultaneousLights property of the StandardMaterial, although this may have some impact on performance, especially on mobile targets.

 

Next lets look at implementing a spot light.  As with all things BabylonJS, the process is quite similar:

<script>
    window.addEventListener('DOMContentLoaded', function(){
        var canvas = document.getElementById('canvas');

        var engine = new BABYLON.Engine(canvas, true);

        var createScene = function(){
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3.White();

            var box = BABYLON.Mesh.CreateBox("Box",4.0,scene);
            var camera = new BABYLON.ArcRotateCamera("arcCam",
                    BABYLON.Tools.ToRadians(45),
                    BABYLON.Tools.ToRadians(45),
                    10.0,box.position,scene);
            camera.attachControl(canvas,true);

            var light = new BABYLON.SpotLight("spotLight",new BABYLON.Vector3(0,
            10,0),new BABYLON.Vector3(0,-1,0),
                    BABYLON.Tools.ToRadians(45), // degrees the light fans out
                    0.1, // falloff/decay of the light over distance
                    scene);

            return scene;
        }

        var scene = createScene();
        engine.runRenderLoop(function(){
            var light = scene.getLightByName("spotLight");
            light.position.y -= 0.01;
            scene.render();
        });

    });
</script>

 

In this example we create the spot light with a call to new BABYLON.SpotLight, passing in the id, position, direction vector, the degrees or arc of the light cone, the rate the light falls off over distance and finally the scene to create the light in.  In this example instead of changing the color of the light each frame, we instead move it slightly.  Run this code and you should see:

GIF2

 

As the light is pulled back the fall off cone is quite prominently displayed.  Of course the lack of textures makes this example more than a bit stark, so that is what we will cover in the next tutorial.

 

The Video

Programming , , , ,

15. December 2016

 

Welcome to the next part in the ongoing Closer Look At game engine series.  The Closer Look series combines a review, overview and getting started tutorial in one and aims to give a developer a good idea ofs2closerlook a given game engine is a good fit for them or not.  Today we are looking at the S2Engine, which is a commercial game engine available for purchase on Steam.  Right off the hop the S2Engine is going to have two major strikes against it for many game developers.  First, it’s Windows only.  Figured I’d get the out of the way right up front as if you are looking to create cross platform games, this is not the engine for you.  Second, it’s commercial and closed source, although the price tag is quite low at around $20USD.

 

As always there is an HD video version of this review available here.

 

Without further ado, let’s jump in to the S2Engine.

 

The Tools

The entire development experience in the S2Engine takes place in the S2EngineHD Editor.  Here is the editor in action running the included sample scene:

s1

 

The S2Engine Editor is absolutely loaded with tools, lets take a guided tour.  First off we have the scene window where you can see a live rendering of your game in action:

sceneoptimized

 

Please keep in mind the fuzziness in the picture above comes from the animated gif process, the real-time viewport looks vastly superior to the image above.  The Scene view is where you place entities in your scene and preview the results.

 

You can switch between the various available tools using the following toolbar:

image

Or via menu:

image

 

The Project Window

image

 

This is where the various assets of your game are organized.  It’s an analog to the underlying file system of your project.  The buttons across the left enable you to filter the various different objects ( Animations, Models, FSMs, etc ).

 

The Class Window

image

 

This is where you can instance various game objects.  Select an object, click Create and then click within the scene to place the entity.  The newly created entity (or a selected entity) can then be configured using the lower Params window, which is context sensitive to the selected object.

 

Terrain Tools

image

 

S2Engine has a full terrain editing system in.  The Terrain tool enables you to interactively edit the scenes landscape (height map).  There are tools for raising/lowering, flattening, stepping and painting terrain as well as drawing roads and vegetation.  The actual editing is done in the scene window:

terrain

 

Model Window

image

 

S2Engine supports 3D animated models of FBX format, simply click the Import button in the Project view:

image

 

There are multiple different panels for configuring models, setting and handling animations, managing joints/bones and even vertex level manipulations.

image

 

There is also an animation panel.

image

This enables you to blend animations together, set and remove animation keys and of course, preview animations.

 

Material Window

imageimage

 

A detailed material system allowing multiple layers.  You can control diffuse and normal maps, UV tilting, lighting properties and more.  You also have control over detailed material attributes like alpha blending, animations, scattering, light emission and more.

 

Special FX

image

 

Fine tuned control over multiple special FX of types weather, post processing and environmental.  Fine tune control over all aspects, including water fx, sky, weather, lens effects, etc.  You also have fine tune control over day/night cycles using a keyframe system:

image

 

Cutscene Tool

image

 

S2Engine has a complete system in place for authoring cut scenes.  Includes a curve editor:

image

 

As well as a detailed timeline:

image

 

Hierarchy

image

This is essentially your scene graph.

 

Font Tool

image

Enables you to create png textures for fonts of varying dimensions with font preview.  Fonts are imported in fnt format created using the BMFont tool.

 

GUI Editor

image

Currently in Beta, there is a UI editor available.  You can create a hierarchy of UI widgets and configure them using the Params class panel.

 

imageimage

Currently supported widgets include button, slider, frame, input box, combobox, label, checkbutton, colorbox, image, listbox, groupbox, tabbox and rangeinputbox.

 

Publishing

When you are complete publishing is a pretty straight forward process.  This is one of the advantages of only supporting a single platform publishing is as simple as choosing a file name, starting scene, main script (entry point) and a few other settings and clicking the Publish button.

image

 

Coding

There are two ways to code in S2Engine.  You can use their own scripting language or the visual FSM (Finite State Machine) visual programming language.  The scripting language has the sc2 extension and has a C like syntax.  You can read the language reference here while the API documentation is available here.  Scripts are simply connected to (and thus control) game objects.  Here is an example script that controls a jeep found in the demo game.

#message TakeControl
#message LeftControl
#message LockWaypoints
#message UnlockWaypoints

#use "engine.wav"

var float acc;
var float steer;
var bool brake;
var bool control;
var float steerAng;
var string steerNode;
var string handsNode;
var float oldsteerAng;
var bool _on;

function void Init()
{
	_on=false;
	control=false;
	steerAng=0.0;
	steerNode="steer";
	handsNode="hands";
	AICreateObject(false,false,205.0,200.0);
	resetNodeFlags("camera","visible");
	resetNodeFlags("hands","visible");
	SetSource(10.0,15000.0);
}

function void PostInit()
{
	SetPerObjectMaterialData(3,0.0);
	resetNodeFlags("light01","visible");
	resetNodeFlags("light02","visible");
	_on=false;
}

function void update()
{
	if(control==true)
	{
		acc=0.0;
		steer=0.0;
		brake=false;
		RotateNode(steerNode,"rgt",-steerAng);
		RotateNode(handsNode,"rgt",-steerAng);
		
		SetSourcePitch((PhysicsGetVehicleRPM()*0.0025)+1.0);
		/*LOG( string(PhysicsGetVehicleRPM()) );*/
		
		if(IsKeyPressed("w"))
		{
			acc=1.0;
		}
		if(IsKeyPressed("s"))
		{
			acc=-0.5;
		}
		oldsteerAng=steerAng;
		if(IsKeyPressed("d"))
		{
			steerAng=steerAng+(frametime);
			steer=-1.0;
		}
		else
		{
			if(IsKeyPressed("a"))
			{
				steerAng=steerAng-(frametime);
				steer=1.0;
			}
			else
			{
				steerAng=0.0;
			}
		}
		if(IsKeyPressed(" "))
		{
			brake=true;
		}
		if(steerAng>=35.0)
		{
			steerAng=35.0;
		}
		if( steerAng<=(-35.0) )
		{
			steerAng=-35.0;
		}
		steerAng=ScalarInterpolate(oldsteerAng,steerAng,(frametime/200.0));	
		RotateNode(steerNode,"rgt",steerAng);
		RotateNode(handsNode,"rgt",steerAng);
		PhysicsVehicleControl(steer,acc,brake);
		
		if(acc!=0.0)
		{
			var vec3 fwdaxis;
			fwdaxis=GetWorldAxis("fwd");
			SendMessageMulti("pushOut",string(fwdaxis),400.0,"null");
		}
	}
	else
	{
		PhysicsVehicleControl(0.0,0.0,true);
		if(ObjectIsInRange("player01",300.0))
		{
			SendMessageSingle("player01","DriveVehicle","");
		}
	}
}

function void message()
{
	if( ReceivedMessage("TakeControl") )
	{
		/* lights control */
		var float tod;
		tod=float(GetLevelParam("TimeOfDay"));
		LOG("tod"+string(tod));
		if( (tod>=18.0) && (tod<=24.0) )
		{
			SetPerObjectMaterialData(3,1.0);
			if(!_on)
			{
				SetNodeFlags("light01","visible");
				SetNodeFlags("light02","visible");
				_on=true;
			}
		}
		if( (tod>0.0) && (tod<6.0) )
		{
			SetPerObjectMaterialData(3,1.0);
			if(!_on)
			{
				SetNodeFlags("light01","visible");
				SetNodeFlags("light02","visible");
				_on=true;
			}
		}
		if( (tod>6.0) && (tod<18.0) )
		{
			SetPerObjectMaterialData(3,0.0);
			ResetNodeFlags("light01","visible");
			ResetNodeFlags("light02","visible");
			_on=false;
		}
	
		/*=======================================0*/
		control=true;
		SetNodeFlags("hands","visible");
		PlaySound("engine.wav",true);
	}
	
	if( ReceivedMessage("LeftControl") )
	{
		control=false;
		ResetNodeFlags("hands","visible");
		StopSound();
		SetPerObjectMaterialData(3,0.0);
		ResetNodeFlags("light01","visible");
		ResetNodeFlags("light02","visible");
		_on=false;
	}
}

 

It’s a straight forward enough language, but I generally prefer that engines use an off the shelf scripting engine instead of rolling their own.  This gives the community access to a much larger source of expertise, sample code and generally is much more time tested and stable.  As you can see from the script above, much of the logic and communication is implemented via message passing.

The majority of in game programming however is done using FSM (Finite State Machines ) via the FSM graph.

s2

If you’ve ever worked in Blueprints in Unreal Engine or Flowgraph in CryEngine you should have a pretty good idea how FSM programming works.  You’re code responds to various events and creates program flows using a series of connecting cables to other states.  Each node can have multiple actions, configured like so:

s3

There are dozens of states available, and new ones can easily be created.

image

Variables are easily created as well.

image

In addition to local variables, parameters and globals can also be defined.

image

 

 

The Documentation, Community and Content

The S2Engine has a decent amount of documentation, reference materials, getting started videos and beginner projects.  There are however a few issues, the first of which is English.  The developers primary language is not English and it shows on occasion in the documentation.  The actual UI is very well translated but some of the documentation  is certainly a tad “Engrish”.  Worse, some of the linked starting videos aren’t in English at all.  I have no issue with non-English videos, but I would recommend not linking them directly from an English localized application.

In terms of actual available documentation, there is a Wiki available here, a very solid reference manual available here, and a series of video tutorials available here.  S2Engine also comes with the beginner scene you’ve seen throughout this review.

The community for S2Engine isn’t huge but there is an active forum.  There is also a Trello bug tracking board available on Trello as well as a few other community options.  One impressive thing about the engine is the engine developer is very responsive to user requests and feedback.

One interesting aspect of the S2Engine is the existence of Content DLC.  These are themed content packs you can download and use in your game.  Currently the only content pack is the Medieval content pack shown in the video below. There is another content DLC pack in the works.

 

 

Conclusion

I pointed out the two biggest negatives to this game engine in the very first paragraph.  It’s Windows only, both for tooling and target platforms.  It’s closed source and commercial.  For many those are going to be big enough deal breakers that nothing else really matters.  For the rest though, is this a worthwhile engine?  For a small team effort, there is a massive amount of functionality included in this engine, it’s capable of some staggeringly pretty results and the workflow, once understood, is pretty accessible to people with limited programming experience.

My biggest recommendation to the developer behind this engine is to make a proper demo available.  What will get people to use this engine over the other options is that they prefer the workflow, the tools, the built in assets, etc.  The lack of a current demo is going to vastly limit the potential audience.  Even with a low price tag, few people will spend money to evaluate an engine and having a previous weaker version of your engine available as the trial is certainly a mistake.  When you go to the download section of the website, you are greeted by this text:

NOTE: The version to be downloaded here (1.4.5) is a previous, very old, FREE BETA version. It is useful just for letting you to view How S2ENGINE HD is organized and How it works. It doesn’t represent the final quality of the 1.4.6 Steam version.

This is quite simply a mistake.  A demo is about selling people on your engine, so having them experience a “very old” version is a bad idea.  Always put your best foot forward when showing an engine.  I would recommend creating a version of the current engine that is full featured but either time locked, save limited or publish limited.  You will have a great many more developers willing to give your engine a try. 

I have found the performance to be a bit inconsistent.  I was running consistently at 70+ FPS, then struggled to hit 15FPS for a while with a ton of UI glitches.  Upgrading to the newest nVidia drivers didn’t help.  Then oddly, switching Optimus to use the integrated GPU, then back to dedicated seemed to fix the problems.  Hopefully these problems are localized to me and not widespread.  I wish the developers used a standard UI toolkit like Qt, as their custom implementation can be a bit buggy or not perform as you’d expect.  I also unfortunately experienced a half a dozen crashes while evaluating the engine, including one while making the video version of this review.

 

The Video

Programming , ,

9. November 2016

BabylonBannerSplattered_thumb[3]

Welcome to the GameFromScratch.com tutorial series covering the BabylonJS HTML5 game engine.  The home page of the series is available here.  For each tutorial in the series there is both a text and video version available.  In this post we are simply going to introduce the BabylonJS engine, the scope of this tutorial series and discuss why you might want to use the Babylon engine and also some of the alternatives available should you decide not to.  If you’ve already decided on using the BabylonJS game engine, jump forward to the next tutorial.

 

BabylonJS Overview

I’m not going to go into a great deal of detail on the functionality included in BabylonJS as I have already featured this game engine in the Closer Look game engine series.  Instead we are going to take a quick top level look at the engine features.

 

Why Choose BabylonJS

So, why is the BabylonJS game engine a good choice for you?

  • Open source (Apache 2 license) and free to use
  • Full featured 3D game library (scene graph, physics, particles, models, sprites, etc)
  • Compatible with most modern WebGL browsers
  • Excellent tooling, including level editor, Unity exporter, model converters
  • Good documentation, samples and other learning materials

You can read the full feature set here.

 

Why Not Choose BabylonJS?

So we mentioned a number of Babylon’s strengths, but why would you *not* choose to use BabylonJS?  Well, beyond the fact you may not like how they implement things the biggest reason all comes down to your priorities.  WebGL performance isn’t on par with desktop OpenGL or even OpenGL ES, so there is a bit of a performance penalty at work here.  While HTML5 applications can be wrapped to run as applications on various mobile devices, again there is a price to be paid, in both performance and labor.

At the end of the day, personally, I think a lot of it comes down to your primary target.  If you are creating a browser game first and foremost, I recommend working in a browser native library such as BabylonJS.  This has the most direct workflow, is easiest to debug, etc.  If on the other hand the browser is just another target for you you are probably better off working in a game engine that also targets HTML5, such as Unreal or Unity.

 

Alternatives to BabylonJS

Shockingly there aren’t actually a ton of HTML5 3D game engines or frameworks like BabylonJS.  The most direct alternatives are:

 

By no means is that an exclusive list, but it does represent some of the most common 3D engines with WebGL as their primary target.

In addition to these engines several 3D engines offer HTML5 as a target including Unreal, Unity, Godot and many more.  The primary challenge with these options is the generated code is often illegible, acting almost identically to a compiled binary.  So if things don’t work right you are dependent on the engine developer to fix things.  Or if you wish to use a native browser feature, you are again dependent on the engine developers to support it in some form.

 

Enough overview, lets jump into the technical details.  I am aiming to keep each tutorial somewhat short and concise, both text and video versions.  Stay tuned for the first tutorial covering getting BabylonJS up and running.

 

The Video

Programming , , , ,

Month List

Popular Comments