# Carrier 3D (unfinished work in progress)

**URL:** https://forum.makecode.com/t/carrier-3d-unfinished-work-in-progress/10573
**Category:** Show & Tell
**Created:** [October 26, 2021, 3:25pm UTC](https://forum.makecode.com/t/carrier-3d-unfinished-work-in-progress/10573 "2021-10-26T15:25:09Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![kwx](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/kwx/32/1545_2.png) [@kwx](https://forum.makecode.com/u/kwx)
#### Post date: [October 26, 2021, 3:25pm UTC](https://forum.makecode.com/t/carrier-3d-unfinished-work-in-progress/10573/1 "2021-10-26T15:25:09Z")

</div>

Since it doesn’t seem like I’ll be finding time to work on this project in the near future, here’s a work in progress snapshot of what it currently looks like:

> **[Carrier 3D \[alpha\] v0.18.8](https://arcade.makecode.com/14622-37951-14372-95670)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

Consider this a graphics demo, there’s no gameplay and no flight or collision physics.

It’s currently intended to be used in the emulator using both control inputs:

- A/D: roll left/right
- W/S: pitch down/up
- J/L: yaw (rudder) left/right
- I/K: throttle

While it does technically run on my PyGamer, I think it’s a bit too slow to be usable there.

---

<div class="post-metadata">

### Author: ![TZG](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/tzg/32/7392_2.png) [@TZG](https://forum.makecode.com/u/TZG)
#### Post date: [October 26, 2021, 6:06pm UTC](https://forum.makecode.com/t/carrier-3d-unfinished-work-in-progress/10573/2 "2021-10-26T18:06:33Z")

</div>

This is really good. I can’t wait for the finished project. And maybe even controller support.

---

<div class="post-metadata">

### Author: ![Codeboy-Advanced](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/codeboy-advanced/32/11113_2.png) [@Codeboy-Advanced](https://forum.makecode.com/u/Codeboy-Advanced)
#### Post date: [October 26, 2021, 10:32pm UTC](https://forum.makecode.com/t/carrier-3d-unfinished-work-in-progress/10573/3 "2021-10-26T22:32:40Z")

</div>

This is cool I can’t wait to hear about someone how thinks they can fly with their wings perpendicular to the water!

---

<div class="post-metadata">

### Author: ![kwx](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/kwx/32/1545_2.png) [@kwx](https://forum.makecode.com/u/kwx)
#### Post date: [October 27, 2021, 3:10am UTC](https://forum.makecode.com/t/carrier-3d-unfinished-work-in-progress/10573/4 "2021-10-27T03:10:55Z")

</div>

Hey, a [knife-edge pass](https://www.flightsimbooks.com/jfs2/chapter3-16.php) is a legit aerobatic maneuver, I’ve seen the Blue Angels do it 🙂

Of course, in the current program version you can just edit the code to set `minThrottle` to zero and park your plane in the air, or a negative value if you want to fly backwards. Like I said, there’s currently no flight physics at all, the “plane” simply moves in the direction you’re pointing.

There’s already partial controller support, the arcade emulator uses the web Gamepad API which should pick up a connected game controller. I think that’s limited to a single two-axis stick and two buttons, but you can hold the B button while moving the stick Y axis to change the throttle setting.

---

<div class="post-metadata">

### Author: ![Kiwiphoenix364](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/kiwiphoenix364/32/14368_2.png) [@Kiwiphoenix364](https://forum.makecode.com/u/Kiwiphoenix364)
#### Post date: [October 27, 2021, 3:13am UTC](https://forum.makecode.com/t/carrier-3d-unfinished-work-in-progress/10573/5 "2021-10-27T03:13:10Z")

</div>

So cool! I played it right when it came out (I got a notification from the reply on the other post) and I just got the chance to post this like four hours after school. I’m excited that this is finally out even though there isn’t physics yet!

---

<div class="post-metadata">

### Author: ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)
#### Post date: [October 27, 2021, 3:13am UTC](https://forum.makecode.com/t/carrier-3d-unfinished-work-in-progress/10573/6 "2021-10-27T03:13:17Z")

</div>

_Gorgeous_, @kwx !

@TZG , you could play this with controllers … but you’d need two controllers. Player 1 d-pad would control pitch and roll; player 2 d-pad would handle yaw and throttle.

---

<div class="post-metadata">

### Author: ![Dreadmask197](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/dreadmask197/32/10494_2.png) [@Dreadmask197](https://forum.makecode.com/u/Dreadmask197)
#### Post date: [October 28, 2021, 5:05pm UTC](https://forum.makecode.com/t/carrier-3d-unfinished-work-in-progress/10573/7 "2021-10-28T17:05:45Z")

</div>

I love how i just clip right through the ship for some reason.

---

<div class="post-metadata">

### Author: ![Dreadmask197](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/dreadmask197/32/10494_2.png) [@Dreadmask197](https://forum.makecode.com/u/Dreadmask197)
#### Post date: [October 28, 2021, 5:05pm UTC](https://forum.makecode.com/t/carrier-3d-unfinished-work-in-progress/10573/8 "2021-10-28T17:05:53Z")

</div>

YOOOOOo this is epic. Cant wait for the product to be finished. I’ve landed it a couple of times (and crashed) But I made it a few times. this is a well-done game.

---

<div class="post-metadata">

### Author: ![TZG](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/tzg/32/7392_2.png) [@TZG](https://forum.makecode.com/u/TZG)
#### Post date: [October 28, 2021, 5:06pm UTC](https://forum.makecode.com/t/carrier-3d-unfinished-work-in-progress/10573/9 "2021-10-28T17:06:16Z")

</div>

Anyone want to make a game console on Arcade with me?

---

<div class="post-metadata">

### Author: ![TZG](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/tzg/32/7392_2.png) [@TZG](https://forum.makecode.com/u/TZG)
#### Post date: [October 28, 2021, 5:06pm UTC](https://forum.makecode.com/t/carrier-3d-unfinished-work-in-progress/10573/10 "2021-10-28T17:06:28Z")

</div>

well thats good to know.

---

<div class="post-metadata">

### Author: ![GoMustangs](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/gomustangs/32/4323_2.png) [@GoMustangs](https://forum.makecode.com/u/GoMustangs)
#### Post date: [October 28, 2021, 5:07pm UTC](https://forum.makecode.com/t/carrier-3d-unfinished-work-in-progress/10573/11 "2021-10-28T17:07:38Z")

</div>

WOW! That is amazing. Great work! I can’t even being to figure out how to program 3d games.

---

<div class="post-metadata">

### Author: ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)
#### Post date: [October 28, 2021, 9:43pm UTC](https://forum.makecode.com/t/carrier-3d-unfinished-work-in-progress/10573/12 "2021-10-28T21:43:56Z")

</div>

_Lots_ of math and calculations, @GoMustangs . 🙂 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.

---

<div class="post-metadata">

### Author: ![GoMustangs](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/gomustangs/32/4323_2.png) [@GoMustangs](https://forum.makecode.com/u/GoMustangs)
#### Post date: [October 29, 2021, 12:16am UTC](https://forum.makecode.com/t/carrier-3d-unfinished-work-in-progress/10573/13 "2021-10-29T00:16:05Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![kwx](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/kwx/32/1545_2.png) [@kwx](https://forum.makecode.com/u/kwx)
#### Post date: [October 29, 2021, 5:14pm UTC](https://forum.makecode.com/t/carrier-3d-unfinished-work-in-progress/10573/14 "2021-10-29T17:14:55Z")

</div>

@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: ![PXL_20210814_010728351](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/0/0f2c9a0d0a2fea842356fb5c782da94d63a88ec0.jpeg)
- 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?

---

<div class="post-metadata">

### Author: ![Dreadmask197](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/dreadmask197/32/10494_2.png) [@Dreadmask197](https://forum.makecode.com/u/Dreadmask197)
#### Post date: [October 29, 2021, 5:22pm UTC](https://forum.makecode.com/t/carrier-3d-unfinished-work-in-progress/10573/15 "2021-10-29T17:22:07Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Dreadmask197](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/dreadmask197/32/10494_2.png) [@Dreadmask197](https://forum.makecode.com/u/Dreadmask197)
#### Post date: [October 29, 2021, 5:30pm UTC](https://forum.makecode.com/t/carrier-3d-unfinished-work-in-progress/10573/16 "2021-10-29T17:30:19Z")

</div>

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

---

<div class="post-metadata">

### Author: ![GoMustangs](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/gomustangs/32/4323_2.png) [@GoMustangs](https://forum.makecode.com/u/GoMustangs)
#### Post date: [October 29, 2021, 7:19pm UTC](https://forum.makecode.com/t/carrier-3d-unfinished-work-in-progress/10573/17 "2021-10-29T19:19:25Z")

</div>

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

Are the “.ts” files typescript?

---

<div class="post-metadata">

### Author: ![kwx](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/kwx/32/1545_2.png) [@kwx](https://forum.makecode.com/u/kwx)
#### Post date: [November 1, 2021, 9:13pm UTC](https://forum.makecode.com/t/carrier-3d-unfinished-work-in-progress/10573/18 "2021-11-01T21:13:21Z")

</div>

@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:

```auto
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:

```auto
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.

---

<div class="post-metadata">

### Author: ![Dreadmask197](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/dreadmask197/32/10494_2.png) [@Dreadmask197](https://forum.makecode.com/u/Dreadmask197)
#### Post date: [November 1, 2021, 9:30pm UTC](https://forum.makecode.com/t/carrier-3d-unfinished-work-in-progress/10573/19 "2021-11-01T21:30:49Z")

</div>

> **[The math that every designer needs to know](https://www.creativebloq.com/design/math-every-designer-needs-know-91517049)**
>
> Leona Henryson investigates what designers may not know about the influence of math on design.

I don’t know if this will help or not

---

<div class="post-metadata">

### Author: ![Kiwiphoenix364](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/kiwiphoenix364/32/14368_2.png) [@Kiwiphoenix364](https://forum.makecode.com/u/Kiwiphoenix364)
#### Post date: [January 26, 2022, 1:11am UTC](https://forum.makecode.com/t/carrier-3d-unfinished-work-in-progress/10573/20 "2022-01-26T01:11:55Z")

</div>

@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).

[Next page](https://forum.makecode.com/t/carrier-3d-unfinished-work-in-progress/10573.md?page=2)
