How To Draw A Coiled Snake

How To Create A Coiled Cable Shader In UE4

A handful of moons agone, REWIND undertook a project which heavily featured an interactive CB radio, complete with a springy-coiled handset. As it was such a key element of the projection, it was important that the coil reacted convincingly as you moved the handset about. This article takes a expect at the process of determining the virtually suitable method for achieving this, as well as the implementation.

*- Telephone model by* *Nikita Bulgakov* . *Modifications* *— Cable geometry removed from source model, textures replaced with blue material.*

Early on approaches

One arroyo we considered, was authoring the cable as a spline mesh. This would involve cartoon the profile of the coiled cable as a spline, and so using this as a path to deform a tessellated cylinder along. We threw this approach out at the idea stage, as we considered information technology would be also costly to return, and potentially besides complicated and unwieldy to implement alongside a cable simulation.

Another arroyo would take been to construct the geometry for the coiled cable every frame, much in the manner that the cable component already constructs its standard, cylindrical geometry. This would, no doubt, accept given united states of america the best results. However, generating this mesh data every frame again proved too costly, which led u.s. to our final solution — a shader approach using UE4's existing cable component every bit a canvas.

The Cable Component

Thankfully, Unreal has an fantabulous simulated cablevision component that is part of the Cable Component plugin that's enabled by default. It uses a well-known technique called 'Verlet Integration' to simulate constrained points forth the length of the cable, and and so procedurally constructs the geometry from each point. If you want to learn more about UE4's cable component and Verlet Integration, the documentation hither is an fantabulous resource!

The data that's important for the states to understand when constructing the shader is how the normals and UVs are calculated. The UVs are extremely logical, in that the UV coordinates are normalized across the length of the cable and the circumference of the cable.

*Image to demonstrate the UV coordinates of the cablevision component. Find the seam, where the meridian and bottom of the UVs meet.*

You can tile the UVs forth the U coordinate equally an option in the Cable Component. Withal, nosotros handled this tiling in the shader to keep the screw cablevision visual controls together, which we felt was a fair merchandise of usability over runtime operation.

The vertex normals are as logical, in that they point outwards from the centroid of each cantankerous-department.

Once nosotros understood how the mesh was constructed, we could begin to implement the shader.

Creating the spirals

To implement a shader like this, the first affair we want to practise is create our 'screw' pattern. To achieve this, we simply take the U coordinate and add it to the V coordinate.

Given normalized UV coordinates, this gives us a perfect 45-caste gradient, values ranging from 0 (acme leftmost pixel) to two (lesser rightmost pixel).

The last office of the puzzle is to wrap these values so that they ever output a value betwixt 0 and 1. Nosotros can use 'frac' to return the partial part of the input, which gives us exactly the result we want.

*From left to correct: Isolated U channel, U + 5, fractional part of U + V*

If we preview this on a cylinder, you tin come across that the spiral result is seamless and wraps perfectly effectually the circumference.

*Image to demonstrate how the skewed UVs event in a seamless screw.*

Now, to add more spirals, we simply need to multiply the U component by the number of spirals nosotros want. You may want to consider flooring this value, as fractional values will not have a seamless result.

*Instance of adjusting how many times the spiral wraps around our cable.*

Handling this in the shader as well means that we can have as many spirals as we like, without incurring a higher triangle count, equally the geometry-led solutions would take done.

Once we accept a linear gradient that spirals seamlessly around our cablevision, we can use this data to drive the normals and thickness of our spiral cable.

Constructing the normals

To construct the normals, nosotros want to evaluate the linear gradient and output different directions. To do this, we tin utilize the handy 'iii Color Blend' node — which, given an alpha, blends three colours (or in our instance, management vectors) linearly. We just need to supply the 3 management vectors, which will exist: left (-1,0,0), upward (0,0,1) and correct (one,0,0), and we've synthetic our normals! We tin can so transform this vector from tangent space to world infinite, before plugging it into the result node of the cloth (in our example, we opted out of using Tangent Space Normal in the material as we were constructing the normals in the shader — this saves on a few shader instructions!)

*Example of our synthetic normals responding to a spotlight source*

Handling cablevision separation

Nosotros're getting there, but our cable does not separate! We want our cable to split up and conserve the cable thickness as it is stretched, giving the illusion that the cablevision is stretching autonomously.

This will, by necessity, need to be driven by a shader parameter value determined in-game logic, but for at present, we just need to implement the functionality in the shader for u.s. to hook up.

To handle this, we tin merely scale our linear gradient from its centre, using the following formula:

*Example of the shader graph for scaling the gradient by its mid point*

The frac node is the result of our linear spiral gradient; we dissever this by our cable width to scale it accordingly, before adding 0.5 (half of our normalised linear gradient) and subtracting 0.5 over our cable width in order to reposition the slope and so that it is centralised. Side by side, nosotros saturate the output so that we don't return values outside of the 0 to i range.

Finally, we need to invert the gradient and find the min value between this and the original, non-inverted gradient, earlier multiplying by 2. This creates a slope from 0 to 1, and back down to 0.

*From left to right: The original slope, the inverted gradient, the min value of both gradients, the re-normalized gradient.*

This gives usa something that resembles a height map for the circumference of the cablevision, which we can utilise to cut-out the screw. We only need to pass this into the opacity mask pin of the upshot node after evaluating all values in a higher place 0 as 1, using an if statement node.

*An example of adjusting the cable width property in the shader — we'll be poking this programmatically later!*

As nosotros're using the same scaled slope to drive our normals as our opacity, the normals scale appropriately likewise from the same input.

Now would be a good time to set up your material to two-sided, if you haven't already, so we can draw the spiral cable on the back-faces of the cablevision geometry too.

Treatment the silhouette

Now our cable is looking a bit more voluminous, just the dastardly silhouette is giving it abroad!

It'd be much nicer if the cable was rounded along its contour. We generated a height map in the previous step, so why non resolve this against the profile of the cable from the given viewing angle, and benumb the opacity falloff accordingly?

*From superlative to bottom: Not-attenuated silhouette, adulterate silhouette*

We can practise this by getting the camera vector from each pixel and transforming it from globe space to tangent space. We can so evaluate the 'Chiliad' channel to determine the direction of the pixel for the viewing angle. From this, we can construct what amounts to some other peak map that spans the length of the cable horizontally.

Given these two summit maps, we can so attenuate our scale value based on how close the pixel is to the edge of the cable, giving the illusion that the cable has rounded depth.

We found this method to be much more reliable than using a fresnel function, which broke the illusion at certain glancing angles.

Tying it all together

Once we have finalised our cablevision shader, nosotros demand to claw it up to some logic, so that it comes apart as nosotros stretch it out and coils back up again when we ease the tension.

All nosotros need to know in the shader to drive this is the current length of the cablevision. We tin can evaluate this on the CPU, either by naively querying the distance from the start and endpoints or — a amend approach — by deriving the cumulative distance between each particle of the verlet integration simulation.

Once we accept this value, we merely need to update the Cable Width parameter based on the length of the cable. Here's the naive implementation that can be done without having to poke effectually the source code for the UCableComponent:

Et voila! You have yourself a springy, coiled cable!

There are a handful of other things nosotros implemented, such as a smoothstep to handle falloff of the cable's edges, equally well as shrinking the cablevision forth its vertex normals when stretched out.

In conclusion, we were able to simulate the look and feel of a coiled cable in the shader, without the need for supporting spiral geometry. There are many more than things you could do to extend this system — why not experiment and meet what you come with?