More FBX — this time with Mixamo and Babylon.js

Ah, yes! FBX, the sodding nightmare that just keeps on giving. I just want to get on and do some programming! Is that too much to ask?!?

Model source Mixamo’s Pearl.fbx (other formats supported: DAE and BVH).

Babylon.js has no built-in support for FBX  , requiring conversion with their

Unity3D ➔ Babylon exporter

It looks like normals are inverted, clipping is set incorrectly or something similar.

Additionally, the normal map texture needs to be marked as such. Fixing that is only a slight improvement.

After a bit of research it turns out to be a transparency setting.

Now we’re cooking.

Babylon standalone converter

Nope! It looks inside out.

The import shows similar problems Unity. Unfortunately, despite messing around with normals, winding order and transparency in Babylon, I haven’t been able to rescue the model.

Blender3D ➔ Babylon exporter
The Blender exporter really choked on this model.
The import looks OK, apart from the missing textures.

Dude! Where’s my textures???

However, it complained about being unable to export due to an armature.

Oh noes!

Once the armature was removed, something was exported.

Lookin’ shady. Too shady.

I’m not a user of Blender (I’m not a fan of it’s idiosyncratic interface, and dammit! I’m a doctor… er, programmer not an artist) so I called time on this abortive effort.

Clara.io
Clara.io doesn’t quite make it. Which is a pity as I really like it.

Eye-balls around the ankles is not a good look

Alas, the foot ‘n’ balls issue persists in the export.

Summary
FBX is a complex and proprietary format, clearly not all APIs can handle all the variations. We should probably be grateful that we get any import functionality.

Ultimately, this is a win. I have at least one viable fall back should PlayCanvas fail. I’m also hoping that the Three.js FBX importer gets the kinks ironed out and comes on line soon.

There is further research to be done, e.g. with glTF and JSON formats.

FBX with PlayCanvas

I decided to use the “Pearl” model from Mixamo to experiment with animation and (as it turns out) importing FBX files.

Importing into PlayCanvas is straightforward, simply drag and drop the FBX into the assets area. PlayCanvas converts the file to JSON format with associated textures (in PNG format) and materials. You end up with two JSON files (not sure why) but it’s fairly obvious which is the one to use.

The model can now be added to the scene.

There were problems with the eyes, they were black and the eyelashes were solid black.

Dear god! No!

Frankly after a long day I was fed up and knocked off for the day, after leaving a request for help on the PlayCanvas forums.

After some very helpful suggestions by Steven Yau, I was able to tweak some settings to correct the model.

A black specular colour tint fixed the eyes.

Looking good

Setting the opacity blend type to alpha fixed the black eyelashes, but caused them to act as a stencil straight through the poor model’s head when viewed from below.

Will the horror never end!?!

Setting opacity “alpha to coverage” fixed the clipping eye syndrome.

Finally! Yay!!!

Maybe now I’ll be able to get on with coding… nah… ¯\_(ツ)_/¯

Down the rabbit hole with FBX

PlayCanvas

PlayCanvas does an admirable job of importing FBX models and animations, but animation control seems limited. In particular, there seem to be no events for animation start, end, etc.

Animated Sackboy

This immediately prompted me to stop and reassess all my requirements (and not just animation).

Workflow

  1. I felt that I would almost certainly need more control over animation events than PlayCanvas provides.
  2. PlayCanvas only has version control (very important) for legacy scripts.
  3. A fall back is needed if PlayCanvas fails for some reason (e.g. it’s cloud based, so poor internet or even just high contention would be problematic).

Using an API would immediately address issues 2 and 3. This leaves FBX support as the main issue.

It’s apparent that game creation requires a smooth workflow. Easily getting assets into the game is very important, regardless of their source. Be it pre-existing from a store or newly created by an on-site 3D artist, assets have to come from somewhere, and FBX is one of the more common formats particularly for animation. FBX support is very important.

Checking out the main alternatives:

Babylon.js

Babylon.js doesn’t support FBX directly. I was advised to use the Babylon exporter for Unity or Blender. Alas, the results were not impressive.

Source model (Pearl.fbx) as should be

Model after exporting to Babylon (from Unity and Blender)

