Announcement

Collapse
No announcement yet.

Material - draw a line between two coordinates?

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Material - draw a line between two coordinates?

    Just wondering if it is possible to do with materials, something similar to the draw debug line in blueprint, from one point to another

    Thanks

  • #2
    I'm trying to make a scrolling minimap that can draw a line between the player and a specific location, i am able to do it in blueprint with draw debug line, but i wouldn't know how to prevent the line from going out of the minimap's frame when the specific location is out of range

    I can easily make a scrolling material but i'm not sure how i could draw a line between two coordinates

    Are there any other alternatives?

    By the way this is not a HUD, the minimap will be viewable on a LCD monitor actor, here is an example of what i'm trying to achieve

    Click image for larger version

Name:	Tracker.jpg
Views:	1
Size:	210.0 KB
ID:	1075859

    Comment


    • #3
      Hey guys,

      Yes it is possible but not simple or cheap as Jamsh suggested. That said it was pretty quick for me to knock this out since I mess around with these type of coordinate based shapes pretty often. I did get thrown off by the missing -X after the swizzle for a bit though (DanW reminded me that y,-x is perpendicular to x,y which is how the transform here works).

      This works by drawing a line between P0 and P1. You can specify line thickness and edge hardness. It costs around 17 instructions. You could make this into a material function and use it a few times. I might do that and toss is into engine\functions.

      Click image for larger version

Name:	Draw_Line.JPG
Views:	1
Size:	258.4 KB
ID:	1075860

      In the left preview the line goes from 0.1,0.1 to 0.9,0.9, showing that there is also end point cutoff on the line drawing.

      A simpler approach is to use a single quad mesh and use the worldpositionoffset shader to move the top 2 verts (using UV-Y coord) to the P0 location, and the bottom 2 verts to the P1 location. Then you project using the UV-X coordinate along the vector between your points for thickness.

      That is how we do alot of fake shadows for things like the hexmap in Fortnite where the objects are too small to cast nice real shadows. Then you just spawn one of these meshes, make a material instance dynamic and set the point locations.
      Last edited by RyanB; 05-06-2015, 04:08 PM.
      Ryan Brucks
      Principal Technical Artist, Epic Games

      Comment


      • #4
        Here's what my setup looks like, the LCD background is a simple material, the boat, player dot icon are small planes that i placed close to the screen, they get offset as the player moves around, and i can draw a debug line between them

        Click image for larger version

Name:	Tracker.jpg
Views:	1
Size:	156.6 KB
ID:	1075861

        But if i wanted to go further in the world where point A wouldn't be in range, the line would stick out from the LCD screen, unless i could somehow mask the actors and the line in the shape of the screen

        I'm not sure what to do

        Comment


        • #5
          @RyanB, i have to give this a try, it looks very promising

          I'll see what i can come up with and will report back

          Thanks everyone

          Comment


          • #6
            Originally posted by KhenaB View Post
            But if i wanted to go further in the world where point A wouldn't be in range, the line would stick out from the LCD screen, unless i could somehow mask the actors and the line in the shape of the screen

            I'm not sure what to do
            With the material rendered line approach, the line drawing-out-of bounds issue goes away since it can only draw in the UVs of your hud material. Masking the separate actors would have to be done by creating a square shaped mask using worldposition info.

            All you really need is a way to convert your locations into the 0-1 UV space of your screen, if you haven't done so already.
            Ryan Brucks
            Principal Technical Artist, Epic Games

            Comment


            • #7
              @RyanB, That's exactly why i'm trying to do it with materials only, the masking issue wouldn't be a problem anymore

              I already converted the locations, my player's world location offsets the heightmap background and the boat icon 1:1 with a constant 2 parameter, all that was missing was a way to replace the draw debug line between my player and the ship

              Comment


              • #8
                It works perfectly, i appreciate the time you took to help out, i couldn't have come up with this by myself, sometime i wonder how some of you guys get so good with maths

                Thanks!

                Comment


                • #9
                  I am glad it worked! Once you mess around with this sort of thing a lot it starts to get easier. Messing around in the math hall content example map can help familiarize you with the basic vector math that shows up over and over in this stuff.

                  You could think of it working by first Rotating the UVs to match the angle of the line, and then its just a simple distance calculation for the line width. capping the line at the endpoints is the more Nodey part. But all that happens in the rotated Y-coordinate which makes it pretty easy.
                  Ryan Brucks
                  Principal Technical Artist, Epic Games

                  Comment


                  • #10
                    Here's the final result, it took a bit of trial and error to match all the vectors

                    Venturing away from the ship

                    Click image for larger version

