PNG extrusion depending on alpha channel

Would you know a way to extrude a shape depending on the png alpha channel?

Here is a first playground with a basic png image: Babylon.js Playground

I would like to extrude the logo to have a 3D shape result like the one we have using parametric shape and earcut: https://playground.babylonjs.com/#4G18GY#7

Cheers :wink:

1 Like

Hi again, double-p. Good to see you.

A user named Nesh108 once worked on this stuffā€¦ until he went insane. :slight_smile:

Somewhere in there, https://www.babylonjs-playground.com/#9GPMUY#14

His extruded sword is in a playground, too, but I couldnā€™t find it.

Hereā€™s another he was working-on: https://www.babylonjs-playground.com/#9GPMUY#16

As you can see, it always needs data:image/png;base64 dataā€¦ which is unfortunate.

The capped bird is still laying around: https://www.babylonjs-playground.com/#1ZAXRO#6

@JohnK has done work in this area, too, so Iā€™ll invite him to comment.

@nasimiasl might know how to extrude the non-transparent parts of a texture, too (heā€™s a shader God).

I think the BJS Decal system has an ear-cutter-from-hell built-into it, too. SOMETHING very complicated is happening in decals. When I saw it, I just got scared and ran away. :slight_smile:

SOME folks have done weird things with applyDisplacementMap and applyDisplacementMapFromBuffer, tooā€¦ might be worthy of a playground search for those terms.

https://www.babylonjs-playground.com/#1CCIP1#6
https://www.babylonjs-playground.com/#1VGWP9#4

Ok, thatā€™s all I have. Stay tuned for more comments, and perhaps look for a 3rd-party texture-to-mesh utility/website, too. Lots of people have wished-forā€¦ what you wish-forā€¦ including me (Iā€™m wanting slightly-thickened hockey players). :slight_smile:

Actually, in The Red Green Show intro (timecode 1:05-1:15)ā€¦ see those silhouettes? LOVE 'EM! Essentially, transparent gifs/pngs on a plane, but with SOME thickness to them. Yum. But it sent Nesh108 to the mental asylum, so be careful. :smiley:

Perhaps the BEST wayā€¦ is to create the text in a modeller such as Blender and extrude it in thereā€¦ then export as a mesh. Hereā€™s a 3dsMax 2013 versionā€¦ https://www.babylonjs-playground.com/#31M2AP#76 (steal at will)

1 Like

hi
https://playground.babylonjs.com/#DSWYM7#4

2 Likes

Hey! Again @Wingnut thanks a lot for all those ressources, very very helpful. I didnā€™t expect there was already a lot of test in this area!

Indeed the ground/heightmap kind of does the job except that this is not empty but flat when there is no alpha.

I will dig into this and come back with a playground if I found something cool for my use case.

1 Like

Hi again. I wonderā€¦ hmm. I wonder what would happenā€¦ if you removed all the flat areas (after the displace)ā€¦ with a CSG boolean-subtract (subtracting a low-height box - similar to a plywood panel ā€¦ laying flat on the ground).

In theory, it should work fine. Maybe someone will try it. Hereā€™s a starter PG (with a strange-acting diffuseTexture). May the horse be with you. I think my PG #76 (and #77) is still better/easier, but I am biased. :wink:

Hi @Wingnut, Really nice model you created here. What tool are you using to do that? Blender?

The extruded image looks cool too even if there is a lot of artefacts!
Instead of checking flat area, we can simply add the hasAlpha property on the diffuseTexture: https://playground.babylonjs.com/#Q1XLZ8#2
But we can also see this is not very precise on the edge of the logo and text.

A also tried to remove the flat part of the heightmap by playing with the vertexdata but no success for now :wink:

1 Like

No significant work done by me, but thx. I used 3dsMax 2013.

I used to make band posters (playbills) all the timeā€¦ for many bandsā€¦ so I got good at textā€¦ using the extrude modifierā€¦ and then I would often try to map a single picture across the text. https://raw.githubusercontent.com/Wingnutt/misc/master/fts01.jpg

It was a popular ā€œlookā€, and I got fast at it (mostly Minneapolis area). But 3dsMax makes it real easy to do, tooā€¦ it takes me less than 5 minutes to produce some ā€œchunky textā€. Your logo took a tiny bit longer, as I needed to do a .obj export from max, and not just the normal .jpg render. :slight_smile:

I once had a URL to a place on-lineā€¦ that let you typeā€™nā€™render mesh fonts, too. It wasnā€™t ā€œliveā€. You use the site, generate the mesh, store it yourself, then import into scene.

@TheLeftover has that meshWriter thing that is pretty fun. https://www.babylonjs-playground.com/#XWVXN9#101 / #78 / #40 (and all other PGā€™s in that series). It makes 3d fontsā€¦ from SPS particles. It is a BJS extensionā€¦ pretty easy to use, and it animates well, and each letter/character/word can use physics impostorsā€¦ tested/proved. (for lots of text-movement fun).

Because of the tapered edges on text that is height-displaced (and due-to limited mesh rez)ā€¦ the text always looks blurryā€¦ and that seems to limit its usefulness.

1 Like

Oh I didnā€™t know meshWriter was based on solidParticle! Very good news!

SolidParticle are actually a very good option for image extrusion as you can see here: https://www.babylonjs-playground.com/#2AF3KM#2

The trick is to play with uvs of each particle! :wink:
I am currently using that but as you can see again, there are some artefacts (due to uvs) on some cube when camera moves.

I tried to play with faceColor to avoid that but it doesnā€™t work: https://www.babylonjs-playground.com/#2AF3KM#3

1 Like

Guys!!! Something really cool to show you! I think I created a low poly model generator from image :joy:

I wanted to try faceUVs in order to erase artefact and here is the result I got: https://www.babylonjs-playground.com/#2AF3KM#4

The image gets transform in low poly and all the cubes are perfectly put. Enjoy it with your image!

2 Likes

@PichouPichou - Super fun! Tried several images and it works great, creates a great retro feelā€¦this could be a fun and useful tool for people to generate sprite-like artwork for a Babylon platformer game!

Love it!

2 Likes