No announcement yet.

Material - draw a line between two coordinates?

  • Filter
  • Time
  • Show
Clear All
new posts

    Originally posted by TheJamsh View Post
    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.
    The little rock shadows on the ground are not bad since they are tiny and almost never overlap.

    The big rock mesa shadows on the other hand do get pretty slow since they are boxes which means you see the overdraw even where the box hits the sky.

    To mitigate that, the vertex material has a parameter to deform the box to be as small as possible from the side. Here is an example.

    With the optimization off, you can see how the projected box gets pretty huge:
    Click image for larger version

Name:	Projection_box_01.JPG
Views:	1
Size:	97.3 KB
ID:	1076610

    With the optimization on about 50%:
    Click image for larger version

Name:	Projection_box_02.JPG
Views:	1
Size:	80.8 KB
ID:	1076611

    On as much as it can go for this shape:
    Click image for larger version

Name:	Projection_box_03.JPG
Views:	1
Size:	53.8 KB
ID:	1076612

    If that 'shrink' parameter was turned up any higher, you would see part of the "self shadowing" of the pillar missing either on its backside or where the ground begins to raise up a bit.
    Ryan Brucks
    Principal Technical Artist, Epic Games



      Originally posted by RyanB View Post
      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.

      Hi Ryan,

      Thanks a lot for this function.
      Not only I found it quite useful as is but it helped me a lot to do a function drawer shader.

      In my implementation I added some inputs to allow the segment to be continued as a line. You can download it here, for those who are interested.
      The function drawer is here:

      Best regards

      Note: I tried to attach the file to this tread but I got this message: - Your file of 98.0 KB bytes exceeds the forum's limit of 97.7 KB for this filetype.
      :S Maybe the attachment size could be increased a bit, don't you think so?


        Thats pretty cool.

        Out of curiosity have you seen the material functions "Plot Function on Graph" and the content example level Math_Hall.umap? looks like you build something similar.
        Ryan Brucks
        Principal Technical Artist, Epic Games


          Not sure if this is relevant (or if it has been suggested before), if so then please disregard.

          If you are looking for a method to create a dynamic line (with a wide range of visual fx capabilities and control), why not make a shader that does this to a line mesh attached to your HUD object?

          I put this together in just a few minutes. It is incredibly easy but really dynamic and utilizes the full UV point array so advanced visual effects can be easily applied (as well as motion). Even curve edits and additional points may be blended in for a relatively cheap cost.

          Click image for larger version

Name:	DynamicLine00.jpg
Views:	1
Size:	492.1 KB
ID:	1087821

          Click image for larger version

Name:	DynamicLine01.jpg
Views:	1
Size:	268.8 KB
ID:	1087822

          Click image for larger version

Name:	DynamicLine02.jpg
Views:	1
Size:	293.8 KB
ID:	1087823

          Click image for larger version

Name:	DynamicLine03.jpg
Views:	1
Size:	262.0 KB
ID:	1087824

          Click image for larger version

Name:	DynamicLine04.jpg
Views:	1
Size:	321.5 KB
ID:	1087825
          UE3 - Advanced FX Masterclass Part 1 DVD
          UE3 - Advanced FX Masterclass Part 2 DVD


            Originally posted by RyanB View Post
            Thats pretty cool.

            Out of curiosity have you seen the material functions "Plot Function on Graph" and the content example level Math_Hall.umap? looks like you build something similar.
            Indeed! I didn't know about that map! It's awesome, there are plenty of things there! The plot function material is incredible, the interactivity is really nice and the examples are really really cool!!

            I have many things coming to my mind when looking at all this.

            First I see there is an example for Sine (1.11). It says that the period of the implemented Sine is 1, which is quite unusual. Is there a reason for this?
            I mean, maybe it is an optimization for many things, but the time we waste, as user, to check and double check our code before discovering that!!! Is is also very disturbing because the documentation says that the implementation is in radians (cf Sine Documentation). Maybe you should fix the documentation.

            Beside at the end of the level there is the following panel about trigonometry:
            Click image for larger version

