Generating a NavMesh The easiest way to generate a NavMesh is using the high level generator functions from recast-navigation/generators: generateSoloNavMesh – Generates a NavMesh with a single tile. You can use this for smaller environments. generateTiledNavMesh – Generates a NavMesh with multiple tiles. You should use this for larger environments. generateTileCache – Generates a TileCache that supports temporary obstacles.… Continue reading NavMesh
Tag: threejs
recast-navigation-js
recast-navigation-js is a WebAssembly port of the Recast and Detour libraries. Recast is a state of the art navigation mesh construction toolset for games, and Detour is a path-finding and spatial reasoning toolkit. This library provides high level APIs that make it easy to get started creating navigation meshes, querying them, and simulating crowds. It also provides… Continue reading recast-navigation-js
SDF
SDF stands for Signed Distance Field and is usually used in fragment shaders to draw shapes. The idea is that we send a 2D or 3D point to a SDF shape function and that function returns how far that point is from the shape. There are many possible shapes, as long as they can be… Continue reading SDF
Configuring the shadows
Each light casting shadows will render the scene in a specific way and output that we call “shadow map”. This shadow map is then used to know if a surface is in the shade or not. By default, that shadow map resolution is rather low in order to maintain solid performance. Fortunately, we can change… Continue reading Configuring the shadows
Lut
Represents a lookup table for colormaps. It is used to determine the color values from a range of data values. Import Lut is an add-on, and must be imported explicitly. See Installation / Addons. import { Lut } from ‘three/addons/math/Lut.js’; Code Example const lut = new Lut( ‘rainbow’, 512 ); const color = lut.getColor( 0.5 );… Continue reading Lut
MeshSurfaceSampler
Utility class for sampling weighted random points on the surface of a mesh. Weighted sampling is useful for effects like heavier foliage growth in certain areas of terrain, or concentrated particle emissions from specific parts of a mesh. Vertex weights may be written programmatically, or painted by hand as vertex colors in 3D tools like… Continue reading MeshSurfaceSampler
OBB
Represents an oriented bounding box (OBB) in 3D space. Import OBB is an add-on, and must be imported explicitly. See Installation / Addons. import { OBB } from ‘three/addons/math/OBB.js’; Constructor OBB( center : Vector3, halfSize : Vector3, rotation : Matrix3 ) center — The center of the OBB. (optional) halfSize — Positive halfwidth extents of the OBB along each axis. (optional) rotation —… Continue reading OBB
EdgeSplitModifier
EdgeSplitModifier is intended to modify the geometry “dissolving” the edges to give a smoother look. Import EdgeSplitModifier is an add-on, and therefore must be imported explicitly. See Installation / Addons. import { EdgeSplitModifier } from ‘three/addons/modifiers/EdgeSplitModifier.js’; Code Example const geometry = new THREE.IcosahedronGeometry( 10, 3 ); const modifier = new EdgeSplitModifier(); const cutOffAngle = 0.5; const… Continue reading EdgeSplitModifier
Lazy Loading and Scene Pooling in Three.js
Efficient asset management is critical for ensuring smooth performance in 3D applications, especially when dealing with large or complex scenes. Lazy loading and scene pooling are two essential optimization techniques that improve load times, reduce memory usage, and maintain high frame rates in Three.js. This guide explains how to implement lazy loading and scene pooling… Continue reading Lazy Loading and Scene Pooling in Three.js
Optimizing Scene Switching in Three.js
In Three.js, switching between scenes is a common requirement for interactive 3D applications, such as games or XR experiences. However, improper scene management can lead to performance issues, including memory leaks, lag, and slow rendering. This guide will explain how to optimize scene switching to ensure smooth transitions and maintain high performance. 1. Understanding Scene… Continue reading Optimizing Scene Switching in Three.js