• Hanming Zhang
• Linshen Xiao

We test and develop on the lastest version Chrome browser. WebGL 2.0 required.

Since the whole demo scene is procedurally generated, please wait for around 30s everytime you load it. If your browser pop up "not response" window, please click "wait".

Please remeber to press the "DemoMode" button!

• Online Demo Link

We would like to create an animated environment with interactive procedural animations and models. We are motivated by games like Jounery and DreamTank.

The goal of this project is to create an environment that feels responsive and alive.

DreamTank	Jounery	Unlimited Blade Works

Hanming Zhang

• Sky box
• ShadowMap
• Cinematic Camera(with fade in/out transition effect)
• Water
• God ray
• Bloom
• Deferred Shading Pipeline
• Particle System
• Background Music

Linshen Xiao

• Terrain
• Fog
• Desert shader
  • Desert material
  • Cloud shadow
• Scattering objects
• Ribbon shader
  • Flowing effect
• Cloud and Star
• Curl noise for particles
• Postprocessing
  • Chromatic Aberration
  • Vignette
  • FilmNoise
  • Flare
• Final Color Grading

Hanming Zhang

• Sky box: We use a cubic sky box in our scene and the sky itself is procedurally generated in fragment shader.

• ShadowMap: Here is a screenshot of shadow:

  Shadow map is pre-baked when our scene is initialized so that we can save a lot of time rendering each frame. For some implemetation details, I refer to WebGL Tutorial: Directional Shadow Mapping without extensions.

• Cinematic Camera: It's basically a simple time-driven key-frame system. In the scene initialization stage, we set several key-frames, and linear lerp camera's position and target position. Also, during the transition, we use some fade in/out post processing effect to make it more cinematic.

• Water: An independent pass is used to render a reflection frame. We save it in our frame buffer and use it as a texture in the following water rendering pass. Here is the pure refection effects and water we got:

pure reflection	water with reflection

• God ray
• Bloom
• Deferred Shading Pipeline: Here is a basic view of our pipeline:
• Particle System: We use particles(0.1 million) to simulate sands effect on the terrain surface. And WebGL 2.0 transform feedback(thanks to great WebGL 2.0 Samples) is used to more efficiently update each particle's information(Position / Life time / whether it's out of bound...) Here is a screen shot of only particles:
• Audio

Linshen Xiao

• Terrain: Modified Fractal Brownian Motion from here
• Fog: Mix Fog's Color based on depth of fragments;
• Desert Shader:
  • Desert material: Modified from The shading of Dunes in Journey (in Chinese);
    • Oren Nayer Diffuse;
    • Direction of normal map decided by the direction of normals, steep and shallow based on the slope of surface;
    • Specular map flowing direction decided by the direction of normals;
  • Cloud Shadow:
    • Modified Fractal Brownian Motion from here;
    • Calculate the value from the function above based on the world position and pass it to fragment shader for further computation of final color;
• Scattering Objects: Scatter the swords and the monuments by randomly choosing a index of the terrain, rotate the objects based on the normal of that vertex on the terrain;
• Ribbon shader:
  • Windy effect: Use sin function to offset the vertices based on time and world position;
• Cloud and Star
  • Modified Fractal Brownian Motion from here, offset the position during the loop of octaves by time to achieve the transformation of clouds;
• Curl noise for particles
  • Curl noise modified from here. 2D Noise is still Modified Fractal Brownian Motion from here ;
• Postprocessing
  • Chromatic Aberration: Modified from here;
  • Vignette: Modified from here;
  • FilmNoise: Modified from here;
  • Flare: Modified from here;
• Final Color Grading: Light color, fog color changed when the inclination of the skybox changed;

• Fractal Brownian Motion
• The shading of Dunes in Journey
• Curl Noise
• Chromatic Aberration
• Vignette
• FilmNoise
• Flare
• WebGL Tutorial: Directional Shadow Mapping without extensions
• WebGL 2.0 Samples