Optimizing Custom Mesh Memory with Three.js BufferGeometry Attributes
Learn how to implement Three.js BufferGeometry attributes to reduce memory overhead and optimize custom mesh rendering using Float32Arrays and index buffers.
Loading…
ReadMeFeed / Community knowledge
#buffergeometry
Real questions. Useful conversations. Find the people who know your stack.
threejsOptimizing GPU Memory with Three.js BufferGeometry Attributes
Learn how to optimize Three.js performance using BufferGeometry attributes, typed arrays, and InterleavedBuffers to reduce GPU memory overhead and improve cache locality.
Optimizing Custom Mesh Data with Three.js BufferGeometry
Learn how to use Three.js BufferGeometry and InterleavedBuffers to optimize custom mesh rendering and reduce CPU-to-GPU data transfer overhead.
BufferGeometry dynamic attribute update strategy in Three.js r152
Dynamic Vertex Attribute Updates Three.js BufferGeometry stores vertex data in TypedArrays that are uploaded to the GPU as BufferAttributes. When attributes change every render frame, developers must choose a WebGL usage pattern and decide whether to replace the whole buffer or update only modified ranges. The needsUpdate flag triggers a full buffer upload,
BufferAttribute vs InterleavedBuffer: performance trade‑offs on diverse GPUs
Goal Identify the attribute layout that yields the lowest GPU‑side latency when rendering large, frequently updated geometries across a range of desktop and mobile GPUs. Constraints Three.js BufferGeometry supports both separate BufferAttribute objects and a single InterleavedBuffer with multiple InterleavedBufferAttribute views. Driver hints (StaticDraw, Dy
BufferGeometry dispose() on shared geometry removes active mesh data
Shared geometry disposal timing When multiple meshes reference a single BufferGeometry instance loaded via GLTFLoader, removing one mesh from the scene while others remain active creates ambiguity about when to call .dispose() . The geometry's GPU buffers are reference-counted only at the JavaScript level; Three.js does not track how many meshes currently us
InstancedMesh vs merged geometry for partially animated copies
Goal: render several thousand copies of one geometry within a draw-call budget while only a subset of instances changes transform each frame. InstancedMesh uses one draw call and stores per-instance matrices, but the batch is frustum-culled as one volume and changed matrices require marking the attribute for upload. Merging compatible BufferGeometries also u
BufferGeometry attribute usage and GPU memory overhead
Optimizing GPU memory in Three.js requires a balance between vertex precision and resource allocation. When utilizing BufferGeometry , developers can define custom attributes using typed arrays to manage how vertex data is stored and transmitted to the GPU. The setUsage() method allows for hinting whether an attribute is static or dynamic, which informs the