Playing with WebGL & Three.js

I’ve been playing around with JavaScript lately: trying BackboneJS, developing a small project popup help, and reading good articles about ‘modern’ way to use JavaScript.

I still think ActionScript is better but there is one thing that I love most from JavaScript:

No compiling is needed!

I really really love this. You type your code (using Adobe Brackets or Notepad++), refresh your browser, and you see the result. That’s it 🙂 This allows faster workflow, you can easily try this and that and see the result immediately. With cool debugging tools from Google Chrome or Firebug on Firefox, you can check if there’s something wrong with your code on the browser.

Anyway, I’m currently trying Three.js for WebGL and so far I like it. The setup is easy, just like Away3D. Totally recommended if you’re familiar with Away3D or other 3D engine. Three.js also includes some python scripts for converting OBJ models into its on JSON-based model.

You can click the image below for my Milk Carton Boy model in WebGL using Three.js. Unfortunately, it only works if your browser support WebGL.

The source code is available on GitHub 😉

Pilot Cat: Game Teaser on Android

Teaser for my next game, this time it’s on my Samsung Galaxy S

Pilot Cat Teaser on Android

Pilot Cat Teaser on Android

It runs pretty well, around 30/30 FPS 🙂

I didn’t install the Adobe AIR 3.2 Release Candidate on my phone since the released version will be out soon. So I made the APK file with Air captive runtime, which means the package includes the AIR runtime inside your app.

I use the latest Away3D 4.0 but I had problem during compilation. I got a strange error message with depthAndStencil. Luckily, someone had the same problem with me and post the solution on Away3D forum.

Stay tune!

Exporting Metaseq to Away3d4

By the time I wrote this post, Away3D4 was still in alpha version. Unlike Away3D 3.X, there was no Metaseq parser/loader available 🙁 That’s not a problem since we can export MQO 3D model to OBJ using Metaseq itself. The problem is the export settings can be tricky and take some trials-and-errors to get it right.

Here’s what I did to export my MQO model to OBJ:

  • It’s better that you remove unnecessary layers like bone and anchor. Save your model as other file and remove those unnecessary layers.
  • Leave the size to 1.0
  • Away3D use different axis than Metaseq, we need to convert our module axis.Choose the axis to POV-RAY, this is the one that compatible with Away3D
  • Select the UV mapping and also select Invert V
  • Export Normal Vector and Grouping
  • You can export Material Library, which means Metaseq will export OBJ and MTL file. Since I prefer to embed my textures inside my SWF file, I uncheck this options and will assign the textures/materials later using ActionScript.
Export settings to OBJ

My export settings

If you have Flash Player 11 installed on your browser, you can click the image below to see the demo of loading OBJ exported for MQO.

Download the source code here (including MQO, OBJ, and FlashDevelop 4 project files)