Search code examples
wpfhlsl

HLSL circular/spiral transition shader

I am developing some shaders for WPF, and so far I managed to get fadeout, and swipe shader working, but for this one, I have no idea where to start. Could someone please hand me out a few tips on how to approach this problem? What I am trying to achieve is the following: HLSL desired effect

Thank you

Solution

  • In my opinion the easiest way to build any complicated effect is to decompose the original effect into small parts and add them together. In your case the effect consists of 3 parts:

    1. 5 rings filled after each other
    2. each ring is filled counterclockwise from the left
    3. the filling of a ring is a circle at each end

    This in mind you can build a solution for each part separately and add the results together.

    I assume that there will be a variable float progress; rolling from 0 to 1 which determines the progress of the transistion.

    In following some starting points for each part:

    For 1. you check the distance of the texture coordinate of the fragment to the center of the screen and divide the maximum distance into 5 parts. While the progress is 0 <= progress < 0.2, the first ring is visible, while 0.2 <= progress < 0.4 the second and so on.

    For 2. you check the angle of the difference vector between the fragment and the center to the left vector, e.g. using atan2. Within each part (such as 0.0-0.2) you compare the local progress of the stage to the angle to determine the visibility, making the fragments appear in an angle dependent way.

    The 3. might be the most tricky part, as you will have to construct the center of the progress ring ends and compute the distance to the fragment. If it is within the current ring thickness is is visible.

    Hopefully this quick thoughts give you a rough starting point for your effect!