After the Flood

“After the Flood” is a WebGL 2.0 demo I worked on for PlayCanvas and Mozilla.

It features procedural clouds, water ripple generation, transform feedback particles and simple tree motion simulation.

It’s not as polished as I wanted it to be though.

Here’s the post from Mozilla:

And another:

And from PlayCanvas:










Also, water ripple shader:

The first music is System by Carbon Based Lifeforms.

The 2nd track (after the phone booth) is composed by Anton Krivosejenko.

The demo was shown on GDC and 3DWebFest.


  1. Hi, Arthur Rakhteenko!

    Great work on “After the Flood”! Since I knew it I have been studying playcanvas to improve the way I present my architectural models.

    I started CSS HTML and JS lessons because I did not figure out how to make animated trees and water like you and your team did. I have tried to export .FBX models from 3dmax 2015 but ther ended static on playcanvas. So I think it is all done with JS.

    Please, can you give some tips about how did you manage to make those beautiful water waves and animated trees?

    Anyway, I loved your work and i would be glad if you could help me. I know nothing about game programming so I am very confused yet.

    My e-mail is

    Best regards!

    Leonardo Juchem

    • Hi. I thought about making a whole article about making real-time trees. I still didn’t though, because there are some unsolved problems, e.g. high quality LODs. Should I?

      PlayCanvas itself doesn’t have any features to make trees. Models were done partly by hand, partly using proprietary tools. Motion was done using custom calculated vertex attributes (assigned in 3dsmax using MaxScript) and a custom vertex shader. It is conceptually similar to this technique:

      Water waves are actually quite simple. It’s a mix of small (ripples) and large (waves) tiled normal maps, which are updated every frame (or a couple of frames, depending on quality settings) with a fragment shader. I posted source of my ripple generation shader here:
      And large waves were just big circular waves. All this update and rendering is managed by a JS script.

      We’re planning to open-source this demo soon, just after we merge all new WebGL2 features into master. I’ll walk through all files, clean them and leave comments, hopefully it’ll help.

      • Thanks very much for your help! Well I have a long road forward since I have just learned the JS basics yet (var, function, array, etc).

        Your tips were very helpful and motivates me to learn more about game programming beyond architecture.

        If you make “After the flood” an open-source model it will surely help lots of people.

    • >I have tried to export .FBX models from 3dmax 2015 but ther ended static on playcanvas
      How did you animate them in 3dsmax? PlayCanvas supports skinned animation, but doesn’t support morph targets, and other modifiers’ animation.

      • For I have always used 3ds max to make simple architectural projects, every time I need animating something I use modifiers or move/rotate/scale tools.

        On sketchfab I have made a simple animation with them and exporting as .FBXm ( . The Move/Rotate tools’ animation works as I was planning but the red tree’s animation became static since I animated it with modifiers.

        I will try skinned animation as you mentioned. Thanks again for the help!

Leave a Reply to genoatest Cancel reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s