Home/ Questions/Q 39410
In Process

askthedev.com Latest Questions

Asked: 2025-04-16T02:14:12+05:30

What algorithm can clearly define borders in an image for procedural map generation similar to the provided examples?

I’m diving into a bit of image processing and map generation for a game I’m working on, but I’m hitting a wall with getting a clear definition of borders in my images. I have this existing image of an island that I want to process to use as a game map, but I’d like to apply a procedural approach to emphasize those borders.

I started down the path using a basic Sobel filter to isolate edges, which is fine, but I’m not getting the clear-cut regions I’m hoping for; the end results are not quite where I want them to be. For reference, I implemented this Sobel algorithm in Unreal Engine like so:

“`cpp
float2 sobelMatrix[9] =
{
float2(-1, -1), float2(0, -2), float2(1, -1),
float2(-2, 0), float2(0, 0), float2(2, 0),
float2(-1, 1), float2(0, 2), float2(1, 1)
};
// Gradient calculation…
“`

After running this, I’m able to manipulate the mask produced by the Sobel output to some degree but still can’t seem to get that sharp delineation I see in other examples. You know, the kind where the regions are clearly separated and the borders are visually striking—you can see your image versus my attempts side by side!

I came across a few different outputs, but they’re nowhere near the sharpness or clarity I’m aiming for. The ideal outcome would look more like the right side of the “Reality vs Expectation” comparison I’ve shared.

So, I’m wondering, are there other algorithms out there that could help refine the borders and regions? Techniques like Canny edge detection, perhaps, or something else that might work better for this kind of task?

If you’ve got any suggestions or insight into what might work for achieving that distinct, procedural look in processing an existing image, I’d love to hear your thoughts!

Share

    Leave an answer

    You must login to add an answer.

    Need An Account,

    2 Answers

    1. The Sobel filter is useful for basic edge detection but often produces thicker or less precise boundaries. For sharper, clearer region delineation ideal for game maps, you’d benefit significantly from utilizing algorithms designed specifically for precision edge detection, such as the Canny edge detector. Canny leverages multiple stages (Gaussian smoothing, gradients, non-maximum suppression, and hysteresis thresholding), allowing finer control over edge thickness and enhancing the clarity of boundaries significantly. Additionally, combining edge detection with image segmentation approaches, such as watershed segmentation or contour-based techniques like the Marching Squares algorithm, can further refine and clearly demarcate the regions in your map.

      Moreover, procedural refinements often involve post-processing the detected edges to achieve visually appealing results—this might include smoothing filters, morphological erosion/dilation operations, or adaptive thresholding techniques within your pipeline. Procedural implementations like converting detected edge contours into vectorized paths can also offer greater refinement, allowing you to scale, stylize, and explicitly define the border visuals. Considering Unreal Engine’s capabilities, leveraging OpenCV integrations or custom shader implementations of these algorithms can help you achieve the visually striking and sharply delineated borders you’re aiming for.

    2. Sounds like you’re on the right track with edge detection, but getting those clean borders can be tricky! The Sobel filter is a classic, but it can sometimes leave the edges looking a bit fuzzy or not distinct enough.

      Since you’re looking for that clear delineation, the Canny Edge Detector is definitely worth a shot. It’s more sophisticated than Sobel and tends to produce cleaner and sharper edges. It uses a multi-stage process that helps in detecting a wide range of edges in images.

      Here are some steps to consider when implementing the Canny edge detection:

      • Gaussian Blur: First, apply a Gaussian filter to smooth the image and reduce noise, which can help prevent false edges.
      • Gradient Calculation: Calculate the gradient magnitude and direction, just like you did with Sobel, but you can use methods like Prewitt or even a simple Sobel calculation here to get initial gradients.
      • Non-Maximum Suppression: Thin the edges by keeping only the local maxima in the gradient direction—this helps in making edges sharper.
      • Double Thresholding: This helps classify strong and weak edges, which can be very helpful to determine which edges to keep.
      • Edge Tracking by Hysteresis: Finally, connect weak edges to strong edges, giving you more accurate contours.

      Another option you might explore is using morphological operations after applying your edge detection. Operations like dilation can help in enhancing the detected edges, making them stand out more.

      Don’t forget to play around with the parameters in these algorithms! Tweaking thresholds and filter sizes can make a huge difference in the results. And it’s always cool to experiment!

      If you want something even simpler, sometimes just applying a thresholding technique after your edge detection can sharpen up those borders, depending on the image. Remember, image processing often involves some trial and error, so don’t hesitate to tweak until you get what feels right for your game.

      Hope this helps you get closer to that striking map look you’re aiming for!