Category Archives: Uncategorized

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… ¯\_(ツ)_/¯

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).

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

Great news chums!

khronoslogo

Khronos liked the cut of our jib and so now we’re the official Khronos London Chapter.

There are no immediate changes in the future, but I hope over time to add coverage of other Khronos technologies; OpenGL, OpenGL ES, OpenCL, etc..