# Brohann's 3D devlog

**URL:** https://forum.makecode.com/t/brohanns-3d-devlog/20917
**Category:** Game Design
**Tags:** extension, javascript, art, demo, graphics-and-math
**Created:** [June 27, 2023, 5:01pm UTC](https://forum.makecode.com/t/brohanns-3d-devlog/20917 "2023-06-27T17:01:31Z")
**Posts on this page:** 20
**Page:** 3

<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: [November 6, 2023, 10:22pm UTC](https://forum.makecode.com/t/brohanns-3d-devlog/20917/41 "2023-11-06T22:22:51Z")

</div>

Looks nice! Gravity is a bit much but otherwise movement feels good. (depending on how this renderer is made) It may run a lot better if you combined some of the polygons, though this would make it not possible to make it look very cubic as it is right now and will likely require extra code or manually positioning the corners. Overall, great project!

---

<div class="post-metadata">

### Author: ![CreativeUsername](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/creativeusername/32/9601_2.png) [@CreativeUsername](https://forum.makecode.com/u/CreativeUsername)
#### Post date: [November 6, 2023, 10:23pm UTC](https://forum.makecode.com/t/brohanns-3d-devlog/20917/42 "2023-11-06T22:23:30Z")

</div>

We’re getting closer to getting full blown 3D games in makecode

---

<div class="post-metadata">

### Author: ![Brohann](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/brohann/32/17380_2.png) [@Brohann](https://forum.makecode.com/u/Brohann)
#### Post date: [November 6, 2023, 10:28pm UTC](https://forum.makecode.com/t/brohanns-3d-devlog/20917/43 "2023-11-06T22:28:57Z")

</div>

Yeah, most of the slowdown is actually from calculating the vertices and right now there is way too many that are not needed

---

<div class="post-metadata">

### Author: ![YuHayate](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/yuhayate/32/8275_2.png) [@YuHayate](https://forum.makecode.com/u/YuHayate)
#### Post date: [December 6, 2023, 8:36pm UTC](https://forum.makecode.com/t/brohanns-3d-devlog/20917/44 "2023-12-06T20:36:38Z")

</div>

@Brohann . isn’t the polygon function (single color) already in makecode arcade?

```auto
helpers.imageFillTriangle(img, x0, y0, x1, y1, x2, y2, col)

```

> **[test place](https://arcade.makecode.com/66066-24968-45967-67395)**
>
> Fait avec ❤️ dans Microsoft MakeCode Arcade.

---

<div class="post-metadata">

### Author: ![UnsignedArduino](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/unsignedarduino/32/592_2.png) [@UnsignedArduino](https://forum.makecode.com/u/UnsignedArduino)
#### Post date: [December 6, 2023, 9:03pm UTC](https://forum.makecode.com/t/brohanns-3d-devlog/20917/45 "2023-12-06T21:03:19Z")

</div>

This function was added after Brohann worked on this.

---

<div class="post-metadata">

### Author: ![YuHayate](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/yuhayate/32/8275_2.png) [@YuHayate](https://forum.makecode.com/u/YuHayate)
#### Post date: [December 6, 2023, 10:47pm UTC](https://forum.makecode.com/t/brohanns-3d-devlog/20917/46 "2023-12-06T22:47:08Z")

</div>

i see, that makes sense.

---

<div class="post-metadata">

### Author: ![ChimbroDaPro](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/chimbrodapro/32/15852_2.png) [@ChimbroDaPro](https://forum.makecode.com/u/ChimbroDaPro)
#### Post date: [December 21, 2023, 10:20pm UTC](https://forum.makecode.com/t/brohanns-3d-devlog/20917/47 "2023-12-21T22:20:28Z")

</div>

> [@Sarge](#):
>
> (I’m sorry, but I had to I can’t stand when people don’t discern Java and Java **Script** (they’re completely unrelated and work completely differently)

Hmm… 👀 I see that you forgot to close the first bracket. I’ll give you a C in grammar. Not to forget the missing full stop… 📝

Hmm… interesting…

📝 📝 📝

C-. Final grade.

(this is a joke btw)

---

<div class="post-metadata">

### Author: ![KIKIvsIT](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/kikivsit/32/10492_2.png) [@KIKIvsIT](https://forum.makecode.com/u/KIKIvsIT)
#### Post date: [December 21, 2023, 10:21pm UTC](https://forum.makecode.com/t/brohanns-3d-devlog/20917/48 "2023-12-21T22:21:16Z")

</div>

And I’m allowing it, because I know @Sarge can get it as good as they give it! 😉

---

<div class="post-metadata">

### Author: ![Sarge](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/sarge/32/19590_2.png) [@Sarge](https://forum.makecode.com/u/Sarge)
#### Post date: [December 22, 2023, 9:14pm UTC](https://forum.makecode.com/t/brohanns-3d-devlog/20917/49 "2023-12-22T21:14:49Z")

</div>

Did you just drop me from an A to a C because of a missing bracket 😭

On a second note, I completely forgot I ever made this post. I still get a teeny tiny bit annoyed when someone says Java, but I don’t point it out because it really doesn’t matter that much

---

<div class="post-metadata">

### Author: ![TeddyB](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/teddyb/32/17621_2.png) [@TeddyB](https://forum.makecode.com/u/TeddyB)
#### Post date: [December 26, 2023, 6:37am UTC](https://forum.makecode.com/t/brohanns-3d-devlog/20917/50 "2023-12-26T06:37:06Z")

</div>

Why am I just seeing this project now?

---

<div class="post-metadata">

### Author: ![jackal](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/jackal/32/19506_2.png) [@jackal](https://forum.makecode.com/u/jackal)
#### Post date: [December 27, 2023, 4:31am UTC](https://forum.makecode.com/t/brohanns-3d-devlog/20917/51 "2023-12-27T04:31:34Z")

</div>

for anyone who wants the code in english english, around 24 triangles are connected to different vertexes, making an illusion of a 3D tilemap, how the camera works is beyond my iq

---

<div class="post-metadata">

### Author: ![Brohann](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/brohann/32/17380_2.png) [@Brohann](https://forum.makecode.com/u/Brohann)
#### Post date: [January 8, 2024, 6:42pm UTC](https://forum.makecode.com/t/brohanns-3d-devlog/20917/52 "2024-01-08T18:42:31Z")

</div>

my obj to makecode arcade converter is in working order, but it might be a while until it is usable. I might make a tutorial on how to do it sometime idk. Anyways, I needed a 3D model to test it out but they all have huge amounts of triangles so I ended up using a low-poly pikachu thingy.

> **[Low-Poly Low-FPS Pikachu 3d model](https://arcade.makecode.com/S58814-04852-72858-63220)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

it runs at around 2-6 fps on my super super fast mac so I estimate it will run at 1-4 fps on your computer, so around 0.25-1 SPF(seconds per frame)

as you can see, the model has to be extremely low-poly to get a decent framerate with my current engine.

if you want me to try it with another model, feel free to ask and provide a link to it!

edit: I’ve made a huge breakthrough! I just had to implement quicksort and now I got this same pikachu model to run at 200fps!

---

<div class="post-metadata">

### Author: ![Luke](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/luke/32/32519_2.png) [@Luke](https://forum.makecode.com/u/Luke)
#### Post date: [January 8, 2024, 7:11pm UTC](https://forum.makecode.com/t/brohanns-3d-devlog/20917/53 "2024-01-08T19:11:49Z")

</div>

This looks amazing!  
(But also 6fps on my phone lol)

---

<div class="post-metadata">

### Author: ![Brohann](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/brohann/32/17380_2.png) [@Brohann](https://forum.makecode.com/u/Brohann)
#### Post date: [January 8, 2024, 7:19pm UTC](https://forum.makecode.com/t/brohanns-3d-devlog/20917/54 "2024-01-08T19:19:15Z")

</div>

**HUGE UPDATE**  
I optimised the engine to literally be 50 times faster.  
@Kiwiphoenix364 the problem was not calculating the vertices, the slowdown was from sorting the triangles with the sortarray thingy, so I used a different way of sorting the triangles array.

> **[low-poly picachu at SUPER HIGH FPS](https://arcade.makecode.com/85283-72309-12949-91854)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

> **[starfox 64 SUPER HIGH FPS 800+ triangls](https://arcade.makecode.com/S72037-95496-97453-38715)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

---

<div class="post-metadata">

### Author: ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)
#### Post date: [January 8, 2024, 7:28pm UTC](https://forum.makecode.com/t/brohanns-3d-devlog/20917/55 "2024-01-08T19:28:55Z")

</div>

@Brohann could you share your obj to makecode converter? I’d be curious to play around with it.

---

<div class="post-metadata">

### Author: ![randomuser](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/randomuser/32/32505_2.png) [@randomuser](https://forum.makecode.com/u/randomuser)
#### Post date: [January 8, 2024, 9:15pm UTC](https://forum.makecode.com/t/brohanns-3d-devlog/20917/56 "2024-01-08T21:15:00Z")

</div>

WOW that’s awesome!! You’re litterally one of the best makecoders ever, this is a BREAKTHROUGH!!! We really are in the future now…

---

<div class="post-metadata">

### Author: ![UnsignedArduino](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/unsignedarduino/32/592_2.png) [@UnsignedArduino](https://forum.makecode.com/u/UnsignedArduino)
#### Post date: [January 8, 2024, 9:15pm UTC](https://forum.makecode.com/t/brohanns-3d-devlog/20917/57 "2024-01-08T21:15:16Z")

</div>

I’m assuming this will become an extension soon? (how will you encode the vertices and triangles in a block friendly way 🤔 ) This looks super cool, and viable for games now that it has good performance!

---

<div class="post-metadata">

### Author: ![randomuser](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/randomuser/32/32505_2.png) [@randomuser](https://forum.makecode.com/u/randomuser)
#### Post date: [January 8, 2024, 9:15pm UTC](https://forum.makecode.com/t/brohanns-3d-devlog/20917/58 "2024-01-08T21:15:59Z")

</div>

Happy cakeday! 🥳 💃 🎉 🎊

---

<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 8, 2024, 9:24pm UTC](https://forum.makecode.com/t/brohanns-3d-devlog/20917/59 "2024-01-08T21:24:38Z")

</div>

Cool! I like where this is going. Depth sorting and vertice manipulation are the most difficult part of 3d graphics. The depth sorting is why I haven’t got around to finishing my renderer yet. Glad to see you coding 3d in Arcade. Ever since triangle fill was added (thanks to @AqeeAqee , I’ve been waiting for a cool 3d renderer, and you’ve done it! Excited to see more full 3d games!

For things like 3d racing games, collision is going to be difficult though, that will be a big task…

---

<div class="post-metadata">

### Author: ![Brohann](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/brohann/32/17380_2.png) [@Brohann](https://forum.makecode.com/u/Brohann)
#### Post date: [January 8, 2024, 9:27pm UTC](https://forum.makecode.com/t/brohanns-3d-devlog/20917/60 "2024-01-08T21:27:34Z")

</div>

sure! here are the steps

1. find your model
2. make a tinkercad account
3. create a new 3d model thingy
4. upload your model into the editor
5. scale it to a normal size, you might want to hold shift while scaling
6. center your model on all axises
7. export your model as a .obj
8. unzip the file
9. double click on the .obj or open it as a text file
10. copy all of the vertice thingies to your clipboard. The vertices are the lines that start with a “v”  
 ![Screen Shot 2024-01-08 at 1.38.34 PM](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/f/f2ee5e7ac6ba9cef1e2f501290c98f08026f7def.jpeg)
11. go to [this scratch project](https://scratch.mit.edu/projects/872480146/editor/) (It’s in scratch I didn’t really have a choice)
12. you can customise what color(s) the triangles are going to be
13. click the green flag if the project is not already running
14. paste the vertice data into the answer box and press enter
15. go back to your .obj file and find out how many vertices there are. The number should be right under the vertice data
16. put the number of vertices into the answer box and press enter
17. copy the data for the triangles in your .obj file similar to what you did in step 10. the triangle data should all start with an “f”
18. paste the triangle data into the answer box and press enter
19. find how many triangles there are in the .obj file. the number should be at the bottom of the triangle data
20. put the number of triangles (or faces) into the answer box and press enter
21. by now both of the lists (vertices and triangles) should have something in it
22. right click on the “vertices” list and export it. do the same thing with the “triangles” list
23. go to any of my super fast fps demos above and edit the code.
24. open the vertices.txt file and copy it contents
25. replace the vertice array in the makecode project with the code you just copied
26. open the triangles.txt file you just downloaded and copy its contents
27. replace the triangles array in the makecode project with the code you just copied
28. change the color pallete to whatever. keep in mind that this converter does not keep the colors of the original model
29. enjoy!

this is totally unconventional sorry  
if anyone has any issues or gets an error feel free to let me know!

[Previous page](https://forum.makecode.com/t/brohanns-3d-devlog/20917.md?page=2)

[Next page](https://forum.makecode.com/t/brohanns-3d-devlog/20917.md?page=4)
