ozRocker

Dynamic texture over UV seam

Recommended Posts

I'm using fabric.js to create a dynamic texture over a mesh.  It works well except when the dynamic texture is moved through a UV seam.  Does anyone know how I can get this working over a seam?  Here's the playground http://www.babylonjs-playground.com/#9U086#118

If you drag the "webGL" text or rectangle around the cylinder you'll see it break when it hits the seam.  I've attached a photo to demonstrate

seam.jpg

Share this post


Link to post
Share on other sites
5 minutes ago, jerome said:

Actually there is no seam on the geometry. Your text is too big for the canvas size (512). If you build a bigger canvas : http://www.babylonjs-playground.com/#9U086#121

or if you use a smaller font : http://www.babylonjs-playground.com/#9U086#122

I don't think that will solve the problem, unless I'm doing something wrong.  I can change the canvas size (texturewidth, textureheight) in this playground http://www.babylonjs-playground.com/#9U086#118 and it still gets cut off when I move it over the seam.

seam_problem.jpg

Share this post


Link to post
Share on other sites
9 minutes ago, iiceman said:

Well, I think you need to draw it twice to compensate the jump from one end of the texture to the other end: http://www.babylonjs-playground.com/#9U086#123

ok cool.  That worked.  I'm trying to incorporate that into the fabric playground which is difficult 'cos its dynamic, can be moved anywhere.  I'm basically trying to do this http://preview.punkoffice.com/clothica/ You can see the Metallica logo get cut-off when it moves over the seam on the right side of the avatar's body.  I guess I have to figure out when an edge crosses over a seam then add another fabric object on the other side and move that in conjunction with the original object, then delete it when the cursor crosses over :/

Share this post


Link to post
Share on other sites
8 hours ago, iiceman said:

Since JavaScript treats everything as a reference it might not be that hard, is that what you want: http://www.babylonjs-playground.com/#9U086#124 (only did it for the text)

I'm not sure what the difference is here.  The text still gets cut off when I drag it over the seam

seam2.jpg

Share this post


Link to post
Share on other sites

Yeah, you are right... I was pretty sure I tested it yesterday and it worked, but I guess it doesn't... strange. Sorry, not sure what went wrong (or what went right yesterday :P) If I have a bit of time on my hand I give it another try!

Share this post


Link to post
Share on other sites

Okay, new try: http://www.babylonjs-playground.com/#9U086#125

Added an ObjectMove Event as described in the Fabric Docs https://github.com/kangax/fabric.js/wiki/Working-with-events to update the position of the second text

Limitations:

  • only works from right to left it seems
  • once you move over the edge you have only the second text left, you probably have to updated both texts no matter which one is dragged

So, still far from perfect...but maybe you get the idea. There might be a better way, but thats the only way I can image how it could work at the moment.

Share this post


Link to post
Share on other sites
43 minutes ago, iiceman said:

Okay, new try: http://www.babylonjs-playground.com/#9U086#125

Added an ObjectMove Event as described in the Fabric Docs https://github.com/kangax/fabric.js/wiki/Working-with-events to update the position of the second text

Limitations:

  • only works from right to left it seems
  • once you move over the edge you have only the second text left, you probably have to updated both texts no matter which one is dragged

So, still far from perfect...but maybe you get the idea. There might be a better way, but thats the only way I can image how it could work at the moment.

Nice!! You are one smart dude!

I've attached a pic of the Metallica logo over the seam.  It doesn't look good here because of the way I structured the UV map.  That's no problem, I can redo the map and make the edges line up without a gap.  Even if your code is the best we can do I'm still happy to know I can place a dynamic texture over the seam

seam3.jpg

Share this post


Link to post
Share on other sites

this is an old playground i did on an other topic i hope you catch the idea, i dont know if it works out at the end
so the concept is the get a reflection texture on a plane an the text is on an other plane behind the cam, this way you can do advanced plane scaling without losing the text transformation. but is also i bit tricky, maybe you find something useful. good luck

http://www.babylonjs-playground.com/#1H7ZZH#2

Share this post


Link to post
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...

  • Recently Browsing   0 members

    No registered users viewing this page.