🔮 Techniques

Triplanar mapping

Triplanar mapping is a technique used to apply textures to 3D models in a way that looks realistic regardless of the angle at which the model is viewed, to avoid stretching effects. This is especially useful for terrain.

Triplanar mapping involves creating separate texture maps for each of the three axes (X, Y, and Z) and blending them based on the orientation of the face, using the one that fits best with the least stretching. This allows the texture maps to be applied consistently and smoothly across the surface of the model.

More information: Martin Palko's blog (opens in a new tab), catlikecoding (opens in a new tab), SimonDev video (opens in a new tab).

Texture bombing

Texture bombing is a technique to avoid noticeable texture repetition patterns.

More information: Inigo Quilez article (opens in a new tab), NVIDIA article (opens in a new tab), SimonDev video (opens in a new tab)

Clouds

Fog

Ray Marching

SimonDev's video (opens in a new tab)

The Art of Code's video (opens in a new tab)

Path Tracing

You might encounter the term path tracing in the context of 3D graphics. Path tracing is a rendering technique that is used to generate realistic images by simulating the way light behaves in a scene. It is a type of global illumination (opens in a new tab) (GI) algorithm that can produce highly realistic images, but it is computationally intensive and requires a lot of processing power. Because of this, it is typically not used in real-time rendering for video games. However, it can be useful for creating high-quality offline renders or for creating pre-rendered cutscenes. In Three.js, you can use three-gpu-pathtracer (opens in a new tab) for this.

SSGI

SSGI stands for Screen Space Global Illumination. It is a technique used to simulate realistic lighting effects such as reflections, refractions, and diffuse lighting. These effects can be difficult and computationally expensive to simulate accurately in real-time, especially in large and complex scenes. SSGI works by analyzing the scene rendered on the screen and using this information to approximate the global illumination effects. This approximation makes SSGI more performant than traditional methods of global illumination, making it suitable for use in games. 0beqz (opens in a new tab) is working on an SSGI solution for Three.js.