amethlex Posted November 2, 2017 Share Posted November 2, 2017 Hi All, I am using Babylonjs to create map these days. Basically, I have two layers, one layer is tiledmap, which is a png image, another is semantic map, which is a svg file. The size of two map is almost same. So I just create two grounds whose materials are created by the png image and the svg file and put them at the same position. If I make them locate at different heights, one ground will hide another. If I make them locate at the same heights, they cannot merge perfectly, at some angle you can see svg materials clearly, and png materials at some other. My problem is how to merge these two grounds perfectly? Quote Link to comment Share on other sites More sharing options...
Pryme8 Posted November 2, 2017 Share Posted November 2, 2017 Huh? Do you want to merge their geometry or create a single plane that is a combination of the two height values? also for this to really work you would want the two images to be the same size or at least at some sort of whole ratio this can be done by loading the context into secondary canvases and making sure their original context is scaled to fit the two, so maybe pick the larger of the two images and scale the other up to it or downsize the big one to be the same size of the small one both will have slightly different results. the make a final image that is a blending of the two images and use that as the height map. Quote Link to comment Share on other sites More sharing options...
amethlex Posted November 2, 2017 Author Share Posted November 2, 2017 Well, how can I blend two images? Quote Link to comment Share on other sites More sharing options...
aWeirdo Posted November 3, 2017 Share Posted November 3, 2017 Please create a PG repo so it is easier for us to understand and help https://playground.babylonjs.com Thanks. Quote Link to comment Share on other sites More sharing options...
Pryme8 Posted November 3, 2017 Share Posted November 3, 2017 I’ll show you how to blend to images if I get a chance today Quote Link to comment Share on other sites More sharing options...
Pryme8 Posted November 3, 2017 Share Posted November 3, 2017 https://www.babylonjs-playground.com/#QC94TZ I can think of like 20 different ways to do this, but here is a quick and gritty one. Quote Link to comment Share on other sites More sharing options...
amethlex Posted November 4, 2017 Author Share Posted November 4, 2017 7 hours ago, Pryme8 said: https://www.babylonjs-playground.com/#QC94TZ I can think of like 20 different ways to do this, but here is a quick and gritty one. Thank you, Pryme8. So, basically, your idea is to get the average of data of two images. It's a good idea. 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.