Giter VIP home page Giter VIP logo

jklintan / procedural-water Goto Github PK

View Code? Open in Web Editor NEW
16.0 4.0 0.0 18.17 MB

Procedural ocean shader for Unity, including large wave displacement from wind direction, small ripple displacement from normaldistortion using noise, fresnel effect, depth rendering for foamlines and using scene height for large wave foam. Project in the course 'TNM084, Procedural Methods for Images' at Linköping University 2019.

Home Page: https://jklintan.github.io/Procedural-Water

GLSL 15.11% ShaderLab 24.69% HLSL 26.04% JavaScript 3.82% CSS 5.38% HTML 2.92% C# 22.05%
wave-displacement trochoidal-waves fresnel wave-foam ripple-displacement hlsl-shader unity

procedural-water's Introduction

Procedural Water tool in Unity

This is a procedural ocean shader for Unity completely procedural and using mathematical noise for normal displacement instead of normal maps. The shader includes large wave displacement from wind direction, small ripple displacement from normaldistortion using noise, fresnel effect, depth rendering for foamlines and using scene height for large wave foam. Performance is around 70-80 FPS in HD resolution.

** Working on expanding the project into an unlit shader that computes reflection and refraction. **

Ocean

Large wave displacement

Trochoidal waves

The large waves are parametrized according to the wind direction and the wind strength, as well as how frequently the waves should appear (smaller wavelength). A set of trochoidal waves are used for displacement that successfully describes a progressive wave of permanent form on the surface. Since some problems occur with looping when the amplitude of a wave is too large compared to its wavelength, a third trochoidal wave is only added if a high enough wavelength are chosen.

Trochoidal wave

Small wave displacement

The small ripples on the surface are consisting of a combination of Perlin noise with different octaves. This combination of noise with different frequencies creates an almost "cloudlike" feeling when using smaller octaves, and will be much more detailed with a higher octave.

Noise displacement

Foamline around objects

foamline

In order to being able to use the depth texture, it is needed to enable this on the current rendering camera. Attach the following script to the camera that is being used for the scene.

[ExecuteInEditMode]
public class depth : MonoBehaviour
{

    private Camera cam;

    void Start()
    {
        cam = GetComponent<Camera>();
        cam.depthTextureMode = DepthTextureMode.Depth;
    }

}

If correctly attached, you can see the following appearing in the inspector for the camera.

depth rendering

When the camera depth texture exists, this can be used for calculating if points on the surface are near objects that cut through the surface or close to a shoreline.

float rawZ = SAMPLE_DEPTH_TEXTURE_PROJ(_CameraDepthTexture, UNITY_PROJ_COORD(IN.screenPos));
float sceneZ = LinearEyeDepth(rawZ);
float partZ = IN.eyeDepth;

float fade = 1.0;
if (rawZ > 0.0) // Make sure the depth texture exists
    fade = abs(saturate(_InvFade * (sceneZ - partZ)));
			
o.Alpha = 1;
if (fade < _FadeLimit)
    o.Albedo += (0, 0, 0, 0) * fade +_ColorDetail * (1 - fade);

Foam on top of the large waves

Since the top of the waves are consisting of a smaller amount of water than below, it should get brighter in color at the top. In real life, the waves break over and creates a splashing of foam. This is a possible expansion of this shader but currently, a foam color and pattern from a multioctave perlin noise is added with a gradient to the waves if they are above a certain height in z.

Large wave foam

Fresnel Effect

I am still working on adding full lightning features but a small adjustment that made the appearance more realistic was the implementation of the fresnel effect. This is determined by looking at the angle of the viewer and determine how much of a reflection that should occur. According to physical principles, we get a weak reflection close by the viewer and a strong in the distance.

Fresnel Effect

procedural-water's People

Contributors

jklintan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.