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
EDIT:
updated PG, solved the rendering issue, thx to @Evgeni_Popov https://playground.babylonjs.com/#X10F8L#66
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… Thanks in advance!
So as you can see guys, still have some trouble, but will be fixed in no time
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.
Set
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… 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 *!
Roland
EDIT: 3D model sources in the source code