WebGL Helicopter update

Ok, I know videos are only so good and you probably want to try the real thing – I get it!  It’s almost there!  I just have to clean up a few things to make it not so frustrating because flying the helicopter in and of itself will probably most frustrating 😉  If you ever played Battlefield 1942 with the Desert Combat mod and learned how to fly the helicopters there, this will be JUST like that.  I loved flying the helicopters in that game – and ever since then it’s just gone down hill.  They keep putting baby controls on the stupid things and it just ruins the cool factor IMO.  Yeah it was hard to fly, but once you got it, you owned just about anyone and everyone in the game.

Anyway, I originally mimic’d the physics and that worked ok, but then thought why not dive into a javascript physics engine and really get dirty.  So, I picked up Ammo (which is a straight API port of Bullet) and armed with very little in terms of documentation and examples was able to mimic the flight experience I’d created in Unity3D.  I’ll definitely be posting some examples and explanations of things I learned so sit tight for that – I’ll definitely attempt to de-mystify using Ammo as much as I can.

Goo Create IDE

If you saw the earlier post where I had an industrial area, you’ll notice that this time the scene is completely different.  I wanted to play with the different shaders and post processing affects and after playing with Goo I was inspired to recreate the scene I’d created there, here.  Goo definitely makes it a million times easier to achieve this look (another post for another time).  The floor is a mirror which has a nice subtle smoke / noise map and the only effect I applied was a vignette.  The performance so far is good at 60fps, but after adding the skyscrapers it’s starting to show signs of hitting the performance cap.

At this point, my overall impression of WebGL development is both inspiring and disappointing and somewhat cruel.  Documentation is probably my biggest gripe.  For Ammo, I had to go to Bullet’s API and docs and for examples, I just had to search the web for anyone who might have used Threejs with Ammo.  Thankfully, there was just enough to answer the basic questions, but it was tedious to say the VERY least.  Don’t get me started about browser issues and simple things like locking the mouse – I mean geez, really?? is that so much to ask a browser to do?  I have it working, but was astonished to find this wasn’t something supported up until recently and even then it’s only the main browsers (shocker, I thought I’d left all this crap back in the late 90’s? – why people are anti-plugin is beyond me, talk about wasted hours in QA?! oye!)

Ok, I’ll rant later and rave as well.  There’s good and bad of course, but the bottom line is, I at least enjoyed myself and the challenge has taken me back to the days when Papervision3D was just starting and we had no idea how to do many of the things we developed.  So that part is really very cool 😉

I promise – I’ll get the link up soon for you guys to try!

    • Shahin
    • January 4th, 2014

    Interesting that you’ve been using Ammo. Ammo is the physics engine built in to PlayCanvas (kind of a WebGL based ‘Unity in the browser’), and works really well. It would be great to check out your Ammo code for the helicopter and convert it into a PlayCanvas script. (So far, I’ve only played with wheeled vehicles so something that flies would be cool).

  1. Hey Shahin! I’d never heard of it until you brought it up 😉 I went out there, and played around a little. There’s some things I really like about the IDE and components (yes, very Unity-like) and I also liked the custom code integration aspect, that’s very very cool. I was a bit disappointed with the fact that I couldn’t create a primitive and assign a custom material to it (that and no Plane primitive??). If I wanted a plane, I’d have to open 3DS and create a plane and texture it there. That’s really REALLY annoying and makes me question the rest of the apps abilities. Also, I put in the same helicopter with a new Directional light source and set it to cast shadows and nothing shows for shadows. The IDE doesn’t give me a hierarchical view of the model’s child nodes so I can’t check to see if they transforms that actually have geometry are set to cast shadows. So I have to assume that when the model is imported, it’s set all of the child nodes to true for shadows.

    Another thing I was intrigued by was the physics and adding Rigidbodies and colliders there in the IDE. If that works, that’s very cool.

    Right now, I’m much more impressed with Goo’s IDE. They don’t have the code integration in the IDE like Play does and they’re working on physics integration ATM as far as I know, but you can write your own code on the backend from what I can tell.

    Have you tried Goo?

    • Shahin
    • January 4th, 2014

    Yes, I feature requested custom materials on primitives a while back. Apparently it’s going to be added in the next week or two. To be honest, I’ve only used primitives for blocking out ideas and then I import ‘proper’ geometry from Max/Maya/Blender.
    I think I was caught out by the shadowing behavior too. I think directional lights cast shadows with a resolution dependent on the far clip of your camera. So if you have a huge camera frustum, you won’t see the shadow. Try bringing in your camera’s far clip plane.
    If a model’s ‘Cast Shadow’ flag is selected, all the meshes in that model should definitely be casting a shadow. 🙂
    The physics support is what makes a massive difference to me. It ‘just works’ and it’s really quick to use. I’m really looking forward to them exposing Ammo constraints to the UI (again, apparently this is due soon).
    I did take a quick look at Goo, but all the code is obfuscated and the docs have a million holes in them. It just doesn’t look ready for production (it is in beta, I guess). I’ve been using the realtime collaboration in PlayCanvas for absolutely ages now and it’s been really useful – I had amazing support from the PlayCanvas guys and they drop into my projects regularly to help me out.

  2. You’ll both be pleased to know that in PlayCanvas, you can now apply materials to primitives. (Plane primitive still coming soon). We’ve combined the primitive component with the model component, just add a Box and double select the material to edit.


  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s