# 3D voxel rendering engine

**URL:** <https://forum.makecode.com/t/3d-voxel-rendering-engine/42425>\
**Category:** Show & Tell\
**Tags:** graphics-and-math, demo, art\
**Created:** [March 1, 2026, 1:55am UTC](https://forum.makecode.com/t/3d-voxel-rendering-engine/42425 "2026-03-01T01:55:02Z")\
**Posts on this page:** 20\
**Page:** 8

<div class="post-metadata">

**Author:** ![VoxelMaster64](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/voxelmaster64/32/32075_2.png) [@VoxelMaster64](https://forum.makecode.com/u/VoxelMaster64)\
**Post date:** [June 1, 2026, 5:09pm UTC](https://forum.makecode.com/t/3d-voxel-rendering-engine/42425/142 "2026-06-01T17:09:49Z")

</div>

@richard

---

<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:** [June 1, 2026, 11:52pm UTC](https://forum.makecode.com/t/3d-voxel-rendering-engine/42425/143 "2026-06-01T23:52:51Z")

</div>

I’m not sure which of those is faster, but I would go with the class approach since it will make your code way easier to understand.

MakeCode does compile differently than other JavaScript runtimes. JavaScript is normally an interpreted language, meaning it is run using a program called an interpreter that takes in the source code and executes the program without compiling it (that’s a bit of an oversimplification, modern JavaScript interpreters do some compiling at runtime but that’s not important for this explanation).

MakeCode doesn’t interpret your program, it compiles it, which is very different than other JavaScript runtimes. On hardware, this allows us to be way more efficient than something like MicroPython (an interpreted language). Interpreters take a lot of memory and CPU cycles which are both at a premium on microcontrollers.

In the browser, we compile down to JavaScript but it’s a form of JavaScript that closely matches the code we compile for hardware. This allows MakeCode programs in our simulator to behave roughly the same was as programs on microcontrollers. The downside is that it’s usually less efficient than just running pure JavaScript in the browser since browsers are heavily optimized to run code written by people, not the code our compiler spits out.

That’s why it’s always important to use the builtin functions whenever possible in MakeCode programs. For example, always use `Image.fillRect` instead of using two for-loops to loop over a rectangle and set all the pixels. Similarly, you should use `Image.blit` or `Image.blitRow` when mapping textures to areas. These “native” implementations bypass our compiler and run as pure JavaScript, so they are way faster.

As for ray tracing, it’s always going to be faster to do bulk operations with `Image.setRows` than calling `Image.setPixel` a million times. That being said, if you’re just painting all the pixels to be the same color, or copying pixels from one image to another, then use `Image.fillRect` or `Image.blitRow`.

Finally, I would not recommend putting it in `game.onPaing`. Instead, use `scene.createRenderable()` so that your engine draws at a set z index. That way people can make UI elements that go over whatever you’re doing

---

<div class="post-metadata">

**Author:** ![VoxelMaster64](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/voxelmaster64/32/32075_2.png) [@VoxelMaster64](https://forum.makecode.com/u/VoxelMaster64)\
**Post date:** [June 9, 2026, 4:41am UTC](https://forum.makecode.com/t/3d-voxel-rendering-engine/42425/144 "2026-06-09T04:41:28Z")

</div>

@WoofWoof can you try to fix the blocks for the current update? For some reason they are crashing and all being in the same spot in the block window to the left. I think it may just be a typo for one of the `//%` things (e.g. `block`, `var.shadow`, `vat.defl`), but I don’t think it’s a variable type. For example, I probably had something like:

```typescript
//% block="add %a0 and %B and return the sum"
//% A.defl=true
//% b1.defl=4
function add(a: number, b: number): number {
	return a + b
}

```

---

<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:** [June 21, 2026, 5:20am UTC](https://forum.makecode.com/t/3d-voxel-rendering-engine/42425/145 "2026-06-21T05:20:09Z")

</div>

There’s a rather simple way to figure out which block is problematic.

1. Remove all of the code for your blocks. (Paste it somewhere else to keep it safe, of course.)
2. Add code back one block at a time. Check the rendering after adding each block.
3. As soon as it breaks, you’ve at least found the problematic block.

Once you find the problematic block(s), if you need help diagnosing, then share the code for the problematic block definition.

---

<div class="post-metadata">

**Author:** ![IAmMyGuy21th](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/iammyguy21th/32/16978_2.png) [@IAmMyGuy21th](https://forum.makecode.com/u/IAmMyGuy21th)\
**Post date:** [June 23, 2026, 7:13pm UTC](https://forum.makecode.com/t/3d-voxel-rendering-engine/42425/146 "2026-06-23T19:13:48Z")

</div>

this is REALLY _trippy_

---

<div class="post-metadata">

**Author:** ![VoxelMaster64](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/voxelmaster64/32/32075_2.png) [@VoxelMaster64](https://forum.makecode.com/u/VoxelMaster64)\
**Post date:** [June 28, 2026, 5:29pm UTC](https://forum.makecode.com/t/3d-voxel-rendering-engine/42425/147 "2026-06-28T17:29:51Z")

</div>

ah thanks @AlexK. I fixed the issue, its that makecode dislikes it when the input/output to a block is any (why though). Now, I will fix a few defls and shadows, then i will add walls (similar to the walls in a tilemap) and event listeners. I will also make the player a class, allowing multiple players.

---

<div class="post-metadata">

**Author:** ![YamJamTheGoober](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/yamjamthegoober/32/29681_2.png) [@YamJamTheGoober](https://forum.makecode.com/u/YamJamTheGoober)\
**Post date:** [July 25, 2026, 7:27pm UTC](https://forum.makecode.com/t/3d-voxel-rendering-engine/42425/148 "2026-07-25T19:27:49Z")

</div>

I know basically this entire topic is about debugging the extension now, but why whenever someone creates some 3D thing, I SWEAR the demo is ALWAYS based off of minecraft.

---

<div class="post-metadata">

**Author:** ![VoxelMaster64](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/voxelmaster64/32/32075_2.png) [@VoxelMaster64](https://forum.makecode.com/u/VoxelMaster64)\
**Post date:** [July 26, 2026, 6:32pm UTC](https://forum.makecode.com/t/3d-voxel-rendering-engine/42425/149 "2026-07-26T18:32:00Z")

</div>

i half forgot about this but hopefully ill find a faster way to make makecode run soon! (im already onto something)

---

<div class="post-metadata">

**Author:** ![VoxelMaster64](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/voxelmaster64/32/32075_2.png) [@VoxelMaster64](https://forum.makecode.com/u/VoxelMaster64)\
**Post date:** [August 20, 2026, 10:04pm UTC](https://forum.makecode.com/t/3d-voxel-rendering-engine/42425/150 "2026-08-20T22:04:51Z")

</div>

> **[voxels ??? PARKOUR TIMED](https://arcade.makecode.com/S05514-06451-99720-69667)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

How fast can you get?  
My best (im expecting nobody to get less than 45 seconds, maybe even a whole minute):

 ![Screenshot 2026-08-20 135831](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/8/c/8ce3c75747152077dd549352cb444dcc6037c279.png)

---

<div class="post-metadata">

**Author:** ![YamJamTheGoober](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/yamjamthegoober/32/29681_2.png) [@YamJamTheGoober](https://forum.makecode.com/u/YamJamTheGoober)\
**Post date:** [August 21, 2026, 2:16am UTC](https://forum.makecode.com/t/3d-voxel-rendering-engine/42425/151 "2026-08-21T02:16:45Z")

</div>

This is amazing! Maybe you could make the turn speed a tad bit faster, or maybe the screen size a little larger? I don’t know what you could do, but adding those would be nice! Also I still have no idea how to get up there.

---

<div class="post-metadata">

**Author:** ![VoxelMaster64](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/voxelmaster64/32/32075_2.png) [@VoxelMaster64](https://forum.makecode.com/u/VoxelMaster64)\
**Post date:** [August 21, 2026, 2:29am UTC](https://forum.makecode.com/t/3d-voxel-rendering-engine/42425/152 "2026-08-21T02:29:23Z")

</div>

![Screenshot 2026-08-20 185347](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/4/3/434da4f27feffafcc07bd0554c9368129b710799.png)

Im probably going to send a video of what im doing if people want me to! (but first a hint)

---

<div class="post-metadata">

**Author:** ![VoxelMaster64](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/voxelmaster64/32/32075_2.png) [@VoxelMaster64](https://forum.makecode.com/u/VoxelMaster64)\
**Post date:** [August 21, 2026, 2:31am UTC](https://forum.makecode.com/t/3d-voxel-rendering-engine/42425/153 "2026-08-21T02:31:17Z")

</div>

by the way, I’ve added support for hardware (and mobile but it’s slow)!

PC (keyboard) = everthing (assuming you are using the keyboard)

One hardware device = move forward + backwards, turn left + right, A + B

Two hardware devices (2 player) = everthing

---

<div class="post-metadata">

**Author:** ![VoxelMaster64](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/voxelmaster64/32/32075_2.png) [@VoxelMaster64](https://forum.makecode.com/u/VoxelMaster64)\
**Post date:** [August 22, 2026, 3:36am UTC](https://forum.makecode.com/t/3d-voxel-rendering-engine/42425/154 "2026-08-22T03:36:39Z")

</div>

The fps for the screen size right now (100x100) gives me around 30 fps, doing 110x110 gives like 15, so I’ll probably have to work on optimizing the raytracer again. Also my phone was 5 fps.

---

<div class="post-metadata">

**Author:** ![VoxelMaster64](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/voxelmaster64/32/32075_2.png) [@VoxelMaster64](https://forum.makecode.com/u/VoxelMaster64)\
**Post date:** [August 22, 2026, 9:03pm UTC](https://forum.makecode.com/t/3d-voxel-rendering-engine/42425/155 "2026-08-22T21:03:40Z")

</div>

@YamJamTheGoober if you did want the screen size to be larger, then you could edit the code, and at the top you should see:

```typescript
namespace userconfig { 
    export const ARCADE_SCREEN_WIDTH = 100
    export const ARCADE_SCREEN_HEIGHT = 100
}

```

you can make those 100s bigger to make the screen resolution larger!

---

<div class="post-metadata">

**Author:** ![VoxelMaster64](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/voxelmaster64/32/32075_2.png) [@VoxelMaster64](https://forum.makecode.com/u/VoxelMaster64)\
**Post date:** [August 22, 2026, 9:14pm UTC](https://forum.makecode.com/t/3d-voxel-rendering-engine/42425/156 "2026-08-22T21:14:14Z")

</div>

oh about the turn speed you can also change that. press [edit protect] at the top-right, then after it loads, there should be a [file explorer] at the left. expand it, and look for `cam.js`. Towards the top, you should find a line that looks like:

```typescript
    turnsSpeed = ...

```

increase that number, and the turn speed should be faster.

---

<div class="post-metadata">

**Author:** ![tjayy67](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/tjayy67/32/36644_2.png) [@tjayy67](https://forum.makecode.com/u/tjayy67)\
**Post date:** [August 25, 2026, 11:33pm UTC](https://forum.makecode.com/t/3d-voxel-rendering-engine/42425/157 "2026-08-25T23:33:02Z")

</div>

rq can you give me an explanation of what voxels are and how this works.

---

<div class="post-metadata">

**Author:** ![VoxelMaster64](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/voxelmaster64/32/32075_2.png) [@VoxelMaster64](https://forum.makecode.com/u/VoxelMaster64)\
**Post date:** [August 26, 2026, 3:33am UTC](https://forum.makecode.com/t/3d-voxel-rendering-engine/42425/158 "2026-08-26T03:33:19Z")

</div>

voxels are cubes that all have the exact same size, and have integer coordanites. This is a video of what inspired me, and can help understand voxels: [https://www.youtube.com/watch?v=ztkh1r1ioZo](https://www.youtube.com/watch?v=ztkh1r1ioZo)

---

<div class="post-metadata">

**Author:** ![mattbat](https://avatars.discourse-cdn.com/v4/letter/m/34f0e0/32.png) [@mattbat](https://forum.makecode.com/u/mattbat)\
**Post date:** [October 2, 2026, 4:44pm UTC](https://forum.makecode.com/t/3d-voxel-rendering-engine/42425/159 "2026-10-02T16:44:21Z")

</div>

can you help with my code i need to make the tree code work in voxel terrain

---

<div class="post-metadata">

**Author:** ![VoxelMaster64](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/voxelmaster64/32/32075_2.png) [@VoxelMaster64](https://forum.makecode.com/u/VoxelMaster64)\
**Post date:** [October 2, 2026, 10:44pm UTC](https://forum.makecode.com/t/3d-voxel-rendering-engine/42425/160 "2026-10-02T22:44:52Z")

</div>

what tree code?

---

<div class="post-metadata">

**Author:** ![VoxelMaster64](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/voxelmaster64/32/32075_2.png) [@VoxelMaster64](https://forum.makecode.com/u/VoxelMaster64)\
**Post date:** [November 2, 2026, 9:40pm UTC](https://forum.makecode.com/t/3d-voxel-rendering-engine/42425/161 "2026-11-02T21:40:44Z")

</div>

@mattbat, what tree code are you talking about?

[Previous page](https://forum.makecode.com/t/3d-voxel-rendering-engine/42425.md?page=7)

[Next page](https://forum.makecode.com/t/3d-voxel-rendering-engine/42425.md?page=9)
