Refractions in WebGL

 Implementing Animated Water with Reflections and Refractions in WebGL

Water is one of the most challenging and rewarding elements to render in computer graphics, especially in real-time. Good-looking water is visually appealing and I’ve always been fascinated by the challenge of rendering realistic water. This is why I have worked on adding water to my WebGL engine for the last few weeks. In this post, I’ll discuss some of the different techniques that can be used to render water in WebGL and what I did in my implementation.

Basic Water

There are many ways you can render water in real-time graphics. Depending on the look of your scene, it can range from easy to very complicated. Probably the most straightforward way to add water is just drawing a big blue quad, which could be enough for something like a Minecraft environment.

Stepping up from a blue quad would be adding and looping through a seamless animated water texture. Flat water, however, doesn’t look very interesting, so it would be nice to add some waves too. The first option is to subdivide the quad into a grid of much smaller quads and then animate the y position of the vertices in the vertex shader. This approach has the advantage that the elevation of the water surface actually changes. The disadvantage, however, is that depending on the size and scale of your water, you might need a lot of vertices for this to look good.

The second option — and the one I generally prefer — is to add waves with a normal map instead. This does not actually change the elevation of the water, it’s always perfectly flat. A normal map only changes how light interacts with the surface so it looks like there are waves. The normals are calculated and animated on a per-fragment level, which means you can easily add a lot of small waves with minimal performance impact.

Visit

In the past, I either used sinus patterns or water textures and normal maps from the internet, which is fine for learning and testing. However, when I worked on my (sadly yet unreleased) indie game, I couldn’t use random textures from the internet. Instead, I created a procedural algorithm to create seamless animated water textures and normal maps. The trick for creating these textures is…