🔮 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, catlikecoding, SimonDev video.

Texture bombing

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

More information: Inigo Quilez article, NVIDIA article, SimonDev video

Clouds

Rendering realistic clouds in real-time is a classic graphics challenge. Volumetric clouds are typically rendered using ray marching through 3D noise textures — sampling density along each ray to determine opacity and lighting. Cheaper approaches include billboard sprites, particle-based clouds, or skydome textures for static cloud layers.

• SimonDev’s Clouds video
• Cody Bennett’s implementation

Fog

Fog hides distant geometry (useful for distance culling) and adds atmosphere. Linear fog fades uniformly with distance. Exponential fog is denser and more natural-looking. Height fog varies by altitude, pooling in valleys. Fog can also be computed per-pixel in a shader for more control — using depth, height, and noise to create effects like volumetric mist.

• Fog (SimonDev)
• Inigo Quilez article
• Fog for Top-Down Games (Unreal Engine)

Ray Marching

SimonDev’s video

The Art of Code’s video

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 (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 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 is working on an SSGI solution for Three.js.