Welcome back to this three-part series on creating stylized toon water in PlayCanvas using vertex shaders. In Part 2 we covered buoyancy & foam lines. In this final part, we’re going to apply the underwater distortion as a post-process effect.
Welcome back to this three-part series on creating stylized toon water in PlayCanvas using vertex shaders. In Part 1, we covered setting up our environment and water surface. This part will cover applying buoyancy to objects, adding water lines to the surface, and creating the foam lines with the depth buffer around the edges of objects that intersect the surface.
In my Beginner’s Guide to Shaders I focused exclusively on fragment shaders, which is enough for any 2D effect and every ShaderToy example. But there’s a whole category of techniques that require vertex shaders. This tutorial will walk you through creating stylized toon water while introducing vertex shaders. I will also introduce the depth buffer and how to use that to get more information about your scene and create foam lines.
In the previous parts of this series, we learned much about shaders, the canvas element, WebGL contexts, and how the browser alpha-composites our color buffer over the rest of the page elements.
In the previous articles, we learned how to write simple vertex and fragment shaders, make a simple webpage, and prepare a canvas for drawing. In this article, we’ll start working on our WebGL boilerplate code.
Despite their notoriety, creating water levels is a time-honored tradition in the history of video games, whether that’s to shake up the game mechanics or just because water is so beautiful to look at. There are various ways to produce an underwater feeling, from simple visuals (like tinting the screen blue) to mechanics (like slow movement and weak gravity).