ozRocker Posted January 17, 2017 Share Posted January 17, 2017 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 Quote Link to comment Share on other sites More sharing options...
ozRocker Posted January 17, 2017 Author Share Posted January 17, 2017 ok, I simplified the playground. I got rid of fabric and just tested using Babylon.js text. You can see the text getting cut off across the seam http://www.babylonjs-playground.com/#9U086#120 Quote Link to comment Share on other sites More sharing options...
jerome Posted January 17, 2017 Share Posted January 17, 2017 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 Quote Link to comment Share on other sites More sharing options...
ozRocker Posted January 17, 2017 Author Share Posted January 17, 2017 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. Quote Link to comment Share on other sites More sharing options...
iiceman Posted January 17, 2017 Share Posted January 17, 2017 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 Quote Link to comment Share on other sites More sharing options...
ozRocker Posted January 17, 2017 Author Share Posted January 17, 2017 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 :/ Quote Link to comment Share on other sites More sharing options...
iiceman Posted January 17, 2017 Share Posted January 17, 2017 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) Quote Link to comment Share on other sites More sharing options...
ozRocker Posted January 17, 2017 Author Share Posted January 17, 2017 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 Quote Link to comment Share on other sites More sharing options...
iiceman Posted January 18, 2017 Share Posted January 18, 2017 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! Quote Link to comment Share on other sites More sharing options...
iiceman Posted January 18, 2017 Share Posted January 18, 2017 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. Quote Link to comment Share on other sites More sharing options...
ozRocker Posted January 18, 2017 Author Share Posted January 18, 2017 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 iiceman 1 Quote Link to comment Share on other sites More sharing options...
Nabroski Posted January 23, 2017 Share Posted January 23, 2017 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 luckhttp://www.babylonjs-playground.com/#1H7ZZH#2 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.