Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

[WIP] Spinning Wheel Effect

Discussion in 'Works In Progress - Archive' started by fra3point, Jun 24, 2016.

  1. fra3point

    fra3point

    Joined:
    Aug 20, 2012
    Posts:
    269
    Hi, everyone!
    I'm working on an advanced Spinning Wheel Effect for both 2D and 3D development, and I want to show it to this community!




    THE STORY

    Some time ago I started to work on a car game but after about a year of development I've suspended the project because it became too big for me.
    During that period I created a lot of useful stuff for car games, in particular for tuning car games.
    At the end of 2015 I decided to extract those (sub)systems from my game, improve them, and create asset packages for each of them.
    And this is the first!



    THE SYSTEM

    This package will help devs to avoid the ugly wagon effect that occurs when a wheel is rotating faster than the frame rate of the game.
    Given a well structured wheel model and some parameters, the script automatically generates some blocks of progressively blurred textures, and mutually swaps them basing on the wheel speed.
    I know words are always the worst way to explain things, so here's a short video showing the effect in action:




    [I'm sorry for the bad UV Map of the BMW logo, which doesn't seem to be well centered]

    As you can see, the rim model fades out while another "plate-shaped" model (I'll call it SpinRim) fades in with a proper blurred texture.
    Also, you can see the same effect on the brake disk, on the frontal part of the tyre and on the tread.

    In particular, the system can generate these blurred maps:
    • SpinRim diffuse
    • Brake disk diffuse
    • Brake disk bump
    • Tyre diffuse
    • Tyre bump
    • Tread diffuse
    • Tread bump
    Of course, I could add all the Standard Shader's texture maps, but I don't think it would be a good idea.



    WHY STATICLY GENERATED TEXTURES

    Initially all was done at runtime and the framerate was quite good.
    Here's what I did at the beginning:



    But after that I added the support for the tyre and the bump maps... And I faced a dramatic FPS drop.
    I use some custom blur shaders using multisampling (up to 360 samples!), to generate a different texture for each map, each frame!
    For example, using a 360° spin blur was like sampling 7 maps * 360 samples = 2520 samples each frame.
    So, I decided to use the old but good static way: the system generates all the needed textures and it stores them in an array.
    Depending on the size and quality of the reference images, all these textures will use some memory, but the FPS are always the same!!!
    I let the user choose how many textures have to be generated for each map. A good value for me is 10 (for a total of 70 textures).
    The best effect is of course obtained using 360 textures for each map, one for each degree of rotation, but it is a useless waste of memory. "DON'T DO THIS AT HOME!"



    WORKFLOW

    There's an only step to follow in order to work with this system: create a good wheel model.
    Unfortunately, not all wheels can be used here. Since this isn't a motion blur effect (which works as post processing effect) there are some simple rules to follow while modeling the wheel. Here's a preliminar candidate for the wheel's structure:






    OPTIONS

    And, finally, a list of the currently available options:

    SpinRim resolution: the resolution of the generated textures to be applied to the SpinRim model
    Tyre resolution: the resolution of the generated textures to be applied to the Tyre (front) model
    Tread resolution: the resolution of the generated textures to be applied to the Tyre (tread) model
    BrakeDisk resolution: the resolution of the generated textures to be applied to the BrakeDisk model
    MaxBlur: the maximum angle of the spin blur effect. Generally, the maximum blur should be 360, but I found that something like 90-100 is good, too.
    AlphaMultiplier: multiplies the alpha channel of the transoarent maps (for me 2 is good)
    Samples: how many textures the system have to generate for each map? 10-20 is a good value.
    SamplesDistibution: the distribution of the calculated blur's angle. It uses different mathematic formulas. Useful for a better low speed blur spreading when using a small amount of textures.
    FadeTreshold: in this variable isn't 0 the rim model won't be completely faded and its alpha will be FadeTreshold
    Texture arrays: these arrays are shown in the inspector in play mode as read only. This is intentional, because these arrays are automaticly allocated, filled and assigned to the game elements.



    CONCLUSIONS

    And this is all!
    I hope you will find this interesting, and please tell me if you think that there are things to add or modify.

    I want to thank a couple of members of this community, which helped me to write some shaders:

    • bgolus
    • mgear

    Thanks for reading this long post!!! :)
     
    Last edited: Jul 1, 2016
    600, John-G, theANMATOR2b and 5 others like this.
  2. Nitugard

    Nitugard

    Joined:
    May 10, 2015
    Posts:
    343
    Really nice effect.
     
    fra3point likes this.
  3. DroidifyDevs

    DroidifyDevs

    Joined:
    Jun 24, 2015
    Posts:
    1,724
    That effect is absolutely amazing, it looks like Forza :)

    Is there a frame rate difference with and without your effect?
     
    fra3point likes this.
  4. fra3point

    fra3point

    Joined:
    Aug 20, 2012
    Posts:
    269
    @OneDragutin thank you!!!

    @DroidifyDevs thanks a lot, I appreciate! The good news is that there is no difference at all in the fps count with or without this effect. Depending on the number and the resolution of the generated textures the only overhead devs may face could be on the loading time at startup. I did some tests on a not-so-recent machine...

    Textures for each map: 10 (as in the video)
    Resolution: 128x128
    Startup time: immediate

    Textures for each map: 10
    Resolution: 1024x1024
    Startup time: less than 5s

    I will do some other more precise tests and i will put them here!
     
  5. DroidifyDevs

    DroidifyDevs

    Joined:
    Jun 24, 2015
    Posts:
    1,724
    Also you should try some performance tests on mobile, since some people might want to use that on mobile games. Even very large, successful games like Asphalt 8 made by Gameloft have the wagon wheel effect... so this is just amazing.
     
    fra3point likes this.
  6. fra3point

    fra3point

    Joined:
    Aug 20, 2012
    Posts:
    269
    I will try some tests on mobile, why not! I only have some Android devices, but their hardware is similar to some iOS devices.
    That's a good idea! Indeed, in mobile development, bump maps aren't used as often as on high-end platforms and the texture size can be reduced without losing too much detail. Thanks for your suggestion!
     
  7. fra3point

    fra3point

    Joined:
    Aug 20, 2012
    Posts:
    269
    UPDATE - 29 June 2016 (as requested by @DroidifyDevs )


    NEW FEATURES
    • Now the script supports mobile platforms (tested on Android only): it should be compatible with all the platforms which use RGB and/or DXT5nm normal maps. The platform detection is automatic and the only thing to do in order to successfully build the project is to add a couple of custom shaders (depending on the target platform) in Edit->Project Settings->Graphics->Always Included Shaders.
    • Now, the rim can be colored and the effect will match that color.
    • Its possible to define a distinct material for the wheel details (logo, bolts, ecc.) which aren't involved in the rim painting. Textures from these materials will be blurred but not tinted.
    PERFORMANCE TESTS

    upload_2016-6-29_21-26-1.png

    This screenshot is from my Asus phone

    The following tables refer to the built application and not to the editor's play mode:

    upload_2016-6-29_18-17-5.png

    As you can see, all works fine in both PC and Mobile, with an awesome result of zero fps lost.
    I had to write a different variant of my shaders because of some tricky things such as loop unrolls, target models, etc.
    Please, don't be scared by the 34 fps on mobile. The scene is quite simple, with some materials (standard shader) and more or less 7k triangles. My phone definitively has poor hardware performances.



    KNOWN ISSUES

    As now, in order to get the right result, the normal maps originally applied to the model's materials mustn't be marked as Normal Maps. In this way, the wheel will look bad in edit mode but fine in play mode (which is more important). Anyway, I'll try to find a solution.


    Cheers,
    Francesco

     
    Last edited: Jun 29, 2016
    DroidifyDevs likes this.
  8. John-G

    John-G

    Joined:
    Mar 21, 2013
    Posts:
    1,122
    Really great effect, very interested in trying this.
    Can it be used for other systems then car tyres? I would love to have this working for a plane propeller and helicopter rotor system. Would it be easy to implement this info the system, it would be a perfect use for it. :)

     
    Last edited: Jun 29, 2016
    fra3point likes this.
  9. fra3point

    fra3point

    Joined:
    Aug 20, 2012
    Posts:
    269
    Hi, @John G.

    It's possible to apply this effect to planes and helicopters!!
    The script is meant for car wheels, but of course it's so easy for me to modify it for your purpose.
    Actually, a system for that kind of rotors would be so much simpler than the one I'm making for cars.

    So, my answer is: YES, but with a modified version of the script! :)
     
    John-G likes this.
  10. DroidifyDevs

    DroidifyDevs

    Joined:
    Jun 24, 2015
    Posts:
    1,724
    W
    Wow, that's so amazing that you have a pretty complicated script with 0 FPS loss, even on a relatively low power device. Just. Amazing.

    Are you planning to ever release it? Perhaps on the Asset Store?
     
  11. fra3point

    fra3point

    Joined:
    Aug 20, 2012
    Posts:
    269
    Yes, of course. I'd like to release it on the Asset Store as soon as possible. Anyway, it will be the fitst time for me on the store, so maybe it will take some time. So I don't know exactly when it will be released, but trust me: soon! :)
     
    DroidifyDevs likes this.
  12. John-G

    John-G

    Joined:
    Mar 21, 2013
    Posts:
    1,122
    Cool and maybe even Contra rotating propels like the following. Just the effect with them is awesome.



    Would be very interested in picking this up with the modified script to use both for car wheels and propellers.
     
  13. fra3point

    fra3point

    Joined:
    Aug 20, 2012
    Posts:
    269
    Yes, that should be easy, too. You'll only need another curved model which rotates in the opposite direction and attach the <modified> script to it.
    Please, note that this effect works better with flat spokes, so I think the ones I saw in your video will be perfect.
     
    Last edited: Jun 29, 2016
    John-G likes this.
  14. fra3point

    fra3point

    Joined:
    Aug 20, 2012
    Posts:
    269
    @John G. , here you a little test video showing a propeller with this effect on!

    I didn't made the models but I modified their structure and materials for matching some of the system's constraints.
    The good news is that I didn't modify the sctipt, since it's possible to not assign some of the wheel parts (which, in this case, the propeller doesn't have).



    Here I used ten 1024x1024 samples with no downsampling, a maximum blur of 80° and a linear distribution function for the samples.

    upload_2016-6-30_19-48-22.png
     
    Last edited: Jun 30, 2016
    DroidifyDevs and John-G like this.
  15. John-G

    John-G

    Joined:
    Mar 21, 2013
    Posts:
    1,122
    Brilliant, love it.
     
    fra3point likes this.
  16. fra3point

    fra3point

    Joined:
    Aug 20, 2012
    Posts:
    269
    UPDATE - 1 July 2016

    I added some new improvements:

    • Now it's possible to choose the maximum background alpha and a fake shadow contribution factor. For background I mean the clear color of the generated spin textures. Here are some combinations:

    upload_2016-7-1_19-51-18.png

    And a little demo video showing the effect on a car:

     
  17. John-G

    John-G

    Joined:
    Mar 21, 2013
    Posts:
    1,122
    Any updates?
     
    fra3point likes this.
  18. fra3point

    fra3point

    Joined:
    Aug 20, 2012
    Posts:
    269
    Hi, @John-G! I wrote a post some days ago but for some reasons it's not here anymore.

    UPDATE - 12 July 2016


    Here are the notable new features:
    • The main script now takes in input all the wanted wheels and each wheel has a "SpinWheel" script attached. In this way they share the same textures, less memory is wasted and if they have different speeds the effect will match those speeds indipendently. This thing forced me to make some changes on how the materials and the textures are handled, anyway it will be quite easy for users to set up everything.
    • A texture compression option has been added. This will use less memory but it's a lossy compression.
    • A total memory size counter has been added, and it shows in the inspector how much memory has been used for the textures.
    upload_2016-7-15_17-41-29.png

    Here's how the inspector looks like now:

    upload_2016-7-12_21-14-35.png


    • I also added a middle script (I call it engine simulator) which will simulate or integrate a physics engine. This script will contain the wheel moving logic. Why? Of course, because most car games use a physic engine (like UnityCar Pro or Edy's system). Here's a video showing this effect integrated with UnityCar Pro 2.2:

    • A new demo scene and an engine simulator script for planes (or helicopters) has been added. This will focus the users on the flexibility of the system, which is thought for car games but it can be used for other things like turbines and/or propellers. I don't have screenshots or videos for this, I'll make them as soon as possible.
     
    Last edited: Jul 15, 2016
    John-G and 600 like this.
  19. TooManySugar

    TooManySugar

    Joined:
    Aug 2, 2015
    Posts:
    864
    This is super cool effect
     
    fra3point likes this.
  20. fra3point

    fra3point

    Joined:
    Aug 20, 2012
    Posts:
    269
    Thank you, glad to hear that! :)
     
  21. 600

    600

    Joined:
    Dec 18, 2013
    Posts:
    385
    Awesome! A must have!
    When will it be available?
     
    fra3point likes this.
  22. John-G

    John-G

    Joined:
    Mar 21, 2013
    Posts:
    1,122
    ^^+1
     
    fra3point likes this.
  23. fra3point

    fra3point

    Joined:
    Aug 20, 2012
    Posts:
    269
    I don't know the exact date: the system is ready and I just have to submit it to the asset store, but there are some things to do in order to successfully upload the package. I will submit it in few days! :)
     
    DroidifyDevs, 600 and John-G like this.
  24. fra3point

    fra3point

    Joined:
    Aug 20, 2012
    Posts:
    269
    UPDATE 20 July 2016

    Finally, the package has been submitted to the Asset Store. I'm waiting for the package review.
    If there won't be any problems, it will be available in some days!


    - I added an (almost) complete user manual, including a wheel structuring tutorial.
    - I switched back the package to the 5.3.5 version of Unity, because before I was using the 5.4.0 beta version.
    - Since there was another package named "Spinning Wheel Effect" I renamed mine into "Spin Wheel Effect"

    Stay tuned!! :)
     
    Last edited: Jul 20, 2016
    John-G likes this.
  25. 600

    600

    Joined:
    Dec 18, 2013
    Posts:
    385
    Hey great news, can’t wait!

    Would it work on lower Unity versions too?
    Its not a good practice to upload with the latest version only as there will be many projects that are in process in previous versions, for example I have one in 5.2 and I just can’t update at the moment :(

    Maybe I can download it with the 5.3.5 and then import in lower version, can you test it if that would work? Then maybe upload another pack for lower Unity 5 version?
     
    fra3point likes this.
  26. fra3point

    fra3point

    Joined:
    Aug 20, 2012
    Posts:
    269
    Hi, @600 !

    I didn't tested the package on lower versions. I can download the 5.0 version and make an update of the package for 5+ versions compatibility as soon as possible (consider it as a 1.1 version of the package).

    Thanks for the good suggestion! :)
     
    600 likes this.
  27. 600

    600

    Joined:
    Dec 18, 2013
    Posts:
    385
    Great! Waiting for the release!
     
    fra3point likes this.
  28. DroidifyDevs

    DroidifyDevs

    Joined:
    Jun 24, 2015
    Posts:
    1,724
    I'm more hyped about the release of this than the iPhone 7 :)
     
    600 and fra3point like this.
  29. fra3point

    fra3point

    Joined:
    Aug 20, 2012
    Posts:
    269
    Lol!! I say the same, but for other (and obvious reasons)!!!

    Anyway, I did some tests on Unity 5.0 after trying a downgrade from 5.3.5 and.... I failed! :(
    The problem isn't to recreate the scenes in the downgraded project, as I thought. The real problem is that for some reasons some parts of the code don't produce good results anymore under 5.0.

    I'll investigate this soon, but for the first release you'll need the 5.3.5 version.
     
    DroidifyDevs and 600 like this.
  30. 600

    600

    Joined:
    Dec 18, 2013
    Posts:
    385
    Thanks for testing, I might need to update the project after the summer to 5.4… I want this effect in my game for sure!
     
    fra3point likes this.
  31. fra3point

    fra3point

    Joined:
    Aug 20, 2012
    Posts:
    269
    @600

    Great news! It works under Unity 5.0 now, BUT without antialiasing for the spinning spokes blurred textures.

    This is a bug fixed in the 5.2 version: https://issuetracker.unity3d.com/is...-fails-if-rendertexture-has-anti-aliasing-set

    The good thing is that I don't see so much difference between the AA texture and the aliased one.
    So I'll immediately submit another version for the Unity5 compatibility (if the asset store review team will approve my work). ;)
     
    Last edited: Jul 21, 2016
    John-G and 600 like this.
  32. 600

    600

    Joined:
    Dec 18, 2013
    Posts:
    385
    Super !!
    I have 5.2.2 so it will work! Great news, Thanks!
     
    fra3point likes this.
  33. fra3point

    fra3point

    Joined:
    Aug 20, 2012
    Posts:
    269
    600 likes this.
  34. eddiemoll

    eddiemoll

    Joined:
    Jul 20, 2018
    Posts:
    1
  35. fra3point

    fra3point

    Joined:
    Aug 20, 2012
    Posts:
    269
    Hi, @eddiemoll

    The logo should be a separate object so the system won't blur it.
     
    Last edited: Jul 20, 2018
  36. eventsz

    eventsz

    Joined:
    May 1, 2015
    Posts:
    1
    Nice
     
    fra3point likes this.
  37. THEDARKSLAYER996856

    THEDARKSLAYER996856

    Joined:
    Jan 13, 2019
    Posts:
    2
    ¿Por casualidad lo quitó de la tienda ?, no lo encuentro y si uso su enlace dice "Desafortunadamente, Spin Wheel Effect ya no está disponible".