Clara.io has an “export to Babylon” option, unfortunately its own FBX import is lacking, and I’m still trying to work out how to add animation to a model.

Model after import into Clara.io

Three.js

Three.js currently only supports ASCII FBX not binary (Takahiro is doing some sterling work to add binary FBX).

Current state of FBX import to Three.js (not released yet)

So, it may be a contender if support is available in time, but for now it’s back to PlayCanvas.

Conclusion (if you can call it that)

Converting 3D assets seems inevitable, to reduce file size and minimise load time (even PlayCanvas converts FBX to JSON).

I will look into FBX – glTF or JSON converters, but for now I’m returning to PlayCanvas (in fact, PlayCanvas engine is also available, so it’s its own fallback).

Choosing a framework/engine

Naturally, I want to work on a WebGL based game. This automatically makes it web based with all the attendant benefits and disadvantages.

My first choice is PlayCanvas (free version), which is like a (simplified) on-line Unity. The only alternative that I know of, GooCreate, sadly declared bankruptcy a few months ago.

Pros

  • on-line editor (drag ‘n’ drop)
  • six years old (so relatively mature and stable)
  • support is through forums for free accounts
  • FBX support
  • collaboration

Cons

  • no download for off line storage
  • no version control
  • limited animation control

Develop Game Jam

I’ll be attending this year’s (2017) Develop Game Jam in July.

I usually just ruck up on the day and use the opportunity to learn a bit about some game development technology or techniques.

While fun and educational, this is not the ideal way to compete. Frequently, I achieve little by way of a final result.

This year, I thought I’d actually do some real preparation and take a real stab at completing a “proper” game.

I plan to use WebGL (naturally), so I’m focusing on PlayCanvas, along with Three.js and Babylon.js as possible fall backs.

If things really go pear shaped there’s always Unity (or possibly Unreal or CryEngine).

I intend to blog the process for reference purposes and I’ll add links to blog/articles as I progress.

Workshop 19 – Image Processing with WebGL

Thursday, 10th December – Arrival from 6:15 for a 6:30 start
at Skills Matter | CodeNode, London

In this workshop, we’ll have a look at how to use WebGL to apply special colour effects to our images.

This workshop will also be an opportunity to cover the basics of matrices in WebGL and GLSL, and make them easier to approach.

The end goal is to build a very simple playground app that will allow you to experiment with image filters on your own.

Presenter: Alvin Ourad

Pizza!

Arrival from 6:15 for a 6:30 start.

Prerequisites

