Hi guys!
So I’m playing around with thin instances and had an idea to convert 2D HTMLCanvasElement to thin instances. Is it good for something? I don’t know, but it is cool 
EDIT: what about an animated mandelbrot? I think, I’ll give it a try😎
Have a look at the PG, link at the end. You can tinker the
const _3D_PIXEL_SIZE = 1
value at the beginning to have smaller/bigger 3D blocks for each 2D pixel.
Honoring BabylonJS and David I have chosen two images, the BabylonJS logo and David’s photo. Tried to choose the best one , however you can provide your own image (beware of CORS issues)
// your URL here
const url = "https://babylonjs.nascor.tech/boxes/babylonjs-logo2.png"
// TRY THIS ONE:
// const url = "https://babylonjs.nascor.tech/boxes/david-catuhe.png"
The default 3D pixel is a cube:
createPrefab(scene: BABYLON.Scene) {
const options = {
size: _3D_PIXEL_SIZE
};
const prefab = BABYLON.MeshBuilder.CreateBox("prefabBox", options, scene)
scene.onBeforeRenderObservable.addOnce(() => {
prefab.rotation.y = Math.PI / 4
})
return prefab
}
You can map the 2D position to 3D using this method. This one is just centering the 3D pixels. You can add some calculations to distort the 3D image and/or modify the output color.
calculatePosition(baseX, baseY, width, height, color) {
const x = baseX + width / 2
const y = baseY - height / 2
const z = 0
const divider = color.r > 1 ? 255 : 1
const r = color.r / divider
const g = color.g / divider
const b = color.b / divider
const a = color.a / divider
return { x, y, z, r, g, b, a }
}
And finally here is the PG:
Cheers!
R.
on a canvas and made it 3d with this thin instance technique.
I don’t have access to my computer now.
