Jump to content

How to add thickness to a 2D textured plane?


Nesh108
 Share

Recommended Posts

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.

Link to comment
Share on other sites

@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 :o

@Wingnut almost there!!!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

@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:

thick_arrow.png.c180b9e9e4fb963989d6e94a6b74e68f.pngthick_diamond.png.e6a86d540f882bfbfb81770a8da9c5ed.pngthick_gameboy.png.94c0fe52cd9d466e933caceaedc11815.pngthick_sword.png.0b4e45c7d18ad6d0c69444f38fe6aa1b.png

So, yeah, pretty happy :D

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

Yay @Wingnut, we made it! :D 

Link to comment
Share on other sites

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.  :o

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...