How can I create good looking football field lines?

Question

I am trying to create a football field in a countryside with correct measurements of the lines. It's for my first person game. I have a terrain with mountains, trees, etc. and a flat surface for the field. What would be the best way to achieve good quality field like this?

I thought of these solutions:

• paint the terrain - doesn't do the job, as the texture would need to be of resolution like 32k to make the lines not blured, seen from a first person view. It would also be inacurate painting it by hand.
• create a textured plane and place it on top of the terrain with alpha mask - using raster graphics still would require massive resolution, but vector graphics might make sense here. It might be quite unhandy though and from a further distance might render badly.
• project a vector graphics onto the terrain - this is probably the best of my ideas.

What would be the best approach and how to actually perform it?

Answer 1

There's a cool way to render crisp lines and contours using small resolution textures!

I usually see it being called Signed Distance Field Text Rendering - it's what TextMeshPro uses - but there's nothing stopping the technique from being used for other purposes.

The general idea is that you pre-process the texture in a special way so that each pixel stores the distance to the closest edge (0.5 for pixels right on the edge, with the value going to 0.0 outside the shape and 1.0 inside). This ends up looking a bit like a blurry version of the original texture.

But when you render that texture using a special shader (which I belive in its simplest form only needs to do something like output.a = texture.a >= 0.5 ? 1.0 : 0.0) it becomes capable of being enlarged a lot without looking blurry.

Compare the second column with the fourth column in this image:

I've never implemented it before, only heard about it. Check these resources to get you started if you like the idea:

• https://www.youtube.com/watch?v=CGZRHJvJYIg
• https://steamcdn-a.akamaihd.net/apps/valve/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf
• https://github.com/libgdx/libgdx/wiki/Distance-field-fonts

Answer 2

Unity Terrains are great. They allow the engine to make a lot of performance optimizations, both when it comes to rendering and when it comes to collision detection. So I would recommend you to paint your football field onto the terrain instead of representing it with one or more plane objects. But instead of creating one texture which represents the whole field, create many small textures which you can use as tiles.

• Create (or find) a small, tiling grass texture with which you paint the whole field.

• Open that texture with your favorite graphic editor and use it to create two variations of that texture: "grass with vertical line" and "grass with horizontal line". Use those textures to paint the horizontal and vertical lines of your football field.

  (No, please don't create one by rotating the other by 90° - the grass won't tile anymore and the seams will look weird. Reload the original texture and draw another white line on it)

• Create textures with corners, t-sections etc. as you require them and use them to paint those points where horizontal and vertical lines intersect.
• Depending on whether your preferred kind of Football is Soccer or Handegg, you will also need to create some textures with arcs or textures with numbers.

Oh, and you should not worry too much about the measures being exactly as written in the rulebook. A rough approximation of the measurements and proportions will be good enough. As long as your game doesn't include any accurate measuring tools, nobody will notice if you are a bit off. And as long as you are not making an actual football game, nobody will care either.