Unity interactive water ripple post-treatment

Unity Interactive water ripple post-treatment

• be based on unity post-processing , Provide interactive screen water ripple effect
• git Address ：https://github.com/ak47007tiger/OilWater
• design sketch
  

characteristic

• Provide 2 Algorithms ： One from shader toy; A classic algorithm for online search
  • I'm pragmatism , If there are ready-made algorithms , I'm not going to start with 0 To calculate , After understanding it, I only care about its use value
• Auto fit large screen , The larger the screen, the more stuck
• Key parameters are provided with configuration , Don't write code

How to see the effect after downloading the project

• open Assets/OilWave/Loading.unity, function
• Shortcut key "control + i" Switch scenes , Click the screen in the scene with pictures

principle

• This principle is said from the perspective of a rear-view mirror , That is, Zhugeliang , This is mainly to help readers understand , I can't reproduce the creator's ideas
• Water ripple is a kind of transmission of vibration , We need to create vibrations 、 Diffuse vibration
• There are ups and downs after the waves on the water surface , Specular reflection 、 refraction , To be realistic , We need to achieve these effects , This article doesn't care
• In natural phenomena, other places under the water can be seen on the water circle , Hereinafter referred to as distortion , This phenomenon is what this paper aims to achieve

Realize the idea

• Suppose a texture is calm water
• Produce initial vibration , Set a certain area of a texture r The channel is a value
• Spread vibration , Update this texture every frame , Let this area r The value of the channel can spread out like a ring , You need to know the value of the previous frame , You cannot discard the value of the previous frame after the current frame is updated , So we need to g The channel saves the vibration value of the previous frame
• The more volatility , The more severe the distortion , That is, the larger the pixel value representing the vibration amplitude in the vibration texture , The larger the offset when sampling the image to be displayed

combination Unity How to realize

• Vibration texture ： Create a texture , Each frame call shader Read and render this texture
  • Find out CustomRenderTexture Encapsulates this function , Direct use , Appoint shaderPass For spreading vibration pass, See the engineering code for details
• Generate amplitude
  • CustomRenderTexutre On reset UpdateZones Will execute all pass, Add a function to convert clicks to texture coordinates , And send the coordinates to the material , Execute click pass The initial vibration will be set to a certain pixel of the vibration texture
• Let the whole scene produce interactive water ripples , Sample and distort the texture generated by the game scene , Post processing can meet this demand
• Twist formula
  • Input
    • x,y
    • Amplitude texture waterTex
    • Scene texture mainTex
  • In the middle
    • The amplitude of the target pixel up, down, left and right , l, r, t, b
    • offset = normalize(float3(r - l, t - b, 1))
  • With offset You can do that. mainTex Conduct distorted sampling

Needed unity knowledge

• Material property settings
• shader grammar
• CustomRenderTexutre characteristic
• Customize the post-processing process

Description of main classes in the project

• The code is all there Assets/OilWave Next , Under other folders are irrelevant codes , Have no meaning , Never mind
  • ConfigManager, It is written for modifying the material parameters without changing the code after the program is packaged
  • DemoForResolutionAdapt, Responsible for creating CustomRenderTexture, If the screen is too large, shrink the created vibration texture to improve performance
  • EffectInput, adapter pc And mobile , Handle mouse click or finger touch events
  • OilWavePostProcessing, Update vibration texture , Post execution processing
  • ProcessingConfig, Parameter class , Used to create data objects
  • WaterManager, Management resources , Adapt to screen size switching
  • WaterWave01, One of the earliest demo edition , There is not so much business logic
• WaterWave01.shader, Update the vibration texture shader
• WaterWaveShow.shader, Post processing shows shader, The logic of distorted sampling is here