Skip to content

Introduction

Welcome to the Procedural Generation guide. This is aimed at people that want to learn more about world generation, featuring terrain, ecosystem simulation, river animation, just to name a few. On top of being as accessible as possible to everyone, the goal here is to provide explanations, mathematical formulas, clear code, demos, and exercises for all examples.

Interactive demos are made possible thanks to the Three.js library. Only basic knowledge in Programming and Computer Graphics should be required to go through this guide.

Warning

This guide is currently (as of 2025) being written and is thus a work in progress. Except significant changes, errors, and new content being added. Feedback is welcome.

What is Procedural Generation?

Procedural Generation refers to a way of creating digital content, let it be 3D models, textures, patterns, colors, and so on. The idea is that data is generated more or less automatically through the use of an algorithm or a procedure, rather than created manually. Generating content procedurally can provide many advantages, including scalability (with the ability to generate a large set of different shapes), memory efficiency (by only storing the generation procedure, and not its output), and a lot more. Procedural generation is a powerful tool that artists use in their day to day life.

Computer Graphics has been a great playground for Procedural Generation throughout the years, with the first papers going back to 1990 with Frank Ebert.

Note that there is not a single definition for these terms. This is just my personal one and the one that will be used throughout this guide.

Do I need to know Programming?

To a certain extent, yes. We will use the Javascript language in all of our examples, which does not involve low-level programming and is probably easier to grasp than C++. Having some very basic notions of Computer Graphics is also a good thing, although each page aims at being self-contained. For the basics, see the Javascript page.

Do I need to know Math?

Only a very basic knowledge of linear algebra and math is expected. When possible, I provide the equivalence between math and code so that it is accessible to more people. For vector and matrice types, we will extensively use the strutures provided by Three.js, such as Vector2, Vector3, and Matrix4.

Getting started

This guide is separated in multiple parts, each one covering a different aspect of world generation. These are mostly independent and can be read in any order. All sections are illustrated with interactive examples that run directly in your web browser. Small exercises are mentioned at the end of each page, if you want to go deeper into a given topic.

  • ⛰️ Terrain, where you will about the different techniques for generating terrains, including procedural noise and erosion simulation.
  • 📚 Fundamentals, which is a general sections in which we explain basic concept used throughout this guide. We often references this section during the guide, so you can just read it as you go along in the main part. It also contains a glossary of all the technical terms.
  • More to come!

The concepts presented in this guide are not new groundbreaking research. Everything has either been published in research papers, used in multiple video games, or written and explained in various blogs. The end goal of this guide is to be as complete as possible and become a go-to reference for Procedural World Generation.

FAQ

Why another Procedural Generation guide?

There are a lot of great resources online to get started - but none of them was interactive and accessible enough for my tastes. In order to be complete, there is a list of references to great external resources in each part of the tutorial.

Can I use the code written here?

The code that uses Three.js is under MIT License - and the rest, written by me, is released under MIT unless specified otherwise.

Why Javascript and not C++?

It is true that Computer Graphics topics in general are usually explained in C++, but I wanted this guide to be as interactive as possible, which is easier in Javascript (although I am not a fan nor an expert of this language).

I saw an error/a typo. Where can I report it?

You can send me an email at axel.paris69@gmail.com.

Will you cover X in your guide?

I cannot guarantee that. What I can say is that I want to write about this list of topics in the near future: trees and ecosystem simulation, building, cities, and road generation, and clouds. No timeline though.

Giving feedback

As this guide has been mostly written by me, feedback is more than welcome. If you see something that could be explained better or is simply wrong, you can email me directly at axel.paris69@gmail.com.