Fun with WebGL 2.0 : 017 : Terrains & TriangleStrips

Today we learn how to use the triangle_strip drawmode to connect the dots of a grid of vertices to create a plane. With the help of perlin noise we turn the flat plane into a hilly terrain then finish it off by putting together a simple shader to apply basic lighting to make it easier to visually see the curvatures of our terrain. We finish it off by using some shader code found online to create a low-poly like diffuse coloring of our terrain. ================================================ Javascript 2D Perlin & Simplex noise functions https://github.com/josephg/noisejs OpenGL - How to calculate normals in a terrain height grid? http://stackoverflow.com/questions/13983189/opengl-how-to-calculate-normals-in-a-terrain-height-grid An introduction to shader derivative functions (Low Poly) http://www.aclockworkberry.com/shader-derivative-functions/ ================================================ GitHub :: https://github.com/sketchpunk/FunWithWebGL2 Patreon :: https://www.patreon.com/sketchpunk Tumblr :: http://sketchpunklabs.tumblr.com/