Float32Array vs Float64Array in Three.js BufferGeometry

When building custom BufferGeometry in Three.js, choosing between Float32Array and Float64Array for attribute data significantly impacts memory allocation, CPU-to-GPU bandwidth, and rendering performance. This article explains the direct differences in memory consumption, GPU compatibility, and precision between these two typed arrays to help you optimize your 3D WebGL applications.

Memory Allocation and Size

The most direct difference between the two typed arrays is the amount of system memory they allocate per element:

• Float32Array (Single Precision): Allocates 4 bytes (32 bits) per element.
• Float64Array (Double Precision): Allocates 8 bytes (64 bits) per element.

Using a Float64Array doubles the memory footprint on the CPU. For example, a custom geometry with 1,000,000 vertices requires 3,000,000 floating-point numbers (X, Y, and Z coordinates for each vertex). * Using Float32Array allocates 12 MB of RAM. * Using Float64Array allocates 24 MB of RAM.

GPU Compatibility and WebGL Limitations

WebGL, the underlying graphics API for Three.js, operates almost exclusively on 32-bit single-precision floats. Graphics cards (GPUs) are designed to process massive amounts of 32-bit (and increasingly 16-bit) data in parallel.

Standard WebGL does not support 64-bit floating-point attributes in vertex shaders. When you pass a Float64Array to a Three.js BufferAttribute, one of two things happens: 1. Automatic Downcasting: Three.js or the browser’s WebGL binding layer must convert the 64-bit values into 32-bit values before uploading them to the GPU. This conversion costs CPU cycles and temporarily increases memory usage during the upload process. 2. Precision Loss: Even if you allocate 64-bit precision on the CPU, the GPU will render it using 32-bit precision, completely erasing the accuracy benefits of the Float64Array during rendering.

Performance and Bandwidth

Because Float64Array requires double the data size, it introduces significant performance bottlenecks:

• Data Transfer Overhead: Copying data from the CPU to the GPU (VRAM) is a common bottleneck in WebGL. A Float64Array doubles the amount of data that must travel across the system bus.
• Cache Efficiency: Smaller data sizes mean more vertex data can fit into the CPU and GPU caches, resulting in faster processing times.

When to Use Each Array

Use Float32Array for:

• Almost all standard Three.js geometry attributes (positions, normals, UVs, colors, and custom shader attributes).
• Real-time rendering where frame rate and memory efficiency are priorities.

Use Float64Array only for:

• High-precision CPU-side calculations (such as astronomical simulations or geographic coordinate transformations) before rendering. Once the calculations are complete, the final coordinates should be copied into a Float32Array to be passed to Three.js for rendering.