Generating a SoulerCoaster in Unity – Visual Arts – Tutorials

For those who seek for SoulerCoaster, you can see a large number of names for it. It’s also named Curvemesh, Splinemesh, or Swoosh.

They describe a method to visualise magic or energetic results.

The SoulerCoaster is a path mesh with an overlapping UV map.

It’s outlined as two quads which are oriented orthogonal to one another. They share the identical UV house. So a texture showing on the vertical quad additionally seems the identical on the horizontal quad.

We are able to now scroll the feel over these quads to generate a transferring impact.

We generate the SoulerCoaster as two planes aligned orthogonal to one another.

Beforehand, I used Blender for higher visualization. Now, we’ll swap to Unity. We are going to use the LineRenderer element to retailer the trail of our SoulerCoaster.

We are going to begin by creating a brand new file SoulerCoasterTutorial.cs.

// We want a LineRenderer for the trail and a MeshFilter to retailer the created mesh
[RequireComponent(typeof(LineRenderer), typeof(MeshFilter))]
public class SoulerCoasterTutorial : MonoBehaviour 
    // ContextMenus might be referred to as by way of right-click on the element within the inspector
    [ContextMenu("generate()")]
    public void generate() 
        // Retrieve the trail from the LineRenderer
        var positions = new Vector3[GetComponent<LineRenderer>().positionCount];
        GetComponent<LineRenderer>().GetPositions(positions);

        // Holds the vectors
        Checklist<Vector3> vectorList = new();
        // Holds the triangle faces
        Checklist<int> triangleList = new();
        // Holds the UV map
        Checklist<Vector2> uvCoordinates = new();

        // First we push the vertical airplane
        var nextIndex = pushQuadPlane(0, positions, vectorList, uvCoordinates, triangleList, 0);
        // Second we push the horizontal airplane
        pushQuadPlane(nextIndex, positions, vectorList, uvCoordinates, triangleList, 90);

        // Create the mesh and assign it
        var mesh = new Mesh 
            title = "soulercoaster",
            vertices = vectorList.ToArray(),
            uv = uvCoordinates.ToArray(),
            triangles = triangleList.ToArray()
        ;
        GetComponent<MeshFilter>().mesh = mesh;
    
    
    non-public static int pushQuadPlane(int startIndex, Vector3[] positions, Checklist<Vector3> vectorList, Checklist<Vector2> uvCoordinates,
    // Proven Under
    
}

That’s simply the calling assemble for the actual mesh generator.

Let’s take a look on the pushQuadPlane methodology. I concern it is reasonably lengthy, nevertheless it consists largely of feedback

non-public static int pushQuadPlane(int startIndex, Vector3[] positions, Checklist<Vector3> vectorList, Checklist<Vector2> uvCoordinates,
    Checklist<int> triangleList,
    int rotate) 
    var currentPosition = positions[0];
    var deltaDirection = positions[1] - currentPosition;
    // Discover an orthogonal vector to the trail and rotate it across the given rotation (0 for horizontal, 90 for vertical)
    var quadDirection = Quaternion.AngleAxis(rotate, deltaDirection) * Vector3.Cross(currentPosition, deltaDirection).normalized;

    // Push preliminary quads
    vectorList.Add(currentPosition + quadDirection);
    vectorList.Add(currentPosition - quadDirection);
    // Begin on the backside of the UV map
    uvCoordinates.Add(new Vector2(0, 0));
    uvCoordinates.Add(new Vector2(1, 0));
    var lastPosition = currentPosition;

    // We want the beginning Index so the triangles can reference the proper vectors
    var i = startIndex + 1;

    // Iterate over all positions to create the quad
    // Every iterations provides two new vectors that construct a quad with the earlier two vectors.
    // That's the reason we have to push the preliminary quads with out faces
    whereas (i - startIndex < positions.Size) 
        currentPosition = positions[i - startIndex];
        deltaDirection = currentPosition - lastPosition;

        // Discover an orthogonal vector to the trail and rotate it across the given rotation (0 for horizontal, 90 for vertical)
        quadDirection = Quaternion.AngleAxis(rotate, deltaDirection) * Vector3.Cross(currentPosition, deltaDirection).normalized;
        vectorList.Add(currentPosition + quadDirection);
        vectorList.Add(currentPosition - quadDirection);
        
        // Calculate the progress alongside the UV map
        var progress = (i - startIndex) / (positions.Size * 1f);
        uvCoordinates.Add(new Vector2(0, progress));
        uvCoordinates.Add(new Vector2(1, progress));

        // Construct the quad face from two triangles
        // I believe that is essentially the most sophisticated half.
        // Every mesh consists of triangles. A triangle is outlined by pushing 3 entries onto the triangle array.
        // These 3 vectors must be in clockwise order or they are going to be interpreted as backfaces.
        
        // Push the decrease proper vector
        triangleList.Add(i * 2 - 2);
        // Push the decrease left vector
        triangleList.Add(i * 2 - 1);
        // Push the higher proper vector
        triangleList.Add(i * 2);

        // Push the decrease left vector
        triangleList.Add(i * 2 - 1);
        // Push the higher left vector
        triangleList.Add(i * 2 + 1);
        // Push the higher proper vector
        triangleList.Add(i * 2);

        lastPosition = currentPosition;
        i++;
    

    return i;

All referenced information can be found on the finish of the article.

We generate the mesh alongside the trail of a LineRenderer.

At first, we have to add the SoulerCasterTutorial element to a GameObject.

If you cannot choose the element, you both have a compile error someplace, or the filename doesn’t match the classname.

That provides the LineRenderer and MeshFilter elements to the GameObject. Now we fill the LineRenderer with a path:

We are able to now right-click on the SoulerCoasterTutorial element and select generate.

If all the things works, we see, that the MeshFilter has a brand new mesh assigned to it.

Now, we have to add a MeshRenderer element and assign a Materials.

We are able to see the 2 quads standing on high of one another. To animate this mesh with a texture we have to create a brand new Shader. To construct this shader we’ll use Unity ShaderGraph.

The shader scrolls over the offered texture.

We need to create a clear additive Shader that renders on each side of the faces. You possibly can change these settings within the Graph Inspector.

We begin with a Time-Node and multiply it by our velocity variable. With this worth, we create an offset vector2 for the Tiling and Offset-Node. That node takes the offset and the Tiling variable to stretch and scroll over the offered texture. We take the modified UV and funnel it into the Pattern Texture 2D-Node. You could find the used texture referenced on the finish of this tutorial. This node additionally takes a SamplerState to set some parameters for the feel. The output of this node will go straight into the Alpha Output node.

Lastly, We create a fabric and assign the created Shader.

We assign the feel and set tiling and velocity. The y-tiling is larger than the x-tiling as a result of the mesh has extra size than width.

We assign the created materials to the MeshRenderer element to see the consequence.

Wrapping up

The toughest half is the mesh era. This tutorial covers solely the fundamental use circumstances. Some paths will not be attainable with this algorithm. For the sake of simplicity, I omitted the implementation of edge circumstances.

You could find all assets to the tutorial on Github: https://github.com/klg71/soulerCoasterTutorial.

For those who do not need to implement the SoulerCoaster by yourself, you should use this Unity bundle. It accommodates a complicated mesh generator, a number of geometric path turbines, the wanted shaders, and a few instance textures.

You could find it within the Unity AssetStore and on Artstation.