Arcade flight simulation

Hi All,
Too long to read just go straight to the video: babylonjs arcade flight simulation - YouTube
While ago I made a HUD display with canvas2d. I thought it would be nice to attach a mesh of a plane to it. Then maybe some physics for flight, physics for suspension (raycastVehicle), skybox, clouds, terrain and I ended up with this. Initially started with threeJS but moved to babylonJs. It seemed more structured plus I would love to switch to webGPU on some stage. Also the community is great!
Anyway, its far from perfect but I am posting it to get some false sense of accomplishment :slight_smile: I started adding dynamic terrain but I gave up for now since I need to figure out how to approach physics for the terrain. Right now its just imposter for a whole mesh. I had to learn blender to make the airplane more suitable for a game. Right now I have box and sphere imposters as invisible meshes but thinking to do it only with airplane mesh since its very low count. I am thinking to re-do it and just make wing and tail tips more dense mesh. Does this make sense? For the terrain I used one of my favorite places in Ireland from the time I lived there. I had to generate it and optimize in blender.
I hope for some constructive feedback. It would be nice to make it nicer looking without loosing performance.

16 Likes

Nice work! You seems to be a much better programmer than a pilot! :joy::stuck_out_tongue_winking_eye::+1::roll_eyes:

I’m working on custom collision stuff right now. I had to figure out, how to pick a mesh from more than 1 million instances. I’m using a sort of octree algorithm to achieve this. Your goal seems to be the same. I am open to discussion. :sunglasses: Babylonjs is using octrees as well, but I wanted my own stuff.

I am pretty bad at both flying and programming :slight_smile: Its a bit challenging to control yaw, pitch and roll from keys. One of the things I want to add is a IMU based controller like daydream from google. I have a similar for AR headset called miraprism and really like it. I hacked it already and wrote a lib for it with webbluetooth. I saw some libs for daydream on babylonjs so need to look into it but like the other controller better.
As for the physics I would love to test your stuff in my little project. We can set up a branch. I was thinking to drop the physics for a whole terrain. Keep it only for some landing zones. For anything else just detect my airplane crossed terrain and add crash animation while removing airplane mesh.

2 Likes

It’ll not work for you out of the box. It’s tightly coupled with my scene. However the idea behind it is to organize your colliders into a tree. I’m starting from a big box collider covering the whole mesh. After that I start to create smaller colliders (half the size of the previous one) and set them as children of the previous one. After I hit the last box collider I go further using raymarching (or you can use a ray) and I am trying to hit one of the meshes which belongs to the last box collider hit. Obviously you need to assign the meshes to the colliders. My colliders are just simple data: a Vector3, first corner, width, height, depth, no rotation. I think you could set box colliders for rough collision detection and you can trigger the mesh collision detection of a specific collider or colliders which belongs to the box collider used for rough detection.

Or a low poly model of your ground? There is a function in BabylonJS to degrade your mesh. If you haven’t already, search for Auto LOD or the Mesh.simplify method in the docs.

It sounds like this is related to your thinnizator work. I followed some post its pretty cool.
Yes I saw the auto LOD feature but havent tried it yet. I need to learn about the topic more how to approach the problem. For the flight phase I wanted to make the terrain mesh physics sleep but its problematic with ammojs. I suppose loosing details when I am higher would be beneficial.
I think the next thing I want to try is write shader for water. The babylonjs stuff its not exactly what I am looking for (water material doesnt support shadows). I want something super simple like moving two bump normal textures. Would be cool since I never made a shader so nice learning experience.

2 Likes

It’s about thin instances yes. Thanks for finding it cool! :sunglasses: But it’s more related to the Dude Boss shooter. I am now at 600.000 shootable particles and reached the max heap limit of 2 GB for one tab. I am using the Solid Particle System. Still running at 144FPS+. I have a cubic world so it’s far more easier for me. I’m shifting towards pure thin instances to reach the goal of 1.000.000 shootable instances. The water shader is quite easy task and is a good start. I have created a couple of them as well. :hugs:

This is looking nice !!!

You can erase the “false” right now, this is a TRUE ACCOMPLISHMENT! :smiley: It’s not a simple task to join together all these different systems into something cohesive and that’s exactly what you did. I think the terrain looks pretty cool already, and the water on the shoreline, but the water farther in the ocean looks a bit too regular? Maybe adding some perturbations, some wave effects, would shake things up.

I’m excited to see what you add more!

1 Like

Thank you for kind words :slight_smile: I am learning about shader’s right now. I am having a lot of fun with it and excited what I can come up with. The first one will be for the water for sure.

2 Likes

Shaders are a real fun journey! :smiley:

Hi All,
Over holiday periods (Christmas, Easter and so on) I added few things. I thought I will start posting some videos.
First one was the water shader that takes shaddows that I posted here
Then I spend some time figuring out relative body interactions physics for vehicle. I went full circle from cannonjs (had some issues initially), then ammojs which turned out doesnt support relative body for raycast vehicle, tried rigid body vehicle (some jitter issues when moving at higher speed) to finally end up using cannonjs. Video here.
Lastly I played a bit with Yuka which I use for aircraft carrier movement, birdflock and soon to be added enemy. Video here. Apologies for low quality. When I start recording the game framerate drops. Need to look into it.

2 Likes

Nice birds!

New video showing a bit more of a gameplay in a better quality.

Next stop adding enemy.

6 Likes

For those who remember :slight_smile:


(F-19 for MS-DOS, 1988)

3 Likes

There is a cool retro game project similar to that Thunder Helix - Announcement Trailer - YouTube

3 Likes

One more gameplay video before I get back to work :slight_smile:

6 Likes

I sure do remember. F***, what?1988? …Oh, just how old I am :older_adult: :wink:

1 Like

Hi All,

New update video.

Features added:

  • refactor whole thing to use javelin ECS. Major thing which I might do a separate topic on. Enabled easy adding features and many other things. Complete mindset change.
  • added sounds
  • added bot plane, just following path for now (yuka)
  • moving skybox with camera
  • shooting (gun blast sprite, gun hit smoke sprite animation, smoke particle for enemy burning). I have problem with sprites playing animations so gun hit not doing the job right. For smoke i need to come up with something better but lighter on performance.
  • lastly I modified the follow camera so yaw and pitch are followed directly but not roll. Otherwise aiming is impossible.

I hope you enjoy. Since I added ECS I am tempted to try enable networking. Before that I might setup a server for a single player for people to play and leave some feedback.

9 Likes

Hi All,

any ideas how to blur the horizon line a bit. Tried fog but it messed up the sky. I want a bit of a haze just on and above the line. Ideally something not very performance hungry.

1 Like

Well, I’m sometimes still using this very old and very simple trick of offseting another mesh from the skybox with a simple alpha gradient on it. It’s old, it’s basic, it’s design oriented (vs code) but you know what, it eventually still does the job (and then on the side of performance, it’s hard to compete with).

3 Likes