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. <h1>Basic Water</h1> 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. <a href="https://levelup.gitconnected.com/implementing-animated-water-with-reflections-and-refractions-in-webgl-1104b556d5c1">Read More</a>