Name:	TrigoFormulae.jpg
Views:	1
Size:	96.0 KB
ID:	1087819
            Well, strictly speaking, from a math point of view, this is not consistent with the implementation. You should mention there that the unit of X is in turns, not in radians.

            The way the functions PlotFunctionOnGraph_Setup_Input and PlotFunctionOnGraph_Derivative expose their plugs is really interesting. By using a re-entry of the value it avoids to have 2 nodes, one before the function and one after, as I did. Clever.

            The implementation I did to draw the graph is quite similar to PlotFunctionOnGraph_Setup_Input. I didn't do any correction for the thickness though. This function has some code in it for that but it looks disconnected and I have some trouble to understand if it works or if this is a rest of some code from PlotFunctionOnGraph_Derivative.
            I wasn't able to get any change on the result when I tried to change the range. It works as expected on PlotFunctionOnGraph_Derivative though. Is there something special to take the range in account?

            PlotFunctionOnGraph_Derivative is really interesting too. I think by tweaking it a bit we could make it draw parametric functions.
            In practice it is nice not to have to provide the derivative of the function to draw. Nevertheless giving 2 times the same function (x) is not always easy: inside a shader the function may be quite complex and we may not want to duplicate it, even for debug purpose. That's one of the reasons why I choose to have a pre-function and a post-function in my implementation (at the price of some lack of usability).

            It would be nice to have a true documentation page for these 2 functions, with some basic examples (after a very quick search I didn't find one for PlotFunctionOnGraph_Setup_Input).

            Ho and I forgot to say the dynamic display of the values on the graph, in the scene, is great too. I will check that in details!

            Thanks a lot for these references, they will be very helpful!

            Last edited by werwack; 09-17-2015, 07:38 PM.


              Thanks for the feedback.

              Good point about the SinX thing not being literal since we change the period. In practice I use those formulas as identities though and end up using only the second part of the formula, since it can tell you which sides of a triangle you need to divide but you don't always need to perform the sine operation (unless you are doing the inverse sine which is expensive). Or for example lets say you are dealing with a dot product which by definition returns the cosine of the angle. In that case, the dot product literally is just A/H so there is no ambiguity and this can help you remember that.

              There may just be a bug with the standard PlotFunction node. I will take a look.

              And yes it is a bit annoying to plug some functions twice. At the time I didn't really understand how to leverage ddx or ddy so I could probably redo that without requiring the second input. Will have to experiment with it.
              Last edited by RyanB; 09-18-2015, 04:36 PM.
              Ryan Brucks
              Principal Technical Artist, Epic Games


                You guys are awesome,
                [MENTION=3692]RyanB[/MENTION] In your post #15 the technique that you used for small rock, What you think if use this technique for a top down (Strategic) shadow ? Is it good for mobile performance ?
                And also where i can find a tutorial about that ?

                ABC Augmented Reality by UE4

                ArchVis VR


                  Originally posted by RyanB View Post
                  Ok super quick example using EditorPlane mesh.


                  Result, two of "EditorPlane" mesh in the scene, on the left has the LineWPO material, on the right has default material:

                  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.
                  This looks really good and comprehensible but how do you use it for multiple segments? Say you want to draw a parametric circle using this of say 20 segments. In a less complex engine you would just do a begin draw, call draw on the mesh with the applied material a number of times while changing the input arguments to the material and then end draw when you are done, but in UE4 i guess theres not really a traditional draw loop where you can render persistently like that so i guess every segment would need to be its own instance? Would you be able to describe how to approach this or even if you have a simple example that would really be gold worth!


                    Hi guys,

                    I'm chiming in on this as I was experimenting and had some fun with the UE material functions and coordinate system transforms.

                    For this example I wanted to use the DrawLine-2D Material Function for drawing a circle in Polar coordinates. Since a line in Cartesian coordinates represents a circle in Polar coordinates.

                    And lo and behold. It worked directly out of the box.

                    Click image for larger version

Name:	CirclePolar.JPG
Views:	1
Size:	57.9 KB
ID:	1510188

                    Below is the material function "CartesianToPolarCoordinate2":

                    Cartesian To Polar Coordinates
                    I thought it was quite intersting, so I wanted to share this.