masterdon Posted May 31, 2017 Share Posted May 31, 2017 Hi Team, I am working on 2D house planners. I have following design. Created using boxes: http://www.babylonjs-playground.com/#SUXKHY#7 However the edges/border of design looks broken when camera is positioned at 200+ distance with respect to y axis of design. The only time they are visible properly is when they are viewed closely when zoomed. How can i fix this? Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted May 31, 2017 Share Posted May 31, 2017 this is expected as the edges will not cover the size of a pixel at large distance. There is no obvious way to fix that. Here are some ideas thought: - Instead of zooming back, why not scaling down the mesh on X and Z axis only? - Draw edges with a different approach (with tubes?) Quote Link to comment Share on other sites More sharing options...
masterdon Posted June 1, 2017 Author Share Posted June 1, 2017 @Deltakosh: still getting the same issue when borders are replaced with tubes. http://www.babylonjs-playground.com/#SUXKHY#9 Or Should i rather user canvas 2D workspace here which will be shown on top of a 3D plane. Like this: http://www.babylonjs-playground.com/#1BKDEO#23 (which is appearing blurred though.. ) Need to achieve planner that we have implemented(along with some new features like grid implementation,draggable feature) in fabric js: Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted June 1, 2017 Share Posted June 1, 2017 For the tube, I forgot to mention that you may want to increase size when zooming out. Other option: use Babylon.GUI to draw lines (in 2d) on top of your mesh Quote Link to comment Share on other sites More sharing options...
masterdon Posted June 1, 2017 Author Share Posted June 1, 2017 @Deltakosh: Can i find any reference for same. Sorry to bother again and again but i am very new to babylon js and running short of time deciding how to move ahead(you can see my previous threads )... Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted June 1, 2017 Share Posted June 1, 2017 not sure to understand your question lines in Babylon.GUI: http://doc.babylonjs.com/overviews/gui#line Quote Link to comment Share on other sites More sharing options...
masterdon Posted June 1, 2017 Author Share Posted June 1, 2017 @Deltakosh: You can see the thread i have shared above. I have posted the snapshot there. a simple 2d planner. We have already implemented that in fabric js(if you want i can share a video showing how it works). And now i am trying to implement exactly the same using babylon js. Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted June 1, 2017 Share Posted June 1, 2017 I don't lnow Fabric.js but I think that drawing lines in 2d with babylon.GUI is the best option here masterdon 1 Quote Link to comment Share on other sites More sharing options...
masterdon Posted June 1, 2017 Author Share Posted June 1, 2017 Ok. Ill use canvas2d (http://doc.babylonjs.com/overviews/canvas2d_home) environment with babylon.gui(rectangles and lines) now. Ill update you regarding the same Thanks a lot. Have a great Day Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted June 1, 2017 Share Posted June 1, 2017 THanks..I guess you could even use gui only masterdon 1 Quote Link to comment Share on other sites More sharing options...
masterdon Posted June 5, 2017 Author Share Posted June 5, 2017 @Deltakosh: i started to implement your first suggestion. scaling the element. however things break as elements start overlapping each other. I believe i will need to translate them as well. any suggestion on this part? Is there anything sort of grouping which handles translation and scaling all together. Here is the attempt for same http://www.babylonjs-playground.com/#55SNLC#26 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted June 5, 2017 Share Posted June 5, 2017 There are a lot of code in this pG. Can you try to simplify it in order to directly highlight the issue? Quote Link to comment Share on other sites More sharing options...
masterdon Posted June 5, 2017 Author Share Posted June 5, 2017 @Deltakosh: line number 173 to 179. That is where the scaling code is. Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted June 5, 2017 Share Posted June 5, 2017 Ok then yes you need to also translate to adapt to zoom 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.