*  A laptop with a browser that supports WebGL (http://get.webgl.org/) and your favourite editor.

*  A desire to learn.

Register

If you’re planning on attending please RSVP (above) and register on the SkillsMatter site (https://skillsmatter.com/meetups/7603-webgl-workshop-december-2015).

Workshop 16 – Light and shadow made easy… with Three.js

Tuesday, 2nd June – Arrival from 6:15 for a 6:30 start
at The Skills Matter eXchange, London

Free, as usual

Highlights include

No maths!

Overview:
·  WebGL and GLSL
·  Light, shade, materials, textures and shadows.

Three,js – How to:
·  set up a scene
·  define and apply a material
·  add lighting
·  add shadows

Bonus… thing
A look at SketchFab, which allows the embedding of 3D models into web pages using WebGL.

Pizza!

Prerequisites
• A laptop with a browser that supports WebGL (http://get.webgl.org/) and an editor that can handle HTML and JavaScript.
• Some knowledge of HTML and programming, preferably JavaScript (or similar).
• Some features may require a server (e.g. image loading), although there are workarounds. (Brackets.io and Visual Studio provide one, or you can use node.js or whatever you’re comfortable with.)

Register
If you’re planning on attending please RSVP on our MeetUp site and register on the SkillsMatter site (SkillsMatter.com).

Workshop 14 – Introduction to WebGL

Thursday, 12th March – Arrival from 6:15 for a 6:30 start
at The Skills Matter eXchange, London

Free, as usual

An introduction to WebGL and shaders (GLSL), for those who have no experience of WebGL. In this session we’ll cover the WebGL basics – set-up, basic interaction and simple animation.

The aim is to program a dice the user can “roll” with the mouse.

I’ll keep the maths to a minimum (no quaternions, honest).

The demo code from the first workshop should provide a good foundation, but there will be plenty of pretty (and hopefully informative) slides available… quite probably on-line “handouts”.

Prerequisites
• A laptop with a browser that supports WebGL (http://get.webgl.org/) and an editor that can handle HTML and JavaScript.
• Some knowledge of HTML and programming, preferably JavaScript (or similar).
• Some features may require a server (e.g. image loading), although there are workarounds. (Brackets.io and Visual Studio provide one, or you can use node.js or whatever you’re comfortable with.)

Register
If you’re planning on attending please RSVP on our MeetUp site and register on the SkillsMatter site (SkillsMatter.com).

WebGL evening of networking and talks

The Khrons London Chapter / WebGL Workshop is hosting a WebGL network evening with talks.

Thursday, February 12, 2015, 6:30 PM to 9:00 PM
Innovation Warehouse
1 East Poultry, 1st Floor, London, EC1A 9PT

With after meetup drinkies at the Butcher’s Hook and Cleaver (here).

Speakers:

Ken Russell (@gfxprogrammer, Software Engineer, Chrome GPU team, WebGL Chair)
Ken will speak a little about the current state of WebGL and show some demos.
http://gfxprose.blogspot.co.uk/

Rob Bateman (@robnet, Away3D)
WebGL in Typescript – getting started with AwayJS
A look at how Typescript can leverage WebGL to allow a cleaner approach to accelerated GPU graphics. We’ll use the new framework AwayJS to get setup, look at code examples and cover several workflows for assets, including a brand new plugin for Flash Pro allowing 2D animation exports.
http://away3d.com/
http://www.infiniteturtles.co.uk/blog/

Maksims Mihejevs (@mrmaxm , PlayCanvas)
Maksim will talk about Physically Based Rendering (PBR) in WebGL, how useful and industry possible it is, and the complications of implemention in WebGL and tools workflow.
https://playcanvas.com/
http://moka.co/

Alvin Ourad (@alvinsight, Goodboy Digital, pixi.js)
Alvin will speak about how the widespread usage of WebGL has exploded thanks to its increasing ubiquity and will touch on how they leverage it at Goodboy Digital to add an extra level of visual finesse and fun, and probably a sneak peak at the new version of pixi.js.
http://www.goodboydigital.com/
http://www.pixijs.com/

Benjamin Blundell (@secti0n9, Section 9)
“WebGL minus Web” – This talk consists of three short demos of WebGL projects that were designed to be used outside of a traditional web-browser (at least partially). Each one caters to a very different audience, with very different engineering concerns and development cultures affecting the build along the way.
https://www.section9.co.uk/posts/2014-05-28-Equatorie.html
https://www.section9.co.uk/posts/2014-12-12-Bullseye.html
https://www.section9.co.uk/posts/2014-09-26-Echo-Forms-Live-Gig.html

RSVP
http://www.meetup.com/WebGL-Workshop-London/events/219803097/

Workshop 12 – Christmas comes to Babylon Three

Christmas comes to Babylon Three (an Introduction to Babylon.js and Three.js)
Tuesday, December 16, 2014 – Skills Matter, London

being an introduction to those most noteworthy of WebGL enablers — Babylon.js and Three.js wherein we shall endeavour to render a simple electronic Yule Tide scene for each.

In keeping with the seasonal theme there will be door prizes (Packt ebooks on the subject of Three.js or WebGL supplied by my good self).

The supply of Pizza and certain beverages may also be arranged.

Arrival from 6:15 for a 6:30 start.

And a merry Christmas to one and all.

Prerequisites
• 
This is a hands on session. A laptop with a browser that supports WebGL (http://get.webgl.org/) and your favourite editor.
• Some knowledge of HTML and programming preferably Javascript (or similar).
• Some features will require a server, although there are workarounds. (Brackets.io and Visual Studio provide one, or you can use node.js or whatever you’re comfortable with.)

Register 
If you’re planning on attending, please RSVP and register on the Skills Matter site: https://skillsmatter.com/meetups/6734-christmas-comes-to-babylon-three-an-introduction-to-babylon-js-and-three-js