Decal stretching

[angryBOT]

Hey everbody,

first of all: Thank you very much for the documentation and great forums. I achieved a lot with Babylon JS without the need of posting anywhere, because you get all the information you need just by one simple google search. But now is the time, since I just don't know where to look for a solution to this problem:

I'm using BABYLON.Mesh.CreateDecal to place text and pictures onto a sphere-shape (it is a soccer ball to be more specific, so not just a perfect sphere). Everything works great so far, I made controls to reposition, scale, rotate, change color etc. to decals and they can be placed simply by clicking on the desired position. The problem is with bigger sizes: As I understand, decals not getting mapped onto the UV but projected onto the mesh. If I want to place a big picture and scale it up or place a long line of text, there a limitations: The picture can't run all way around the ball, because it get's cut off at a certain point. The second problem is, that it get's stretched at the outer parts (the more it is away from the clicked center, the more it is stretched, since it get's projected onto a sphere). 

TL;DR:
Is there any way to place decals so they don't get stretched but use the UV (which is there since I dynamically load textures for the ball) to place them "pixel-perfect" all around the ball, if necessary (or at least half the ball)?

 

Thank you guys and a happy New Year  

[Wingnut]

Hey, happy new year, AB, and welcome to the forum.  It is a little sleepy here, lately, eh?  Sorry.  Here in the USA where I am, everyone is busy trying to thaw the champagne so they can toast the new year.  It's SO cold, most have resorted to cutting-up the bubbly into bite-size chunks... with chain saws. 

Yeah, decals... phew... have you ever looked at the code for decals?  https://github.com/BabylonJS/Babylon.js/blob/master/src/Mesh/babylon.meshBuilder.ts#L1030

Just a pile of tumor-causing math, eh?  *nod*   That's cuzzzzzzz... decals are special.  The are "mesh-contour-sensing" at creation time (but no automatic contour-updating when/if moved onto different surface contours later, post-creation.)

Given that decals are angle-sensing at creation-time (so they can "bend" to match mesh surface contour somewhat)... they also have some understandable and justified limitations.  One of those limitations... is seen when a decal has to contour to an angle/corner nearing 90 degrees.  You can REALLY see how decals act... better... if you set your decal.showBoundingBox = true;  THEN you can see the "hell" that the decalMesh goes-thru... to make its material act any-what decal-like.  Decals are not easy.  They are an advanced feature, and somewhat specialized for certain tasks only.

YOU, my friend... have hit a natural limit of decals.  So, as you have speculated... it might be time to move-on to a new way of accomplishing your goals.

I believe... your solution is with using Babylon's DynamicTexture.  There's many playground demos that use them.  Their primary purpose was to draw text on textures, and later in BJS history, Babylon GUI was invented, and made that task even easier, using a different method.

But dynamicTexture lives-on, because of another thing that is at its heart... the W3C context2d world.  It is essentially... SVG (if you know anything about that).  It lets you "paint" nearly anything onto a BJS dynamicTexture, and then call dynamicTexture.update(), and boom... whatever you painted or pasted into its "canvas"... is put onto the texture (which YOU have already wrapped onto your sphere).

To be brief, it is full power to paint stuff onto textures, or over-write a "sub-image" atop/onto a section of another "master" image.  I have made some posts about context2d on the forum, so perhaps a forum search for 'context2d' is a good first step.

After you create/apply a dynamicTexture, there are ways to "get a ref" to the context2d that IT is currently using.  After getting a handle to that... you can mess with it... severely... using any of the directives seen at the W3C URL above.  Particularly... https://www.w3.org/TR/2dcontext/#drawing-images-to-the-canvas

That action allows you to "place" a sub-image... into/onto another image... byte-by-byte, pixel-by-pixel.  POWER!  But don't forget... call myDynamicTexture.update() at the end of the "messing-with".  It is very easy to forget to do that.

Ok, you have some new info, new leads, new toys... now you are ready to take over the world, right?  I think it is time to leave decals behind... and move to "the big engine".    And, do share, if you build stuff, especially with playground examples.  "Hacking" on a BJS dynamicTexture's context2d canvas/imageBuffer... is advanced stuff, and there's not many that dive-into it.  We could use all the teaching we can get, and we all love looking at folks' scenes 'round here, especially if they are playgrounds.

We'll be nearby to help, if you get into any trouble.  Be patient with yourself.  Examine those playgrounds.  Babylon DynamicTextures are easy, but the W3C context2d stuff that lives behind our dynamicTextures... is a big fat monster that needs a steady hand... to "wrangle". 

[chicagobob123]

Wingnut thanks a bunch.