WebGL is not ready yet

I’ve been exploring WebGL for game development. So far, there are many things that I like. I love the fact that you don’t have to compile anything. Edit your source code, open it on a browser, and click refresh! You can even debug your code directly on the browser (I <3 Chrome)!

If you know Away3D, you might going to like Three.js. Three.js to WebGL is just like Away3D to Stage3D: easy to use, readable example codes, and has some high level functions for animations, particles, and models loading.

Everything sounds perfect, right? Unfortunately, when it comes to mobile and tablet support, WebGL is a big disappointment.

There is NO support for WebGL on mobile browser and tablet. If you check on caniuse.com, there is no WebGL on Android Browser, Chrome for Android, Firefox for mobile, nor the iOS Safari. Not even for the latest versions 😐

I’ve tried FireFox Beta & Dolphin Beta for Android, both claim to have WebGL support. Firefox displayed nothing while Dolphin only managed to show rotating globe with less than 1 frame per seconds. FYI, I tested this using my demo on my Galaxy S with Android 2.3.

Same problem with HTML5 Canvas. Although it is has better support than WebGL, the performance suffers a lot on mobile/tablet devices. I played some HTML5 games and sometimes the framerate drops to 5 fps. It could be the hardware or browser problem since the games run smoothly on iPhone4S/iPad3, or maybe it’s just the common problem of HTML5 games?

Sometimes I wonder, what’s the point of having your game in WebGL if it’s only available for desktop browser. You could’ve done it using Stage3D. Even better, with the help of Adobe AIR, you can compile the same source code and have your game running on mobile and tablet, either it’s Android or iOS.

Don’t get me wrong, I don’t hate HTML5. I do believe HTML5 and WebGL could be the future of web gaming. It’s just that it’s too much hyped but not ready for the present.

Is it useless to learn HTML5? Definitlely not! I can say that learning JavaScript makes me a better ActionScript programmer. How? I’ll write more detailed post about this one 😉

Stay tuned!

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 😉

Re-learning Javascript

Lately, I’ve been re-learning Javascript.

Back then in 2004, I used to use Javascript for doing some DHTML stuff (popups, DOM manipulation, …). Nowadays, people start using JavaScript in more structure way to avoid spaghetti code. So I learn how to use some MVC frameworks (like backbone.js or ember.js) and also make myself familiar with JQuery.

Here are some wip learning projects on my GitHub:

    • backbone-cellar: Forked from Coenraet’s Backbone tutorial. I implement Node.JS for the backend support.
    • Alaycator, a simple bookmarklet for converting any website into alay, some kind of Indonesian leetspeak which is popular among teenies 😀
    • todotodo-bootstrap: A simple todo list webapp using Backbone, Require.JS, and Twitter Bootstrap for the UI. Supports mobile and desktop, and stores the data on local database. Contains simple Node.JS script for testing on webserver. I plan to make the JQuery Mobile version of this, stay tuned!

I still think that ActionScript, as a language, is still much better than JavaScript. But the thing is, ever since HTML5 got its hype, JavaScript  has gained LOTS of momentum. People get really excited about it and build amazing things using JavaScript, even on server side.

There are lots of open source projects; people trying to contribute for making better tools or libraries, and all of these grow so fast. Even some Adobe Flex evangelists start promoting JavaScript and HTML5.

At certain point, unless Adobe do something, JavaScript will catchup and will be able to do anything that Flash can do. Hey, maybe that’s not a bad thing 😉

I believe Flash will not be dead soon and will focus more on what its best: High performance and rich multimedia web/mobile app, including games. I’m not saying that all of these things cannot be done by JavaScript but right now, I still think Flash performance is still the best.

If you want to learn JavaScript the ‘modern’ way, here are some suggestions:

  • Douglas Crockford’s JavaScript: The Good Parts. This is a must read! I find this book helps me to switch my mindset to JavaScript specific things like object/prototype, function closure, the bad parts, and also tips & tricks to avoid the bad parts which make your code more structured 😉
  • Addy Osmani’s Essential JavaScript Design Pattern. This book is available for free on his GitHub project. This book give some examples how to build more modular and structured JavaScript development.
  • Addy Osmani’s Backbone Fundamentals. Another free book from Addy Osmani, if you want to develop structured, large, and scalable webapp using Backbone.