Name:	1.jpg
Views:	1
Size:	227.1 KB
ID:	1075867

                    Venturing further away

                    Click image for larger version

Name:	2.jpg
Views:	1
Size:	244.4 KB
ID:	1075868

                    Thanks again

                    Comment


                    • #11
                      haha, once again he proves the impossible possible... Ryan I haven't seen the Hexmap thing, but that sounds like you are drawing multiple (maybe 6?) lines in the material based on the same method. Is that correct?

                      If so, I'm wondering if I could use it to draw a series of 2D Lines in UMG, rather than creating a custom Spline-based Widget Component perhaps.

                      Comment


                      • #12
                        Actually for the fortnite hexmap I was talking about something different. I was talking about using vertex shaders to project a line using light vector to make fake shadows. The advantage to doing a bunch of lines that way, is that it doesnt make any master material more expensive with each new line that needs to overlap. We did this because tiny objects would not cast a very visible shadow due to how the camera is setup for the hexmap. We also used that same trick to fake the volumetric shadows of the kites at the end of the GDC kite demo since the kites were too thin to actually show a volumetric shadow.

                        The basic gist of this technique is to use the mesh UVs to isolate various parts of the mesh and use vector math to push them around. I will make a quick example in a second.
                        Ryan Brucks
                        Principal Technical Artist, Epic Games

                        Comment


                        • #13
                          Ok super quick example using EditorPlane mesh.

                          Material:
                          Click image for larger version

Name:	WPOLine_01.JPG
Views:	1
Size:	116.6 KB
ID:	1075927

                          Result, two of "EditorPlane" mesh in the scene, on the left has the LineWPO material, on the right has default material:
                          Click image for larger version

Name:	WPOLine_02.JPG
Views:	1
Size:	19.8 KB
ID:	1075928

                          So by using a global parameter for lightvector and some soft texture alphas, it is possible to make nice fake projected blob shadows from things. This has a variety of uses.

                          I used the word "Projected" because with this method you essentially shrink all the verts to 0 (the 0 - worldpos node) and then "push" them in the direction of your desired line. UV-Y masks a push along the line length, UV-X masks a push along the line width vector (which is generated via cross with 0,0,1). UV-X gets biased into -1 to 1 to center it on the line. As 0-1 it would be off to one side a bit.

                          It's also really easy to redo the math to go between endpoints instead. Just replace "ActorPosition" with your P0, and for "linelength" instead use the vector Length function to get length of P0-P1.
                          Vector becomes P1-P0 normalized.
                          Last edited by RyanB; 05-07-2015, 06:26 PM.
                          Ryan Brucks
                          Principal Technical Artist, Epic Games

                          Comment


                          • #14
                            Heres an example from a fortnite skybox. This scene is all unlit and all the shadows are fake since the skybox would be way beyond the dynamic shadow distance.

                            Each shadow under the small rocks and bushes is a single quad with a blob shadow on it, set up almost identical to the above material example:
                            Click image for larger version

Name:	ShadowsProjected1.JPG
Views:	1
Size:	50.2 KB
ID:	1075929

                            The larger rock shadow is also very similar but uses a box instead of a plane and uses "worldpositionbehindtranslucency" to map the shadow which is a bit more complicated:
                            Click image for larger version

Name:	ShadowsProjected.JPG
Views:	1
Size:	89.2 KB
ID:	1075930

                            Because lightvector is stored in a global parameter, all these fake shadows move with the time of day cycle.
                            Last edited by RyanB; 05-07-2015, 06:40 PM.
                            Ryan Brucks
                            Principal Technical Artist, Epic Games

                            Comment


                            • #15
                              Mind = Blown.

                              That's a pretty awesome technique. Since you're using it in Fortnite and the Kite demo I'm guessing it's fine, but my only concern is does it create significant overdraw with all those translucent quads over everything? I guess whatever performance you'd lose by using Dynamic Shadows you gain back in spades using this approach anyway.

                              The result are pretty spectacular actually, without knowing this I'd never have seen anything out-of-place with the shadows at all.
                              Last edited by TheJamsh; 05-08-2015, 05:43 AM.

                              Comment

                              Working...
                              X