Mesh to 3D pixels with examples including a Star Wars Destroyer, a Tie Fighter, Mr. Vader's Tie and a Sith Temple

Hello guys!

So here is the second part of the Mesh to 3D pixels stuff. First part here: Our honored Master Yoda from thin instances

updated PG, solved the rendering issue, thx to @Evgeni_Popov

Wait until the green screen disappears.The slicing might take a while on slower CPUs.

@Evgeni_Popov Hey Evgeni! Could you please help to get rid of the weird rendering when rotating the model? I couldn’t figure out what is causing the distortion. I tried to change the material’s sideOrientation but no luck… :frowning: Thanks in advance!

So as you can see guys, still have some trouble, but will be fixed in no time :slight_smile:

What it basically does, it renders the mesh from above in an orthographic camera view and creates slices of the mesh by manipulating the minZ and maxZ of the camera. The slices are rendered to a RenderTargetTexture (1024x1024 - feel free to change). Then it uses the canvas to thin instances technique used here HTMLCanvas to Thin Instances on every slice.

After slicing the mesh it just calculates the 3D coordinates and displays the model using thin instances.


const autoStart = true // if false, you need to press SPACE to start the show

to false, to pause the slicing process, so you can set the mesh correctly in position so the camera can see it from above If the object is cut, increase maxY.

Place your model like this so it has only positive coordinate values.

Your whole object must be visible on the green canvas like this:

You can find explanation of the configuration values in the source code. If you are interested, just play with the values, but basically, set the maxY value above the height if your object, use the orthoScale value to make the final render with more or fewer cubes, use the orthoOffset to posittion your source mesh on the orto canvas. Define the number of slices by setting the value of sliceCount. You have to adjust the zStep value every time to change sliceCount and/or sliceHeight. Bigger value in sliceHeightRatio makes thicker slices, better slicing but more thin instances.

There are multiple examples in the PG, you can switch between them by uncommenting the required part and comment the previous one, obviously.

Some screenshots:

That’s all folks!

I don’t know what is this good for, I am just doin’ it but you now know, how to make slices so you can make a cool MRI scanner… :rofl: :rofl: :rofl: However I discovered by failure a cool force field effect, which I will present in the future.

And by adjusting

const cubePrefabOptions = {
    width: 8,
    height: 8,
    depth: 8

the prefab sizes to different values you can get cool effects. If you are experiencing z-fighting, just decraese these values even below 1. Or you can even change the prefab in the createPrefab method.

Have a nice *!


EDIT: 3D model sources in the source code


Hey @Necips !

Fancy doing the “La Joconde” in 3D? :vulcan_salute:

1 Like

Love all the Star Wars models :slight_smile:

1 Like

… and so do I :sunglasses:


Setting maxZ to null is not valid, that’s why you have artifacts when rotating. Also, because of the very small cubes, you have some z fighting, so you should try to minimize the minZ-maxZ range. The most important one is minZ, which should be as large as possible:


Thanks a lot! I’ll try it.

Cool, it is working now as I expected. Thank you!


I am now going to try to do all of this on the GPU side and maybe add the marching cube algorithm to render cooler pixelated objects. Just playin around… :vulcan_salute:

1 Like

Sure. He we are. Lisa in 3D made with Monster Mash :smiley: (2.5 MB)

1 Like

What the hell?! :smiley: