How to add thickness to a 2D textured plane?

[GameMonetize]

for 1. do you have a SIMPLE repro ?

[Nesh108]

@Deltakosh Ahah, that's a good question

What I can tell, from my previous attempts, is that, for some reason, merging a mesh built from VertexData seems to mess things up when merging it with other meshes. Here is a simple repro:

https://www.babylonjs-playground.com/#KSHATV

[GameMonetize]

You have to have the same vertex data for all your meshes. You custom mesh has to include normals and uvs to be merged with other meshes

[Nesh108]

@Deltakosh Ok, adding the normals did the trick: https://www.babylonjs-playground.com/#KSHATV#1

But how comes the other one is not working then? It has normals and uvs as well :/

[GameMonetize]

Sorry but which one is not working?

[Nesh108]

The donut one! https://www.babylonjs-playground.com/#9GPMUY#11

How can I debug it and see what's wrong? Without the planes, the outline mesh gets displayed correctly but with even just 1 plane, everything disappears: https://www.babylonjs-playground.com/#9GPMUY#12

[JohnK]

A mesh can have only one material. The problem with merging meshes which have different materials, as do your planes and the custom mesh, is that they end up with some arbitrary material. If in your simplified PG you apply materials before merging, the merged mesh does not retain the individual materials https://www.babylonjs-playground.com/#KSHATV#2

So in your sprite PG you need to set the blendmaterial after merging. However for this to work properly the vertices of your custom mesh need to have the correct uvs for the sprite image attached to them. (this is what, I believe, Deltakosh was stating in an earlier post). So lines 104 to 107 would need to put the correct uvs in a uvlist and then line 118 would be vertexdata.uvs = uvlist instead of vertexdata.colors = colorlist.

A little more on uvs at http://babylonjsguide.github.io/advanced/Custom#texture.

Also if you use MeshBuilder for your planes then width and height can be set individually , http://babylonjsguide.github.io/basics/Shapes#plane so no need for scaling.

Interestingly by knowing the positions and uvs of the vertices that make up your custom shapes (forming the thickness) you then also know the vertices and uvs of a polygon that matches the shape of your sprite. By correctly forming triangles ( index triples) from these vertices you can build a single custom mesh that represents a 3D version of your sprite. However as far as I can see splitting the (sprite) polygon into triangles is a non trivial matter.

[Nesh108]

@JohnK Thanks for the reply. I tried to look into your resources, reading your comment a multiple times and I still think I am not sure how to proceed.

It does seem a bit overly complicated to have to do all that when all I need to achieve is to be able to to have 3 meshes together. So, what I end up doing is to simply add the outline mesh as a parent of the two planes. By moving the outline, I can move everything else.

https://www.babylonjs-playground.com/#9GPMUY#13

Now the last problem: how to convert a BABYLON.Texture into a BABYLON.DynamicTexture? Hopefully it's easy

@Wingnut almost there!!!

[Nesh108]

EDIT: This is the pre-final version with the x_ratio / y_ratio finally cleaned up. Now I'm happy

https://www.babylonjs-playground.com/#9GPMUY#14

[Nesh108]

@JohnK @Deltakosh @Wingnut do you know if it is possible to convert a Texture into a Dynamic one? It shouldn't be impossible, right? After that, my ExtrudeOutline function will be completed!  

[JohnK]

You can read the URL of an image from a texture using     ........Texture.name as in the PG http://www.babylonjs-playground.com/#BVIEI2#1 which transfers a texture from a plane to a box. (Text added just to show it is a dynamic texture on box)

However since an image is being added to a canvas context the following applies

Using images from other domains

Using the crossorigin attribute of an <img> element (reflected by the HTMLImageElement.crossOrigin property), you can request permission to load an image from another domain for use in your call to drawImage(). If the hosting domain permits cross-domain access to the image, the image can be used in your canvas without tainting it; otherwise using the image will taint the canvas.

 

Trying to use a cross origin image results in the following BABYLONJS error     SecurityError: The operation is insecure.

[Nesh108]

@JohnK, I ended up just using the same DynamicTexture and then changing my function by splitting it into setup and callback. Now I get consistent good results:

So, yeah, pretty happy

Anyway, perhaps after being cleaned up even further by some BabylonJS god, I think the BJS codebase needs some thick textures in its life 

Yay @Wingnut, we made it!  

[Wingnut]

hehe.  Good job.  YOU made it.  I simply watched genius Nesh at-work.  Well done!

I think it needs to be added to framework, somehow.

It would be a cool add-on feature for @jerome's extrudeShape (I think Jerome coded that, but maybe not).

Hmmm... perhaps Babylon.Tools.getShapeDataFromAlphaImage(URL), and then THAT can be used as shape data in extrudeShape. 

It is probably much more complicated than that, though.  Thoughts, anyone? 

It is a pretty cool accomplishment, I think.  Maybe we celebrate and party, first.   I'm thinkin' 3-day party.