\
**Category:** Demos and projects\
**Created:** [July 14, 2021, 12:42am UTC](https://forum.babylonjs.com/t/htmlcanvas-to-thin-instances/22356 "2021-07-14T00:42:20Z")\
**Posts on this page:** 16\
**Page:** 1
**Author:**  [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [July 14, 2021, 12:42am UTC](https://forum.babylonjs.com/t/htmlcanvas-to-thin-instances/22356/1 "2021-07-14T00:42:20Z")
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
```auto
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)
```auto
// 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:
```auto
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.
```auto
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:
> **[Babylon.js Playground](https://playground.babylonjs.com/#W3JRUJ%2327)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes
Cheers!
R.
---
**Author:**  [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [July 14, 2021, 9:08am UTC](https://forum.babylonjs.com/t/htmlcanvas-to-thin-instances/22356/3 "2021-07-14T09:08:03Z")
Cool, looking pretty close😎
---
**Author:**  [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [July 14, 2021, 9:28am UTC](https://forum.babylonjs.com/t/htmlcanvas-to-thin-instances/22356/5 "2021-07-14T09:28:09Z")
How cool is this! ❤
---
**Author:**  [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [July 14, 2021, 9:40am UTC](https://forum.babylonjs.com/t/htmlcanvas-to-thin-instances/22356/6 "2021-07-14T09:40:33Z")
That detail:
You couldn’t choose a better image! I think, we should remove the blueish light and make a camera fly by near the painting. 🕶
---
**Author:**  [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [July 14, 2021, 10:27am UTC](https://forum.babylonjs.com/t/htmlcanvas-to-thin-instances/22356/8 "2021-07-14T10:27:46Z")
Interesting and I’m interested already to try something out 🕶
---
**Author:**  [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [July 14, 2021, 3:20pm UTC](https://forum.babylonjs.com/t/htmlcanvas-to-thin-instances/22356/9 "2021-07-14T15:20:51Z")
I loved this one ;D
---
**Author:**  [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [July 14, 2021, 3:23pm UTC](https://forum.babylonjs.com/t/htmlcanvas-to-thin-instances/22356/10 "2021-07-14T15:23:08Z")
The tweet if you guys want to claim credits (I did not find your profile on Twitter):
>
---
**Author:**  [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [July 14, 2021, 3:43pm UTC](https://forum.babylonjs.com/t/htmlcanvas-to-thin-instances/22356/11 "2021-07-14T15:43:57Z")
Hello! 🙂
Twitter: @RCsibrei
Thank you for sharing my/our work to the public! I’ve created a new PG which animates the camera, so it is obvious at once, that the painting is created from tiny boxes.
[https://playground.babylonjs.com/#W3JRUJ#25](https://playground.babylonjs.com/#W3JRUJ#25)
EDIT: Without @Necips this demo would never be so cool! So credits goes to him as well of course! Thank you!
EDIT2: And of course to you guys, who made this awesome framework and if I am correctly informed, especially to @Evgeni_Popov, who is the ‘father’ of thin instances stuff in BJS!
This reminds me the demo scene, when we were writing the coolest thank you sinus scrollers with colorfull copper effects we could and we thanked everyone involved directly or indirectly or just being nice and thanked everyone we knew, so the outro thank you part was 5 minutes long ! 😃
---
**Author:**  [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [July 14, 2021, 5:26pm UTC](https://forum.babylonjs.com/t/htmlcanvas-to-thin-instances/22356/12 "2021-07-14T17:26:48Z")
> [@roland](#):
>
> so the outro thank you part was 5 minutes long
It was always my favorite part 😃
---
**Author:**  [@BoldBigflank](https://forum.babylonjs.com/u/BoldBigflank)\
**Post date:** [August 10, 2021, 11:25pm UTC](https://forum.babylonjs.com/t/htmlcanvas-to-thin-instances/22356/13 "2021-08-10T23:25:31Z")
Maybe not so crazy high rez, but this could be used to convert a canvas to an extruded shape.
---
**Author:**  [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [August 10, 2021, 11:35pm UTC](https://forum.babylonjs.com/t/htmlcanvas-to-thin-instances/22356/14 "2021-08-10T23:35:36Z")
Like this?
> [@Mesh to 3D pixels with examples including a Star Wars Destroyer, a Tie Fighter, Mr. Vader's Tie and a Sith Temple](https://forum.babylonjs.com/t/mesh-to-3d-pixels-with-examples-including-a-star-wars-destroyer-a-tie-fighter-mr-vaders-tie-and-a-sith-temple/22614):
>
> 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](https://forum.babylonjs.com/t/our-honored-master-yoda-from-thin-instances/22606) EDIT: updated PG, solved the rendering issue, thx to @Evgeni_Popov [https://playground.babylonjs.com/#X10F8L#66](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 tri…
---
**Author:**  [@BoldBigflank](https://forum.babylonjs.com/u/BoldBigflank)\
**Post date:** [August 21, 2021, 4:52pm UTC](https://forum.babylonjs.com/t/htmlcanvas-to-thin-instances/22356/15 "2021-08-21T16:52:10Z")
Alright, here’s what I was thinking.
I painted a 🍕 on a canvas and made it 3d with this thin instance technique.
[https://playground.babylonjs.com/#4AGZP8#2](https://playground.babylonjs.com/#4AGZP8#2)
Note: For some reason saving the Playground makes it lose the 🍕, replaces it with “??”. Go to line 51 and replace that with 🍕 for the correct effect.
---
**Author:**  [@BoldBigflank](https://forum.babylonjs.com/u/BoldBigflank)\
**Post date:** [August 22, 2021, 6:29pm UTC](https://forum.babylonjs.com/t/htmlcanvas-to-thin-instances/22356/17 "2021-08-22T18:29:48Z")
[https://playground.babylonjs.com/#4AGZP8#5](https://playground.babylonjs.com/#4AGZP8#5)
Replace the “??” with 🌎
Fixed some vertical positioning, now trying to figure out the cyan strip in the texture. I posted it on the ground just to make sure it’s not always that way.
---
**Author:**  [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [August 22, 2021, 6:36pm UTC](https://forum.babylonjs.com/t/htmlcanvas-to-thin-instances/22356/18 "2021-08-22T18:36:59Z")
Hello!
I will check the cyan strips tomorrow. 🕶 I don’t have access to my computer now.
R.
---
**Author:**  [@BoldBigflank](https://forum.babylonjs.com/u/BoldBigflank)\
**Post date:** [August 22, 2021, 10:01pm UTC](https://forum.babylonjs.com/t/htmlcanvas-to-thin-instances/22356/19 "2021-08-22T22:01:36Z")
Aha, found it.
line 108:
```auto
const divider = color.r > 1 ? 255 : 1
```
The divider is supposed to be 255 always, so when there was no red in the gradient it would divide by 1, setting g and b to 100%.
Final product is:
[https://playground.babylonjs.com/#4AGZP8#6](https://playground.babylonjs.com/#4AGZP8#6)
---
**Author:**  [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [August 23, 2021, 5:41pm UTC](https://forum.babylonjs.com/t/htmlcanvas-to-thin-instances/22356/20 "2021-08-23T17:41:31Z")
Hello! Cool PG and thx for finding the bug!
If you want to avoid this:
set `camera.minZ = 0.001` to a very small value.
and adjust `camera.maxZ` as well.
