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