Carrier 3D (unfinished work in progress)

Lots of math and calculations, @GoMustangs . :slight_smile: The video card in your computer takes a ton of information and then crunches a bunch of numbers to be able to draw images on your screen.

But, there is a lot you can learn about 3D drawings that don’t involve calculations. Those techniques can add some really nice effects to your 2D drawings and images, like the ones we use in MakeCode Arcade. If you have an art teacher nearby, talk with them about perspective drawing, vanishing points, and related topics.

2 Likes

Thanks for the tip, I’ll ask my school’s art teacher about perspective drawing and vanishing points.

I’ve actually been actively trying to get something to work in 3D. I’ve gone through the khan academy module on making 3D shapes with X Y and Z, but I think it’s going to take me a couple more months before I can get my head around the sin, cos, and tan stuff.

2 Likes

@GoMustangs - if you’re curious, you can take a peek at the “triangle.ts” file (select it in the Explorer section on the left, below the emulator), though that doesn’t really explain much of what it’s doing. Maybe search for “Trapezoid” which has a short comment explaining how those are used - all the graphics in the app are based on that.

In short, it works something like this:

  • design a shape using a 3D editor, or alternatively just by drawing front/side/top views on graph paper:
  • get x/y/z coordinates for 3D points (vertices), for example point #0 is the front right corner of the landing strip at coordinates [-0.8, 1.5, -4]. See “CarrierModel” in the main.ts file.
  • connect the points to make faces, for example the landing strip consists of points [0, 1, 2, 3].
  • use a bunch of matrix math to place the object somewhere in the world and orient it to match the viewing angles. That sounds fancy, but it’s basically just a bunch of multiplications and additions.
  • do a perspective transform, basically dividing coordinates by distance so that further objects appear smaller. (That’s not quite correct, but it’s the general idea.)
  • now you have a bunch of polygons that you want to draw on the screen. These need to be clipped to the screen edges and sorted - it needs to draw far-away objects first and near objects last. See “clipPolygon” in triangle.ts.
  • now there’s a bunch of trapezoids in screen space. Draw the screen a vertical column at a time, filling in the one-pixel-wide slices of each trapezoid in the right order. This needs to be as fast as possible, so there’s specialized functions such as drawTriLineAlternating which fill in larger blocks of pixels with as little per-pixel overhead as possible, and the Renderer3D methods take care of that.

I guess that may not be very helpful - it’s a quite complex topic, I just wanted to give a small peek behind the scenes. Personally, I think it’s good motivation to pay attention in math class since 3D graphics are a great way to use a lot of the skills and concepts you learn there, for example trigonometry is essential for drawing the heads-up display.

Does anyone happen to have a link to a beginner-friendly article or video about 3D graphics?

3 Likes

I’m making roblox maps. idk if that’ll help though

Also, can you tell me what you’re doing here? trapezoids, and numbers. it doesnt add up to me. they sizes? Angles? length?

That’s actually pretty helpful for me to think about. Thanks!

Are the “.ts” files typescript?

@GoMustangs - yes, the .ts files are Typescript (Javascript). I think for math-heavy code it’s a lot faster to type than to assemble calculations from blocks.

@Dreadmask197 - this gets a bit complicated, and I’d really recommend looking for a book or online course about 3D graphics. In short, the x/y/z coordinates for points are measurements giving their location. In my sketch of the carrier, the top-down view has the X axis going right and the Z axis going down. The Y axis is the height above the ocean surface, so the front view has X going right and Y going up.

Each square of the graph paper is one unit, so you can get coordinates by counting squares. Then you connect the points to make faces, for example the landing strip starts at point #0, continues left to point #1, and finishes the rectangle through points #2 and #3.

Once you have all these numbers, you could draw a front view of the carrier on the screen by converting the X/Y coordinates to pixel positions. Adding a constant to the X position moves it left/right on the screen, and multiplying the X value can make it appear larger or smaller:

screen_x = offset_x + point_x * scale_x
screen_y = offset_y + point_y * scale_y

(This is ignoring perspective, the actual calculation would get a bit more complicated due to that.)

If you want to draw it at a different angle, you need to mix together the different coordinates, each with its own multiplier, so you get something like this:

screen_x = offset_x + point_x * m_xx + point_y * m_xy + point_z * m_xz
screen_y = offset_y + point_x * m_yx + point_y * m_yy + point_z * m_yz

When you collect all the m_xy multipliers in a 3x3 grid, that’s called a matrix.

2 Likes

I don’t know if this will help or not

@kwx could it theoretically be possible to make a 3d engine with marching cubes? (I don’t know, but it’s just an idea, and I don’t know much about JS or 3d algorithms).

In theory it’s possible, but I think that getting acceptable performance would be extremely difficult. Marching cubes creates a huge number of vertices and polygons, and the renderer I made can only do a few hundred polygons before performance dips into single digits on hardware. A version optimized for the emulator could likely do a bit better though.

1 Like

Yeah, I guess it would be pretty complex to create a grid with x/y/z in makecode, I just watched a YT video about the marching cubes algorithm and thought it would be a pretty efficient algorithm, but makecode doesn’t do well with grids in x/y, much less adding a z into the mix lol! I guess it could be possible, but rendering many tries would be tough for makecode.

This is so Cool! Keep working on it

Why is it unfinished?

I just haven’t been very motivated to continue working on it - it would take a lot of work to get interesting flight physics, and adding gameplay elements such as enemy AI or aerobatics point scoring would be difficult.

I think it would actually be easier if it were possible to make this a two-player game, for example using the cable connection for PyGamer, since then there’s no need to write enemy AI code. However, last I checked this wasn’t working: Hardware Multiplayer (game) - #39 by jwunderl . However, it’s currently a bit too slow to work properly on hardware, so that may not be feasible even if that’s implemented.

3 Likes

If the redscript community gets their network working, it could be possible to have this game work with online multiplayer!

I haven’t been following the redscript development closely - has there been any successful demo showing communication between two different computers? I saw this post by @E-EnerG-Gamecentral which I’d interpret to mean that communication is only working for two nodes within the same browser tab so far.

4 Likes

On the forum, I’ve not seen any successful communication between two different computers. Idk if they’ll actually get it working, but if they do, then you could possibly make this game into online multiplayer. I don’t think work has started on the networking side yet, so Idk if it’s possible to get working.

Well, Development on that just started… but don’t worry!
We will get the messaging system running and perform these tests!

Wow, your graphics is amazing! I’m really looking forward to your full game if you are still doing it!!! :laughing: :laughing: :laughing:

1 Like

But the player model design tho…