helenl9098 / WebGL-Procedural-Terrain

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Noisy Terrain - Hanyu Liu (liuhanyu)

Inspiration

Live Demo Link

(Scroll to zoom out and WASD to move)

https://helenl9098.github.io/WebGL-Procedural-Terrain/

Implementation Details

  • Overall Terrain: The distribution of Mountains, Lowlands, Algae, and Water was determined by a FBM noise function, where the higher the fbm value, the higher the terrain (0.0 maps to water and 1.0 maps to mountains).

  • Mountains: The shape of the mountains were created by combining sin curves with FBM noise. I adjusted the distribution of the fbm values so that the mountain peaks aren't as sharp. The colors of the mountains were created by first mixing together two 2d color maps using another more dense FBM and the height of the mountains. The blue color map favors the height of the mountains whereas the green color map favors the FBM value. Then I mixed these 2 color maps together with the noise value that generated the blue color map, so that the blue color would be more favored than the green.

  • Lowlands: The shape of the lowlands were created using Worley noise. The color of the lowlands were generated by mixing together 3 color maps: 1 dark grey/light grey color map generated using just FBM for the overall color of the rocks, 1 white to dark green color map generated using the overall terrain's fbm value for the interpolation of the rocks from inland to the water, and 1 very subtle green moss color map generated using worley noise for the rocks to appear covered in nature. I mixed the moss color map first with the rocks' overall color. Then I combined that mix with the overall interpolation.

  • Algae: The shape and color of the algae are made from worley noise that change over time (very subtle!). I passed in a uniform time variable into the worley noise function using https://www.shadertoy.com/view/MtXSzH as an example.

  • Water: The color of the water is created by blending two worley noise functions together using fbm. The water also changes over time (also very subtle). This was done by plugging in u_Time into a sin equation and then adding it to a vec2 (essentially shifting it).The worley noise I used was based off of these articles: http://www.iquilezles.org/www/articles/smoothvoronoi/smoothvoronoi.htm, https://www.shadertoy.com/view/4tXSDf

Modifiable Features

  • Lake Color: As simple as it sounds! Change the color of the lake to anything you want: from mountain dew yellow to the blood of your enemies!

  • Lake Size: The higher the number, the bigger the lake! See happens when the lakes turn into puddles....

External Resources

About


Languages

Language:TypeScript 62.6%Language:GLSL 33.9%Language:JavaScript 2.0%Language:HTML 1.5%