F-14 Tomcat with a world to fly in

Try in here: Github Page

Or keep reading for details and screenshots.

Or play around with the boat…


(Crank up “Torque Boost” in the settings to max to make the rudder work)

The “Environment” setting changes light and fog to some various presets.

Or zoom out and look around at the world:


Click the minimap to get a world map view:

The flight physics are very fake for now. just applies force and torque from the controls. But making that better later will be fun so it will happen.

This is my first stab at doing anything with the WebGPU renderer. Enjoying it so far!

The terrain system builds a height buffer from a png for use in the shader and physics. It has a separate “groundTypeTexture” which defines color and some properties for stuff like the trees so they know where to hang around.

Things I have in mind to do from here include stuff like:

  • Various camera modes and controls
  • Shoot the cannon and fire missiles
  • Buildings to blow up
  • Dynamic lights that can turn on and off (now its all static emissive)
  • Better flight and vehicle controls
  • More types of planes and vehicles to play with
  • Various starting points, such as catapulting from the boat

But we’ll get to see.

9 Likes

There is now a nice cannon:

And an early version of improved flight physics:

Eeach airfoil component has its own force contributions, something isnt quite right with the rotations but now it is quite a bit easier to do some flying

Mouse/Keyboard controls?

1 Like

Nicely done. Great artwork and nice radars, user interface, use. Was this all done using three.js?

I concur with comments above, I would like to see mouse controls.

Regarding aerodynamics, you are welcome to use my flight module, which is demonstrated here.
And if you want an iFFT ocean, you can use my Ocean module.

Regarding the program:

  • You don’t need flames for when the airplane in not in afterburner. I think the opening sequence of the original Top Gun movie (here) shows an F-14 increasing throttle. Also see here. This is probably only me, but the huge flame made me think there was a major problem with the engine.
  • On the general interface, when I moved the LOD bias, the world turned green and never went back to normal colors.
  • A locked camera that trails the airplane would be nice.
1 Like

The TopGun into is amazing. I have this vision to make some type of interpretation of that eventually, but it might take a while.

So the control scheme supports mouse, touch and keyboard. At least for my android (its a pixel 8 so relatively powerful).

For Keyboard controls use:

  • W/A/S/D for the roll/pitch stick.
  • Q/E for yaw (rudder)
  • R/F for the throttle, at max setting the engines provide about 10x the force of a real F14 at full reheat so this plane does have some magical powers there.

Spacebar fires the cannon.

The little gear/sweep control has no keybindings yet, but you drag it with a pointer to shift its state.

I’ll be adding some type of keybinding menu for handling that stuff propelry later on, that will also give the option to bind a controller which is a fun kind of bonus. :slight_smile:

The effect system and the lod bias (at some value the buffers run out and you get a nice crash) setting are very early iterations, the whole flame effect is using the wrong logic for now but at least I got the tricky bits to work, will be polished later.

The radar/minimap and all other on screen UI elements are html elements in their own iframes. All the 3D is running in three.js. I have made all the assets like the plane, boat, trees etc using blender.

The map inside the minimap is actually procedurally generated from the heightmap and the terrain material map.

Heightmap:

Terrain material map:

Some messy script I wrote looks through the pixels in these to generate the world map:

Some better camera controls should be coming up soon, I think a row of buttons to toggle through various camera options will do the trick.

There are now some camera mode buttons in the top left row.

A primitive “Follow mode”:

And a pilots view:

The old orbit mode is also there as the default.

2 Likes

Thanks! I didn’t realize you also had an interior view. Amazing! Can you land on the carrier?

Regarding aerodynamics, the factor that gives programmers the biggest headache is gravity. In a real airplane, when you bank, less of your lift is directed downward so you need to increase angle of attack (aka AoA or pitch) to remain level. Of course, you can assume that - at least when upright - your pilot automatically increases AoA enough to maintain level flight. Just be aware that this means there is less AoA available (the max AoA is around 16 degrees, beyond which the airplane will stall. Also note that, beyond, say, 75 degrees, it becomes impossible to maintain level flight - also momentum will carry you for awhile.

There are other complexities, which I will not bore you with. But that is why I wrote my flight module. And if you try my flight sim demo, I think you will see how easy you can fly using the mouse.

Keep up the good work!

Landing on the carrier is possible but very difficult! I will look into making that into something reasonably challenging later on. Current issue is to get the aggregated torque from all airfoils to sum up right, it’s still not solved…

After a terribly annoying search I finally found what was wrong with the aerodynamics. It was the tangential velocity getting flipped as the rigid body of the plane rotated a certain amount. Now It is almost right, I think there is something funky still at steep pitch angles but that gets to be fixed some other day.

With this it is now reasonably nice to go for a bit of flying:

The yellow curves in the image show my approximation for lift by incidence, the upper row is for actual lift while the lower row uses a softer function for force by sideslip which get applied to the rudders.

Another fun details is how something like this seems to give a decent approximation of lift by AoA:

function curveLift (AoA) {
	if (Math.abs(AoA) < 0.35) {
		return AoA * 3.14
	} else {
		const sinVal = Math.sin(AoA )
		const l1 = Math.pow(Math.abs(sinVal), 0.1)*Math.sign(sinVal);
		return l1 * Math.cos(AoA * 0.5);
	}
}

Multiply the result by airfoil surface area with speedSq for a force in N. (Include the tangential velocity for each airfoil to also have a relatively natual rotational dampening.)

Fixed all those annoying physics issues and added a few more planes. They are not fully wired up yet so some joints are behaving poorly…

The good old J29 feels pretty decent

The B52 stalls out pretty quick since you can pull the elevators unrealistically hard, but careful pulling at the control stick lets you fly it:

Now if you make a takeoff run with the F14 and quickly drop the throttle to about 20% you can possibly make it to the carrier. Anything better than crashing into it is unlikely:

I also refined the lift function to closer match this yupe of shape:

The simulation gets to use this: (origin in the center instead of left)

There are now buildings and bridges you can destroy with the cannon or by crashing into them :smiley:

When starting I recommend pressing the button that says “F14 ISLAND” as it the least problematic of the available options.

Shooting the cannon at the big buildings here stresses the physics a bit much so your FPS will drop badly if you do. Espically on a mobile device.

All buildings can be destroyed, at at least the first time you pass them by (it dosnt quite clean up right yet)

1 Like